Replace deprecated layout elements (#86977)

This commit is contained in:
linoman
2024-04-26 17:13:28 +02:00
committed by GitHub
parent c3cde17b33
commit 9a1f9c126f
5 changed files with 19 additions and 28 deletions

View File

@@ -1359,11 +1359,8 @@ exports[`better eslint`] = {
[0, 0, 0, "Styles should be written using objects.", "0"], [0, 0, 0, "Styles should be written using objects.", "0"],
[0, 0, 0, "Styles should be written using objects.", "1"] [0, 0, 0, "Styles should be written using objects.", "1"]
], ],
"public/app/features/admin/UserListPublicDashboardPage/UserListPublicDashboardPage.tsx:5381": [
[0, 0, 0, "\'HorizontalGroup\' import from \'@grafana/ui/src\' is restricted from being used by a pattern. Use Stack component instead.", "0"]
],
"public/app/features/admin/UserOrgs.tsx:5381": [ "public/app/features/admin/UserOrgs.tsx:5381": [
[0, 0, 0, "\'HorizontalGroup\' import from \'@grafana/ui\' is restricted from being used by a pattern. Use Stack component instead.", "0"], [0, 0, 0, "Styles should be written using objects.", "0"],
[0, 0, 0, "Styles should be written using objects.", "1"], [0, 0, 0, "Styles should be written using objects.", "1"],
[0, 0, 0, "Styles should be written using objects.", "2"], [0, 0, 0, "Styles should be written using objects.", "2"],
[0, 0, 0, "Styles should be written using objects.", "3"], [0, 0, 0, "Styles should be written using objects.", "3"],
@@ -1379,8 +1376,7 @@ exports[`better eslint`] = {
[0, 0, 0, "Styles should be written using objects.", "13"], [0, 0, 0, "Styles should be written using objects.", "13"],
[0, 0, 0, "Styles should be written using objects.", "14"], [0, 0, 0, "Styles should be written using objects.", "14"],
[0, 0, 0, "Styles should be written using objects.", "15"], [0, 0, 0, "Styles should be written using objects.", "15"],
[0, 0, 0, "Styles should be written using objects.", "16"], [0, 0, 0, "Styles should be written using objects.", "16"]
[0, 0, 0, "Styles should be written using objects.", "17"]
], ],
"public/app/features/admin/UserPermissions.tsx:5381": [ "public/app/features/admin/UserPermissions.tsx:5381": [
[0, 0, 0, "Styles should be written using objects.", "0"] [0, 0, 0, "Styles should be written using objects.", "0"]
@@ -2256,9 +2252,8 @@ exports[`better eslint`] = {
[0, 0, 0, "Unexpected any. Specify a different type.", "2"] [0, 0, 0, "Unexpected any. Specify a different type.", "2"]
], ],
"public/app/features/api-keys/ApiKeysTable.tsx:5381": [ "public/app/features/api-keys/ApiKeysTable.tsx:5381": [
[0, 0, 0, "\'HorizontalGroup\' import from \'@grafana/ui\' is restricted from being used by a pattern. Use Stack component instead.", "0"], [0, 0, 0, "Styles should be written using objects.", "0"],
[0, 0, 0, "Styles should be written using objects.", "1"], [0, 0, 0, "Styles should be written using objects.", "1"]
[0, 0, 0, "Styles should be written using objects.", "2"]
], ],
"public/app/features/api-keys/MigrateToServiceAccountsCard.tsx:5381": [ "public/app/features/api-keys/MigrateToServiceAccountsCard.tsx:5381": [
[0, 0, 0, "Styles should be written using objects.", "0"], [0, 0, 0, "Styles should be written using objects.", "0"],
@@ -4043,9 +4038,6 @@ exports[`better eslint`] = {
"public/app/features/search/utils.ts:5381": [ "public/app/features/search/utils.ts:5381": [
[0, 0, 0, "Do not use any type assertions.", "0"] [0, 0, 0, "Do not use any type assertions.", "0"]
], ],
"public/app/features/serviceaccounts/ServiceAccountPage.tsx:5381": [
[0, 0, 0, "\'HorizontalGroup\' import from \'@grafana/ui\' is restricted from being used by a pattern. Use Stack component instead.", "0"]
],
"public/app/features/serviceaccounts/components/ServiceAccountProfile.tsx:5381": [ "public/app/features/serviceaccounts/components/ServiceAccountProfile.tsx:5381": [
[0, 0, 0, "Styles should be written using objects.", "0"] [0, 0, 0, "Styles should be written using objects.", "0"]
], ],

View File

@@ -1,7 +1,7 @@
import React from 'react'; import React from 'react';
import { selectors as e2eSelectors } from '@grafana/e2e-selectors/src'; import { selectors as e2eSelectors } from '@grafana/e2e-selectors/src';
import { HorizontalGroup, Icon, Tag, Tooltip } from '@grafana/ui/src'; import { Icon, Stack, Tag, Tooltip } from '@grafana/ui/src';
import { Page } from 'app/core/components/Page/Page'; import { Page } from 'app/core/components/Page/Page';
import { Trans, t } from 'app/core/internationalization'; import { Trans, t } from 'app/core/internationalization';
@@ -60,10 +60,10 @@ export const UserListPublicDashboardPage = () => {
<td className="max-width-10">{user.firstSeenAtAge}</td> <td className="max-width-10">{user.firstSeenAtAge}</td>
<td className="max-width-10">{user.lastSeenAtAge}</td> <td className="max-width-10">{user.lastSeenAtAge}</td>
<td className="max-width-10"> <td className="max-width-10">
<HorizontalGroup spacing="sm"> <Stack gap={2}>
<span>{user.totalDashboards} dashboard(s)</span> <span>{user.totalDashboards} dashboard(s)</span>
<DashboardsListModalButton email={user.email} /> <DashboardsListModalButton email={user.email} />
</HorizontalGroup> </Stack>
</td> </td>
<td className="max-width-10"> <td className="max-width-10">
<Tag name="Viewer" colorIndex={19} /> <Tag name="Viewer" colorIndex={19} />

View File

@@ -6,7 +6,6 @@ import {
Button, Button,
ConfirmButton, ConfirmButton,
Field, Field,
HorizontalGroup,
Icon, Icon,
Modal, Modal,
stylesFactory, stylesFactory,
@@ -386,14 +385,14 @@ export class AddToOrgModal extends PureComponent<AddToOrgModalProps, AddToOrgMod
/> />
</Field> </Field>
<Modal.ButtonRow> <Modal.ButtonRow>
<HorizontalGroup spacing="md" justify="center"> <Stack gap={2} justifyContent="center">
<Button variant="secondary" fill="outline" onClick={this.onCancel}> <Button variant="secondary" fill="outline" onClick={this.onCancel}>
Cancel Cancel
</Button> </Button>
<Button variant="primary" disabled={selectedOrg === null} onClick={this.onAddUserToOrg}> <Button variant="primary" disabled={selectedOrg === null} onClick={this.onAddUserToOrg}>
Add to organization Add to organization
</Button> </Button>
</HorizontalGroup> </Stack>
</Modal.ButtonRow> </Modal.ButtonRow>
</Modal> </Modal>
); );

View File

@@ -2,7 +2,7 @@ import { css } from '@emotion/css';
import React from 'react'; import React from 'react';
import { dateTimeFormat, GrafanaTheme2, TimeZone } from '@grafana/data'; import { dateTimeFormat, GrafanaTheme2, TimeZone } from '@grafana/data';
import { Button, DeleteButton, HorizontalGroup, Icon, Tooltip, useTheme2 } from '@grafana/ui'; import { Button, DeleteButton, Icon, Stack, Tooltip, useTheme2 } from '@grafana/ui';
import { contextSrv } from 'app/core/core'; import { contextSrv } from 'app/core/core';
import { AccessControlAction } from 'app/types'; import { AccessControlAction } from 'app/types';
@@ -50,7 +50,7 @@ export const ApiKeysTable = ({ apiKeys, timeZone, onDelete, onMigrate }: Props)
</td> </td>
<td>{formatLastUsedAtDate(timeZone, key.lastUsedAt)}</td> <td>{formatLastUsedAtDate(timeZone, key.lastUsedAt)}</td>
<td> <td>
<HorizontalGroup justify="flex-end"> <Stack justifyContent="flex-end">
<Button size="sm" onClick={() => onMigrate(key)}> <Button size="sm" onClick={() => onMigrate(key)}>
Migrate to service account Migrate to service account
</Button> </Button>
@@ -60,7 +60,7 @@ export const ApiKeysTable = ({ apiKeys, timeZone, onDelete, onMigrate }: Props)
onConfirm={() => onDelete(key)} onConfirm={() => onDelete(key)}
disabled={!contextSrv.hasPermissionInMetadata(AccessControlAction.ActionAPIKeysDelete, key)} disabled={!contextSrv.hasPermissionInMetadata(AccessControlAction.ActionAPIKeysDelete, key)}
/> />
</HorizontalGroup> </Stack>
</td> </td>
</tr> </tr>
); );

View File

@@ -2,7 +2,7 @@ import React, { useEffect, useState } from 'react';
import { connect, ConnectedProps } from 'react-redux'; import { connect, ConnectedProps } from 'react-redux';
import { getTimeZone, NavModelItem } from '@grafana/data'; import { getTimeZone, NavModelItem } from '@grafana/data';
import { Button, ConfirmModal, HorizontalGroup, IconButton } from '@grafana/ui'; import { Button, ConfirmModal, IconButton, Stack } from '@grafana/ui';
import { Page } from 'app/core/components/Page/Page'; import { Page } from 'app/core/components/Page/Page';
import { contextSrv } from 'app/core/core'; import { contextSrv } from 'app/core/core';
import { GrafanaRouteComponentProps } from 'app/core/navigation/types'; import { GrafanaRouteComponentProps } from 'app/core/navigation/types';
@@ -137,7 +137,7 @@ export const ServiceAccountPageUnconnected = ({
<Page.Contents isLoading={isLoading}> <Page.Contents isLoading={isLoading}>
<div> <div>
{serviceAccount && !serviceAccount.isExternal && ( {serviceAccount && !serviceAccount.isExternal && (
<HorizontalGroup spacing="md" height="auto" justify="flex-end"> <Stack gap={2} height="auto" justifyContent="flex-end">
<Button <Button
type={'button'} type={'button'}
variant="destructive" variant="destructive"
@@ -165,29 +165,29 @@ export const ServiceAccountPageUnconnected = ({
Disable service account Disable service account
</Button> </Button>
)} )}
</HorizontalGroup> </Stack>
)} )}
{serviceAccount && serviceAccount.isExternal && ( {serviceAccount && serviceAccount.isExternal && (
<HorizontalGroup spacing="md" height="auto" justify="flex-end"> <Stack gap={2} height="auto" justifyContent="flex-end">
<IconButton <IconButton
disabled={true} disabled={true}
name="lock" name="lock"
size="md" size="md"
tooltip={`This is a managed service account and cannot be modified.`} tooltip={`This is a managed service account and cannot be modified.`}
/> />
</HorizontalGroup> </Stack>
)} )}
{serviceAccount && ( {serviceAccount && (
<ServiceAccountProfile serviceAccount={serviceAccount} timeZone={timezone} onChange={onProfileChange} /> <ServiceAccountProfile serviceAccount={serviceAccount} timeZone={timezone} onChange={onProfileChange} />
)} )}
<HorizontalGroup justify="space-between" height="auto"> <Stack justifyContent="space-between" height="auto">
<h3>Tokens</h3> <h3>Tokens</h3>
{!serviceAccount.isExternal && ( {!serviceAccount.isExternal && (
<Button onClick={() => setIsTokenModalOpen(true)} disabled={tokenActionsDisabled}> <Button onClick={() => setIsTokenModalOpen(true)} disabled={tokenActionsDisabled}>
Add service account token Add service account token
</Button> </Button>
)} )}
</HorizontalGroup> </Stack>
{tokens && ( {tokens && (
<ServiceAccountTokensTable <ServiceAccountTokensTable
tokens={tokens} tokens={tokens}