grafana/ui: Rename Flex component to Stack (#77453)

* grafana/ui: Remove Stack and rename FLex to Stack

* Update types

* Update grafana/ui imports

* Update Grafana imports

* Update docs

public/app/core/components/AppChrome/DockedMegaMenu/MegaMenu.tsx

@@ -6,7 +6,7 @@ import { useLocation } from 'react-router-dom';
 import { GrafanaTheme2 } from '@grafana/data';
 import { selectors } from '@grafana/e2e-selectors';
 import { CustomScrollbar, Icon, IconButton, useStyles2 } from '@grafana/ui';
-import { Flex } from '@grafana/ui/src/unstable';
+import { Stack } from '@grafana/ui/src/unstable';
 import { useGrafana } from 'app/core/context/GrafanaContext';
 import { t } from 'app/core/internationalization';
 import { useSelector } from 'app/types';
@@ -55,7 +55,7 @@ export const MegaMenu = React.memo(
           <CustomScrollbar showScrollIndicators hideHorizontalTrack>
             <ul className={styles.itemList}>
               {navItems.map((link, index) => (
-                <Flex key={link.text} direction="row" alignItems="center">
+                <Stack key={link.text} direction="row" alignItems="center">
                   <MegaMenuItem
                     link={link}
                     onClick={state.megaMenu === 'open' ? onClose : undefined}
@@ -74,7 +74,7 @@ export const MegaMenu = React.memo(
                       variant="secondary"
                     />
                   )}
-                </Flex>
+                </Stack>
               ))}
             </ul>
           </CustomScrollbar>

public/app/features/admin/Users/OrgUnits.tsx

@@ -2,7 +2,7 @@ import React, { forwardRef, PropsWithChildren } from 'react';
 
 import { IconName } from '@grafana/data';
 import { Icon, Tooltip, Box } from '@grafana/ui';
-import { Flex } from '@grafana/ui/src/unstable';
+import { Stack } from '@grafana/ui/src/unstable';
 import { Unit } from 'app/types';
 
 type OrgUnitProps = { units?: Unit[]; icon: IconName };
@@ -15,7 +15,7 @@ export const OrgUnits = ({ units, icon }: OrgUnitProps) => {
   return units.length > 1 ? (
     <Tooltip
       placement={'top'}
-      content={<Flex direction={'column'}>{units?.map((unit) => <span key={unit.name}>{unit.name}</span>)}</Flex>}
+      content={<Stack direction={'column'}>{units?.map((unit) => <span key={unit.name}>{unit.name}</span>)}</Stack>}
     >
       <Content icon={icon}>{units.length}</Content>
     </Tooltip>

public/app/features/admin/Users/OrgUsersTable.tsx

@@ -16,7 +16,7 @@ import {
   Avatar,
   Box,
 } from '@grafana/ui';
-import { Flex, Stack } from '@grafana/ui/src/unstable';
+import { Stack } from '@grafana/ui/src/unstable';
 import { UserRolePicker } from 'app/core/components/RolePicker/UserRolePicker';
 import { fetchRoleOptions } from 'app/core/components/RolePicker/api';
 import { TagBadge } from 'app/core/components/TagFilter/TagBadge';
@@ -223,9 +223,9 @@ export const OrgUsersTable = ({
           getRowId={(user) => String(user.userId)}
           fetchData={fetchData}
         />
-        <Flex justifyContent="flex-end">
+        <Stack justifyContent="flex-end">
           <Pagination onNavigate={changePage} currentPage={page} numberOfPages={totalPages} hideWhenSinglePage={true} />
-        </Flex>
+        </Stack>
       </TableWrapper>
       {Boolean(userToRemove) && (
         <ConfirmModal

public/app/features/admin/Users/UsersTable.tsx

@@ -12,7 +12,7 @@ import {
   Text,
   Avatar,
 } from '@grafana/ui';
-import { Flex, Stack } from '@grafana/ui/src/unstable';
+import { Stack } from '@grafana/ui/src/unstable';
 import { TagBadge } from 'app/core/components/TagFilter/TagBadge';
 import { UserDTO } from 'app/types';
 
@@ -68,14 +68,14 @@ export const UsersTable = ({
         header: 'Belongs to',
         cell: ({ cell: { value, row } }: Cell<'orgs'>) => {
           return (
-            <Flex alignItems={'center'}>
+            <Stack alignItems={'center'}>
               <OrgUnits units={value} icon={'building'} />
               {row.original.isAdmin && (
                 <Tooltip placement="top" content="Grafana Admin">
                   <Icon name="shield" />
                 </Tooltip>
               )}
-            </Flex>
+            </Stack>
           );
         },
         sortType: (a, b) => (a.original.orgs?.length || 0) - (b.original.orgs?.length || 0),
@@ -146,9 +146,9 @@ export const UsersTable = ({
     <Stack gap={2}>
       <InteractiveTable columns={columns} data={users} getRowId={(user) => String(user.id)} fetchData={fetchData} />
       {showPaging && (
-        <Flex justifyContent={'flex-end'}>
+        <Stack justifyContent={'flex-end'}>
           <Pagination numberOfPages={totalPages} currentPage={currentPage} onNavigate={onChangePage} />
-        </Flex>
+        </Stack>
       )}
     </Stack>
   );

public/app/features/dashboard/dashgrid/DashboardEmpty.tsx

@@ -5,7 +5,7 @@ import { GrafanaTheme2 } from '@grafana/data';
 import { selectors } from '@grafana/e2e-selectors';
 import { config, locationService, reportInteraction } from '@grafana/runtime';
 import { Button, useStyles2, Text, Box } from '@grafana/ui';
-import { Flex } from '@grafana/ui/src/unstable';
+import { Stack } from '@grafana/ui/src/unstable';
 import { Trans } from 'app/core/internationalization';
 import { DashboardModel } from 'app/features/dashboard/state';
 import { onAddLibraryPanel, onCreateNewPanel, onImportDashboard } from 'app/features/dashboard/utils/dashboard';
@@ -24,11 +24,11 @@ const DashboardEmpty = ({ dashboard, canCreate }: Props) => {
   const initialDatasource = useSelector((state) => state.dashboard.initialDatasource);
 
   return (
-    <Flex alignItems="center" justifyContent="center">
+    <Stack alignItems="center" justifyContent="center">
       <div className={styles.wrapper}>
-        <Flex alignItems="stretch" justifyContent="center" gap={4} direction="column">
+        <Stack alignItems="stretch" justifyContent="center" gap={4} direction="column">
           <Box borderColor="strong" borderStyle="dashed" padding={4}>
-            <Flex direction="column" alignItems="center" gap={2}>
+            <Stack direction="column" alignItems="center" gap={2}>
               <Text element="h1" textAlignment="center" weight="medium">
                 <Trans i18nKey="dashboard.empty.add-visualization-header">
                   Start your new dashboard by adding a visualization
@@ -56,12 +56,12 @@ const DashboardEmpty = ({ dashboard, canCreate }: Props) => {
               >
                 <Trans i18nKey="dashboard.empty.add-visualization-button">Add visualization</Trans>
               </Button>
-            </Flex>
+            </Stack>
           </Box>
-          <Flex direction={{ xs: 'column', md: 'row' }} wrap="wrap" gap={4}>
+          <Stack direction={{ xs: 'column', md: 'row' }} wrap="wrap" gap={4}>
             {config.featureToggles.vizAndWidgetSplit && (
               <Box borderColor="strong" borderStyle="dashed" padding={3} grow={1}>
-                <Flex direction="column" alignItems="center" gap={1}>
+                <Stack direction="column" alignItems="center" gap={1}>
                   <Text element="h3" textAlignment="center" weight="medium">
                     <Trans i18nKey="dashboard.empty.add-widget-header">Add a widget</Trans>
                   </Text>
@@ -82,11 +82,11 @@ const DashboardEmpty = ({ dashboard, canCreate }: Props) => {
                   >
                     <Trans i18nKey="dashboard.empty.add-widget-button">Add widget</Trans>
                   </Button>
-                </Flex>
+                </Stack>
               </Box>
             )}
             <Box borderColor="strong" borderStyle="dashed" padding={3} grow={1}>
-              <Flex direction="column" alignItems="center" gap={1}>
+              <Stack direction="column" alignItems="center" gap={1}>
                 <Text element="h3" textAlignment="center" weight="medium">
                   <Trans i18nKey="dashboard.empty.add-library-panel-header">Import panel</Trans>
                 </Text>
@@ -109,10 +109,10 @@ const DashboardEmpty = ({ dashboard, canCreate }: Props) => {
                 >
                   <Trans i18nKey="dashboard.empty.add-library-panel-button">Add library panel</Trans>
                 </Button>
-              </Flex>
+              </Stack>
             </Box>
             <Box borderColor="strong" borderStyle="dashed" padding={3} grow={1}>
-              <Flex direction="column" alignItems="center" gap={1}>
+              <Stack direction="column" alignItems="center" gap={1}>
                 <Text element="h3" textAlignment="center" weight="medium">
                   <Trans i18nKey="dashboard.empty.import-a-dashboard-header">Import a dashboard</Trans>
                 </Text>
@@ -136,12 +136,12 @@ const DashboardEmpty = ({ dashboard, canCreate }: Props) => {
                 >
                   <Trans i18nKey="dashboard.empty.import-dashboard-button">Import dashboard</Trans>
                 </Button>
-              </Flex>
+              </Stack>
             </Box>
-          </Flex>
-        </Flex>
+          </Stack>
+        </Stack>
       </div>
-    </Flex>
+    </Stack>
   );
 };
 

public/app/features/serviceaccounts/ServiceAccountsListPage.tsx

@@ -13,7 +13,7 @@ import {
   InlineField,
   Pagination,
 } from '@grafana/ui';
-import { Flex } from '@grafana/ui/src/unstable';
+import { Stack } from '@grafana/ui/src/unstable';
 import EmptyListCTA from 'app/core/components/EmptyListCTA/EmptyListCTA';
 import { Page } from 'app/core/components/Page/Page';
 import PageLoader from 'app/core/components/PageLoader/PageLoader';
@@ -253,9 +253,9 @@ export const ServiceAccountsListPageUnconnected = ({
                 </tbody>
               </table>
 
-              <Flex justifyContent="flex-end">
+              <Stack justifyContent="flex-end">
                 <Pagination hideWhenSinglePage currentPage={page} numberOfPages={totalPages} onNavigate={changePage} />
-              </Flex>
+              </Stack>
             </div>
           </>
         )}

public/app/features/teams/TeamList.tsx

@@ -14,7 +14,7 @@ import {
   Pagination,
   Avatar,
 } from '@grafana/ui';
-import { Stack, Flex } from '@grafana/ui/src/unstable';
+import { Stack } from '@grafana/ui/src/unstable';
 import EmptyListCTA from 'app/core/components/EmptyListCTA/EmptyListCTA';
 import { Page } from 'app/core/components/Page/Page';
 import { fetchRoleOptions } from 'app/core/components/RolePicker/api';
@@ -169,14 +169,14 @@ export const TeamList = ({
                   getRowId={(team) => String(team.id)}
                   fetchData={changeSort}
                 />
-                <Flex justifyContent="flex-end">
+                <Stack justifyContent="flex-end">
                   <Pagination
                     hideWhenSinglePage
                     currentPage={page}
                     numberOfPages={totalPages}
                     onNavigate={changePage}
                   />
-                </Flex>
+                </Stack>
               </TableWrapper>
             </Stack>
           </>