Chore: Remove deprecated layout components from Plugins Platform (#88523)

* Chore: Remove deprecated layout components from Plugins Platform

Resolves #86878

* Chore: Use `Box` instead of `div`

.betterer.results

@@ -4880,17 +4880,13 @@ exports[`better eslint`] = {
       [0, 0, 0, "Styles should be written using objects.", "0"]
     ],
     "public/app/features/plugins/admin/components/InstallControls/ExternallyManagedButton.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, "No untranslated strings. Wrap text with <Trans />", "0"],
       [0, 0, 0, "No untranslated strings. Wrap text with <Trans />", "1"],
       [0, 0, 0, "No untranslated strings. Wrap text with <Trans />", "2"],
-      [0, 0, 0, "No untranslated strings. Wrap text with <Trans />", "3"],
-      [0, 0, 0, "No untranslated strings. Wrap text with <Trans />", "4"]
-    ],
-    "public/app/features/plugins/admin/components/InstallControls/InstallControlsButton.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, "No untranslated strings. Wrap text with <Trans />", "3"]
     ],
     "public/app/features/plugins/admin/components/InstallControls/InstallControlsWarning.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, "No untranslated strings. Wrap text with <Trans />", "0"],
       [0, 0, 0, "No untranslated strings. Wrap text with <Trans />", "1"],
       [0, 0, 0, "No untranslated strings. Wrap text with <Trans />", "2"],
       [0, 0, 0, "No untranslated strings. Wrap text with <Trans />", "3"],
@@ -4900,18 +4896,15 @@ exports[`better eslint`] = {
       [0, 0, 0, "No untranslated strings. Wrap text with <Trans />", "7"],
       [0, 0, 0, "No untranslated strings. Wrap text with <Trans />", "8"],
       [0, 0, 0, "No untranslated strings. Wrap text with <Trans />", "9"],
-      [0, 0, 0, "No untranslated strings. Wrap text with <Trans />", "10"],
-      [0, 0, 0, "Styles should be written using objects.", "11"]
+      [0, 0, 0, "Styles should be written using objects.", "10"]
     ],
     "public/app/features/plugins/admin/components/InstallControls/index.tsx:5381": [
       [0, 0, 0, "Do not re-export imported variable (\`./InstallControlsWarning\`)", "0"],
       [0, 0, 0, "Do not re-export imported variable (\`./InstallControlsButton\`)", "1"]
     ],
     "public/app/features/plugins/admin/components/PluginActions.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, "\'VerticalGroup\' import from \'@grafana/ui\' is restricted from being used by a pattern. Use Stack component instead.", "1"],
