Pages: update react components to use v2 theme (#33413)

* chore: expose theme types / functions

* fix(grafana-ui): withTheme2 extends themeable2

* feat: migrate page components to use new theme

* refactor(pages): replace legacy form components with latest form components

* refactor(dashboardimport): update page component to use theme spacing

* refactor(alerting-ng): update page component to use v2 theme

* test(dashboardpage): update test for v2 theme

* test(apikeyspage): update test to select InlineSwitch component

* test(createteam): update snapshot

* refactor(playlist): update page components to use v2 theme

* refactor(page): put back classes on page-container and background colors
This commit is contained in:
Jack Westbrook
2021-04-28 16:05:00 +02:00
committed by GitHub
parent 22ac0fc3cd
commit 249004ebef
15 changed files with 108 additions and 148 deletions

View File

@@ -187,8 +187,8 @@ describe('ApiKeysPage', () => {
});
function toggleShowExpired() {
expect(screen.getByText(/show expired/i)).toBeInTheDocument();
userEvent.click(screen.getByText(/show expired/i));
expect(screen.queryByLabelText(/show expired/i)).toBeInTheDocument();
userEvent.click(screen.getByLabelText(/show expired/i));
}
async function addAndVerifyApiKey(addApiKeyMock: jest.Mock, includeExpired: boolean) {

View File

@@ -11,7 +11,7 @@ import { ApiKeysAddedModal } from './ApiKeysAddedModal';
import config from 'app/core/config';
import appEvents from 'app/core/app_events';
import EmptyListCTA from 'app/core/components/EmptyListCTA/EmptyListCTA';
import { LegacyForms } from '@grafana/ui';
import { InlineField, InlineSwitch } from '@grafana/ui';
import { rangeUtil } from '@grafana/data';
import { getTimeZone } from 'app/features/profile/state/selectors';
import { setSearchQuery } from './state/reducers';
@@ -21,8 +21,6 @@ import { ApiKeysTable } from './ApiKeysTable';
import { ApiKeysController } from './ApiKeysController';
import { ShowModalReactEvent } from 'app/types/events';
const { Switch } = LegacyForms;
function mapStateToProps(state: StoreState) {
return {
navModel: getNavModel(state.navIndex, 'apikeys'),
@@ -154,7 +152,9 @@ export class ApiKeysPageUnconnected extends PureComponent<Props, State> {
{showTable ? (
<>
<h3 className="page-heading">Existing API keys</h3>
<Switch label="Show expired" checked={includeExpired} onChange={this.onIncludeExpiredChange} />
<InlineField label="Show expired">
<InlineSwitch id="showExpired" value={includeExpired} onChange={this.onIncludeExpiredChange} />
</InlineField>
<ApiKeysTable apiKeys={apiKeys} timeZone={timeZone} onDelete={this.onDeleteApiKey} />
</>
) : null}