-      [0, 0, 0, "No untranslated strings. Wrap text with <Trans />", "2"],
-      [0, 0, 0, "Styles should be written using objects.", "3"]
+      [0, 0, 0, "No untranslated strings. Wrap text with <Trans />", "0"],
+      [0, 0, 0, "Styles should be written using objects.", "1"]
     ],
     "public/app/features/plugins/admin/components/PluginDashboards.tsx:5381": [
       [0, 0, 0, "No untranslated strings. Wrap text with <Trans />", "0"],
@@ -4948,12 +4941,11 @@ exports[`better eslint`] = {
       [0, 0, 0, "Styles should be written using objects.", "1"]
     ],
     "public/app/features/plugins/admin/components/PluginDetailsPage.tsx:5381": [
-      [0, 0, 0, "\'Layout\' import from \'@grafana/ui/src/components/Layout/Layout\' is restricted from being used by a pattern. Use Stack component instead.", "0"],
-      [0, 0, 0, "Do not use any type assertions.", "1"],
+      [0, 0, 0, "Do not use any type assertions.", "0"],
+      [0, 0, 0, "No untranslated strings. Wrap text with <Trans />", "1"],
       [0, 0, 0, "No untranslated strings. Wrap text with <Trans />", "2"],
       [0, 0, 0, "No untranslated strings. Wrap text with <Trans />", "3"],
-      [0, 0, 0, "No untranslated strings. Wrap text with <Trans />", "4"],
-      [0, 0, 0, "No untranslated strings. Wrap text with <Trans />", "5"]
+      [0, 0, 0, "No untranslated strings. Wrap text with <Trans />", "4"]
     ],
     "public/app/features/plugins/admin/components/PluginDetailsSignature.tsx:5381": [
       [0, 0, 0, "No untranslated strings. Wrap text with <Trans />", "0"],
@@ -4962,9 +4954,6 @@ exports[`better eslint`] = {
     "public/app/features/plugins/admin/components/PluginListItem.tsx:5381": [
       [0, 0, 0, "No untranslated strings. Wrap text with <Trans />", "0"]
     ],
-    "public/app/features/plugins/admin/components/PluginListItemBadges.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/plugins/admin/components/PluginSignatureDetailsBadge.tsx:5381": [
       [0, 0, 0, "No untranslated strings. Wrap text with <Trans />", "0"],
       [0, 0, 0, "No untranslated strings. Wrap text with <Trans />", "1"],
@@ -5027,9 +5016,8 @@ exports[`better eslint`] = {
       [0, 0, 0, "No untranslated strings. Wrap text with <Trans />", "1"]
     ],
     "public/app/features/plugins/components/PluginsErrorsInfo.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, "No untranslated strings. Wrap text with <Trans />", "1"],
-      [0, 0, 0, "No untranslated strings. Wrap text with <Trans />", "2"]
+      [0, 0, 0, "No untranslated strings. Wrap text with <Trans />", "0"],
+      [0, 0, 0, "No untranslated strings. Wrap text with <Trans />", "1"]
     ],
     "public/app/features/plugins/datasource_srv.ts:5381": [
       [0, 0, 0, "Do not use any type assertions.", "0"],

public/app/features/plugins/admin/components/InstallControls/ExternallyManagedButton.tsx

@@ -1,5 +1,5 @@
 import { config } from '@grafana/runtime';
-import { HorizontalGroup, LinkButton } from '@grafana/ui';
+import { LinkButton, Stack } from '@grafana/ui';
 
 import { getExternalManageLink } from '../../helpers';
 import { PluginStatus } from '../../types';
@@ -15,14 +15,14 @@ export function ExternallyManagedButton({ pluginId, pluginStatus, angularDetecte
 
   if (pluginStatus === PluginStatus.UPDATE) {
     return (
-      <HorizontalGroup height="auto">
+      <Stack height="auto">
         <LinkButton href={externalManageLink} target="_blank" rel="noopener noreferrer">
           Update via grafana.com
         </LinkButton>
         <LinkButton variant="destructive" href={externalManageLink} target="_blank" rel="noopener noreferrer">
           Uninstall via grafana.com
         </LinkButton>
-      </HorizontalGroup>
+      </Stack>
     );
   }
 

public/app/features/plugins/admin/components/InstallControls/InstallControlsButton.tsx

@@ -3,7 +3,7 @@ import { useLocation } from 'react-router-dom';
 
 import { AppEvents } from '@grafana/data';
 import { config, locationService } from '@grafana/runtime';
-import { Button, HorizontalGroup, ConfirmModal } from '@grafana/ui';
+import { Button, ConfirmModal, Stack } from '@grafana/ui';
 import appEvents from 'app/core/app_events';
 import configCore from 'app/core/config';
 import { useQueryParams } from 'app/core/hooks/useQueryParams';
@@ -130,11 +130,11 @@ export function InstallControlsButton({
           onConfirm={onUninstall}
           onDismiss={hideConfirmModal}
         />
-        <HorizontalGroup align="flex-start" width="auto" height="auto">
+        <Stack alignItems="flex-start" width="auto" height="auto">
           <Button variant="destructive" disabled={disableUninstall} onClick={showConfirmModal}>
             {uninstallBtnText}
           </Button>
-        </HorizontalGroup>
+        </Stack>
       </>
     );
   }
@@ -151,14 +151,14 @@ export function InstallControlsButton({
         : isInstalling;
 
     return (
-      <HorizontalGroup align="flex-start" width="auto" height="auto">
+      <Stack alignItems="flex-start" width="auto" height="auto">
         <Button disabled={disableUpdate} onClick={onUpdate}>
           {isInstalling ? 'Updating' : 'Update'}
         </Button>
         <Button variant="destructive" disabled={isUninstalling} onClick={onUninstall}>
           {uninstallBtnText}
         </Button>
-      </HorizontalGroup>
+      </Stack>
     );
   }
   const shouldDisable = isInstalling || errorInstalling || (!config.angularSupportEnabled && plugin.angularDetected);

public/app/features/plugins/admin/components/InstallControls/InstallControlsWarning.tsx

@@ -2,7 +2,7 @@ import { css } from '@emotion/css';
 
 import { GrafanaTheme2, PluginType } from '@grafana/data';
 import { config, featureEnabled } from '@grafana/runtime';
-import { HorizontalGroup, Icon, LinkButton, useStyles2 } from '@grafana/ui';
+import { Icon, LinkButton, Stack, useStyles2 } from '@grafana/ui';
 import { contextSrv } from 'app/core/core';
 import { AccessControlAction } from 'app/types';
 
@@ -33,7 +33,7 @@ export const InstallControlsWarning = ({ plugin, pluginStatus, latestCompatibleV
 
   if (plugin.isEnterprise && !featureEnabled('enterprise.plugins')) {
     return (
-      <HorizontalGroup height="auto" align="center">
+      <Stack height="auto" alignItems="center">
         <span className={styles.message}>No valid Grafana Enterprise license detected.</span>
         <LinkButton
           href={`${getExternalManageLink(plugin.id)}?utm_source=grafana_catalog_learn_more`}
@@ -45,7 +45,7 @@ export const InstallControlsWarning = ({ plugin, pluginStatus, latestCompatibleV
         >
           Learn more
         </LinkButton>
-      </HorizontalGroup>
+      </Stack>
     );
   }
 

public/app/features/plugins/admin/components/PluginActions.tsx

@@ -3,7 +3,7 @@ import { useState } from 'react';
 
 import { GrafanaTheme2 } from '@grafana/data';
 import { config } from '@grafana/runtime';
-import { HorizontalGroup, Icon, useStyles2, VerticalGroup } from '@grafana/ui';
+import { Icon, Stack, useStyles2 } from '@grafana/ui';
 import configCore from 'app/core/config';
 
 import { GetStartedWithPlugin } from '../components/GetStartedWithPlugin';
@@ -37,8 +37,8 @@ export const PluginActions = ({ plugin }: Props) => {
   const isInstallControlsDisabled = plugin.isCore || plugin.isDisabled || !isInstallControlsEnabled();
 
   return (
-    <VerticalGroup>
-      <HorizontalGroup>
+    <Stack direction="column">
+      <Stack alignItems="center">
         {!isInstallControlsDisabled && (
           <>
             {isExternallyManaged && !hasInstallWarning && !configCore.featureToggles.managedPluginsInstall ? (
@@ -59,14 +59,14 @@ export const PluginActions = ({ plugin }: Props) => {
           </>
         )}
         <GetStartedWithPlugin plugin={plugin} />
-      </HorizontalGroup>
+      </Stack>
       {needReload && (
-        <HorizontalGroup>
+        <Stack alignItems="center">
           <Icon name="exclamation-triangle" />
           <span className={styles.message}>Refresh the page to see the changes</span>
-        </HorizontalGroup>
+        </Stack>
       )}
-    </VerticalGroup>
+    </Stack>
   );
 };
 

public/app/features/plugins/admin/components/PluginDetailsPage.tsx

@@ -4,8 +4,7 @@ import { useLocation } from 'react-router-dom';
 
 import { GrafanaTheme2, NavModelItem } from '@grafana/data';
 import { config } from '@grafana/runtime';
-import { useStyles2, TabContent, Alert } from '@grafana/ui';
-import { Layout } from '@grafana/ui/src/components/Layout/Layout';
+import { Alert, Box, Stack, TabContent, useStyles2 } from '@grafana/ui';
 import { Page } from 'app/core/components/Page/Page';
 import { AppNotificationSeverity } from 'app/types';
 
@@ -122,11 +121,13 @@ export const getStyles = (theme: GrafanaTheme2) => {
 
 function NotFoundPlugin() {
   return (
-    <Layout justify="center" align="center">
-      <Alert severity={AppNotificationSeverity.Warning} title="Plugin not found">
-        That plugin cannot be found. Please check the url is correct or <br />
-        go to the <a href="/plugins">plugin catalog</a>.
-      </Alert>
-    </Layout>
+    <Stack justifyContent="center" alignItems="center" height="100%">
+      <Box>
+        <Alert severity={AppNotificationSeverity.Warning} title="Plugin not found">
+          That plugin cannot be found. Please check the url is correct or <br />
+          go to the <a href="/plugins">plugin catalog</a>.
+        </Alert>
+      </Box>
+    </Stack>
   );
 }

public/app/features/plugins/admin/components/PluginListItemBadges.tsx

@@ -1,5 +1,5 @@
 import { PluginType } from '@grafana/data';
-import { HorizontalGroup, PluginSignatureBadge } from '@grafana/ui';
+import { PluginSignatureBadge, Stack } from '@grafana/ui';
 
 import { CatalogPlugin } from '../types';
 
@@ -21,23 +21,23 @@ export function PluginListItemBadges({ plugin }: PluginBadgeType) {
   const hasUpdate = plugin.hasUpdate && !plugin.isCore && plugin.type !== PluginType.renderer;
   if (plugin.isEnterprise) {
     return (
-      <HorizontalGroup height="auto" wrap>
+      <Stack height="auto" wrap="wrap">
         <PluginEnterpriseBadge plugin={plugin} />
         {plugin.isDisabled && <PluginDisabledBadge error={plugin.error} />}
         {hasUpdate && <PluginUpdateAvailableBadge plugin={plugin} />}
         {plugin.angularDetected && <PluginAngularBadge />}
-      </HorizontalGroup>
+      </Stack>
     );
   }
 
   return (
-    <HorizontalGroup height="auto" wrap>
+    <Stack height="auto" wrap="wrap">
       <PluginSignatureBadge status={plugin.signature} />
       {plugin.isDisabled && <PluginDisabledBadge error={plugin.error} />}
       {plugin.isDeprecated && <PluginDeprecatedBadge />}
       {plugin.isInstalled && <PluginInstalledBadge />}
       {hasUpdate && <PluginUpdateAvailableBadge plugin={plugin} />}
       {plugin.angularDetected && <PluginAngularBadge />}
-    </HorizontalGroup>
+    </Stack>
   );
 }

public/app/features/plugins/components/PluginsErrorsInfo.tsx

@@ -2,7 +2,7 @@ import { css } from '@emotion/css';
 
 import { GrafanaTheme2, PluginErrorCode, PluginSignatureStatus, PluginType } from '@grafana/data';
 import { selectors } from '@grafana/e2e-selectors';
-import { Alert, HorizontalGroup, Icon, List, PluginSignatureBadge, useStyles2 } from '@grafana/ui';
+import { Alert, Icon, List, PluginSignatureBadge, Stack, useStyles2 } from '@grafana/ui';
 
 import { useGetErrors, useFetchStatus } from '../admin/state/hooks';
 
@@ -31,13 +31,13 @@ export function PluginsErrorsInfo({ filterByPluginType }: PluginsErrorInfoProps)
         className={styles.list}
         renderItem={(error) => (
           <div className={styles.wrapper}>
-            <HorizontalGroup spacing="sm" justify="flex-start" align="center">
+            <Stack justifyContent="flex-start" alignItems="center">
               <strong>{error.pluginId}</strong>
               <PluginSignatureBadge
                 status={mapPluginErrorCodeToSignatureStatus(error.errorCode)}
                 className={styles.badge}
               />
-            </HorizontalGroup>
+            </Stack>
           </div>
         )}
       />