Stack: Use the component from grafana/ui (grafana#77543)

* grafana/ui: Move Stack out of unstable

* grafana/ui: Replace imports

* Replace the import from experimental

* Cleanup

* Remove invalid prop

* Add flexGrow

* Remove Stack used in Field

* Remove import

Author: Clarity-89

packages/grafana-ui/src/components/Layout/Stack/Stack.tsx

@@ -1,5 +1,5 @@
 import { css } from '@emotion/css';
-import React from 'react';
+import React, { CSSProperties } from 'react';
 
 import { GrafanaTheme2, ThemeSpacingTokens } from '@grafana/data';
 
@@ -40,11 +40,12 @@ interface StackProps extends Omit<React.HTMLAttributes<HTMLElement>, 'className'
   direction?: ResponsiveProp<Direction>;
   wrap?: ResponsiveProp<Wrap>;
   children?: React.ReactNode;
+  flexGrow?: ResponsiveProp<CSSProperties['flexGrow']>;
 }
 
 export const Stack = React.forwardRef<HTMLDivElement, StackProps>(
-  ({ gap = 1, alignItems, justifyContent, direction, wrap, children, ...rest }, ref) => {
-    const styles = useStyles2(getStyles, gap, alignItems, justifyContent, direction, wrap);
+  ({ gap = 1, alignItems, justifyContent, direction, wrap, children, flexGrow, ...rest }, ref) => {
+    const styles = useStyles2(getStyles, gap, alignItems, justifyContent, direction, wrap, flexGrow);
 
     return (
       <div ref={ref} className={styles.flex} {...rest}>
@@ -62,28 +63,32 @@ const getStyles = (
   alignItems: StackProps['alignItems'],
   justifyContent: StackProps['justifyContent'],
   direction: StackProps['direction'],
-  wrap: StackProps['wrap']
+  wrap: StackProps['wrap'],
+  flexGrow: StackProps['flexGrow']
 ) => {
   return {
     flex: css([
       {
         display: 'flex',
       },
-      getResponsiveStyle<Direction>(theme, direction, (val) => ({
+      getResponsiveStyle(theme, direction, (val) => ({
         flexDirection: val,
       })),
-      getResponsiveStyle<Wrap>(theme, wrap, (val) => ({
+      getResponsiveStyle(theme, wrap, (val) => ({
         flexWrap: val,
       })),
-      getResponsiveStyle<AlignItems>(theme, alignItems, (val) => ({
+      getResponsiveStyle(theme, alignItems, (val) => ({
         alignItems: val,
       })),
-      getResponsiveStyle<JustifyContent>(theme, justifyContent, (val) => ({
+      getResponsiveStyle(theme, justifyContent, (val) => ({
         justifyContent: val,
       })),
-      getResponsiveStyle<ThemeSpacingTokens>(theme, gap, (val) => ({
+      getResponsiveStyle(theme, gap, (val) => ({
         gap: theme.spacing(val),
       })),
+      getResponsiveStyle(theme, flexGrow, (val) => ({
+        flexGrow: val,
+      })),
     ]),
   };
 };

public/app/core/components/AccessControl/AddPermission.tsx

@@ -1,7 +1,6 @@
 import React, { useEffect, useMemo, useState } from 'react';
 
-import { Stack } from '@grafana/experimental';
-import { Button, Form, Select } from '@grafana/ui';
+import { Button, Form, Select, Stack } from '@grafana/ui';
 import { CloseButton } from 'app/core/components/CloseButton/CloseButton';
 import { ServiceAccountPicker } from 'app/core/components/Select/ServiceAccountPicker';
 import { TeamPicker } from 'app/core/components/Select/TeamPicker';

public/app/core/components/QueryOperationRow/QueryOperationRowHeader.tsx

@@ -3,8 +3,7 @@ import React, { MouseEventHandler } from 'react';
 import { DraggableProvided } from 'react-beautiful-dnd';
 
 import { GrafanaTheme2 } from '@grafana/data';
-import { Stack } from '@grafana/experimental';
-import { Icon, IconButton, useStyles2 } from '@grafana/ui';
+import { Icon, IconButton, useStyles2, Stack } from '@grafana/ui';
 
 export interface QueryOperationRowHeaderProps {
   actionsElement?: React.ReactNode;
@@ -73,7 +72,7 @@ export const QueryOperationRowHeader = ({
         {headerElement}
       </div>
 
-      <Stack gap={1} alignItems="center" wrap={false}>
+      <Stack gap={1} alignItems="center">
         {actionsElement}
         {draggable && (
           <div onMouseMove={reportDragMousePosition} {...dragHandleProps}>

public/app/features/alerting/unified/AlertsFolderView.tsx

@@ -4,8 +4,7 @@ import React, { useEffect, useState } from 'react';
 import { useDebounce } from 'react-use';
 
 import { GrafanaTheme2, SelectableValue } from '@grafana/data';
-import { Stack } from '@grafana/experimental';
-import { Card, FilterInput, Icon, Pagination, Select, TagList, useStyles2 } from '@grafana/ui';
+import { Card, FilterInput, Icon, Pagination, Select, TagList, useStyles2, Stack } from '@grafana/ui';
 import { DEFAULT_PER_PAGE_PAGINATION } from 'app/core/constants';
 import { getQueryParamValue } from 'app/core/utils/query';
 import { FolderState, useDispatch } from 'app/types';

public/app/features/alerting/unified/GrafanaRuleQueryViewer.tsx

@@ -4,9 +4,8 @@ import { keyBy, startCase } from 'lodash';
 import React from 'react';
 
 import { DataSourceInstanceSettings, GrafanaTheme2, PanelData, RelativeTimeRange } from '@grafana/data';
-import { Stack } from '@grafana/experimental';
 import { config } from '@grafana/runtime';
-import { Badge, useStyles2 } from '@grafana/ui';
+import { Badge, useStyles2, Stack } from '@grafana/ui';
 import { mapRelativeTimeRangeToOption } from '@grafana/ui/src/components/DateTimePickers/RelativeTimeRangePicker/utils';
 
 import { AlertQuery } from '../../../types/unified-alerting-dto';

public/app/features/alerting/unified/NotificationPolicies.tsx

@@ -4,8 +4,7 @@ import React, { useEffect, useMemo, useState } from 'react';
 import { useAsyncFn } from 'react-use';
 
 import { GrafanaTheme2, UrlQueryMap } from '@grafana/data';
-import { Stack } from '@grafana/experimental';
-import { Alert, LoadingPlaceholder, Tab, TabContent, TabsBar, useStyles2, withErrorBoundary } from '@grafana/ui';
+import { Alert, LoadingPlaceholder, Tab, TabContent, TabsBar, useStyles2, withErrorBoundary, Stack } from '@grafana/ui';
 import { useQueryParams } from 'app/core/hooks/useQueryParams';
 import { ObjectMatcher, Route, RouteWithID } from 'app/plugins/datasource/alertmanager/types';
 import { useDispatch } from 'app/types';

public/app/features/alerting/unified/RuleList.tsx

@@ -3,8 +3,7 @@ import React, { useCallback, useEffect, useMemo, useState } from 'react';
 import { useAsyncFn, useInterval } from 'react-use';
 
 import { GrafanaTheme2 } from '@grafana/data';
-import { Stack } from '@grafana/experimental';
-import { Button, useStyles2, withErrorBoundary } from '@grafana/ui';
+import { Button, useStyles2, withErrorBoundary, Stack } from '@grafana/ui';
 import { useQueryParams } from 'app/core/hooks/useQueryParams';
 import { useDispatch } from 'app/types';
 

public/app/features/alerting/unified/components/HoverCard.tsx

@@ -4,8 +4,7 @@ import classnames from 'classnames';
 import React, { ReactElement, ReactNode, useRef } from 'react';
 
 import { GrafanaTheme2 } from '@grafana/data';
-import { Stack } from '@grafana/experimental';
-import { Popover as GrafanaPopover, PopoverController, useStyles2 } from '@grafana/ui';
+import { Popover as GrafanaPopover, PopoverController, useStyles2, Stack } from '@grafana/ui';
 
 export interface HoverCardProps {
   children: ReactElement;

public/app/features/alerting/unified/components/Label.tsx

@@ -3,8 +3,7 @@ import React, { ReactNode } from 'react';
 import tinycolor2 from 'tinycolor2';
 
 import { GrafanaTheme2, IconName } from '@grafana/data';
-import { Stack } from '@grafana/experimental';
-import { Icon, useStyles2 } from '@grafana/ui';
+import { Icon, useStyles2, Stack } from '@grafana/ui';
 
 export type LabelSize = 'md' | 'sm';
 
@@ -22,7 +21,7 @@ const Label = ({ label, value, icon, color, size = 'md' }: Props) => {
 
   return (
     <div className={styles.wrapper} role="listitem">
-      <Stack direction="row" gap={0} alignItems="stretch" wrap={false}>
+      <Stack direction="row" gap={0} alignItems="stretch">
         <div className={styles.label}>
           <Stack direction="row" gap={0.5} alignItems="center">
             {icon && <Icon name={icon} />} {label ?? ''}

public/app/features/alerting/unified/components/MetaText.tsx

@@ -1,8 +1,7 @@
 import { css, cx } from '@emotion/css';
 import React, { ComponentProps, HTMLAttributes } from 'react';
 
-import { Stack } from '@grafana/experimental';
-import { Icon, IconName, useStyles2, Text } from '@grafana/ui';
+import { Icon, IconName, useStyles2, Text, Stack } from '@grafana/ui';
 
 interface Props extends HTMLAttributes<HTMLDivElement> {
   icon?: IconName;
@@ -22,7 +21,7 @@ const MetaText = ({ children, icon, color = 'secondary', ...rest }: Props) => {
       {...rest}
     >
       <Text variant="bodySmall" color={color}>
-        <Stack direction="row" alignItems="center" gap={0.5}>
+        <Stack direction="row" alignItems="center" gap={0.5} wrap={'wrap'}>
           {icon && <Icon size="sm" name={icon} />}
           {children}
         </Stack>

public/app/features/alerting/unified/components/MoreButton.tsx

@@ -1,7 +1,6 @@
 import React, { forwardRef, Ref } from 'react';
 
-import { Stack } from '@grafana/experimental';
-import { Button, ButtonProps, Icon } from '@grafana/ui';
+import { Button, ButtonProps, Icon, Stack } from '@grafana/ui';
 
 const MoreButton = forwardRef(function MoreButton(props: ButtonProps, ref: Ref<HTMLButtonElement>) {
   return (

public/app/features/alerting/unified/components/alert-groups/AlertGroup.tsx

@@ -2,8 +2,7 @@ import { css } from '@emotion/css';
 import React, { useState } from 'react';
 
 import { GrafanaTheme2 } from '@grafana/data';
-import { Stack } from '@grafana/experimental';
-import { useStyles2 } from '@grafana/ui';
+import { useStyles2, Stack } from '@grafana/ui';
 import { AlertmanagerGroup, AlertState } from 'app/plugins/datasource/alertmanager/types';
 
 import { AlertLabels } from '../AlertLabels';

public/app/features/alerting/unified/components/alert-groups/MatcherFilter.tsx

@@ -3,8 +3,7 @@ import { debounce } from 'lodash';
 import React, { FormEvent, useEffect, useMemo } from 'react';
 
 import { GrafanaTheme2 } from '@grafana/data';
-import { Stack } from '@grafana/experimental';
-import { Label, Tooltip, Input, Icon, useStyles2 } from '@grafana/ui';
+import { Label, Tooltip, Input, Icon, useStyles2, Stack } from '@grafana/ui';
 
 import { logInfo, LogMessages } from '../../Analytics';
 

public/app/features/alerting/unified/components/contact-points/ContactPoints.v2.tsx

@@ -7,7 +7,6 @@ import { Link } from 'react-router-dom';
 import { useToggle } from 'react-use';
 
 import { dateTime, GrafanaTheme2 } from '@grafana/data';
-import { Stack } from '@grafana/experimental';
 import {
   Alert,
   Dropdown,
@@ -23,6 +22,7 @@ import {
   Tab,
   Pagination,
   Button,
+  Stack,
 } from '@grafana/ui';
 import ConditionalWrap from 'app/features/alerting/components/ConditionalWrap';
 import { receiverTypeNames } from 'app/plugins/datasource/alertmanager/consts';

public/app/features/alerting/unified/components/expressions/Expression.tsx

@@ -3,8 +3,7 @@ import { uniqueId } from 'lodash';
 import React, { FC, useCallback, useState } from 'react';
 
 import { DataFrame, dateTimeFormat, GrafanaTheme2, isTimeSeriesFrames, LoadingState, PanelData } from '@grafana/data';
-import { Stack } from '@grafana/experimental';
-import { AutoSizeInput, Button, clearButtonStyles, IconButton, useStyles2 } from '@grafana/ui';
+import { AutoSizeInput, Button, clearButtonStyles, IconButton, useStyles2, Stack } from '@grafana/ui';
 import { ClassicConditions } from 'app/features/expressions/components/ClassicConditions';
 import { Math } from 'app/features/expressions/components/Math';
 import { Reduce } from 'app/features/expressions/components/Reduce';
@@ -288,7 +287,7 @@ const Header: FC<HeaderProps> = ({
   return (
     <header className={styles.header.wrapper}>
       <Stack direction="row" gap={0.5} alignItems="center">
-        <Stack direction="row" gap={1} alignItems="center" wrap={false}>
+        <Stack direction="row" gap={1} alignItems="center">
           {!editingRefId && (
             <button type="button" className={cx(clearButton, styles.editable)} onClick={() => setEditMode('refId')}>
               <div className={styles.expression.refId}>{refId}</div>

public/app/features/alerting/unified/components/mute-timings/MuteTimingTimeInterval.tsx

@@ -4,8 +4,7 @@ import React, { useEffect, useState } from 'react';
 import { useFieldArray, useFormContext } from 'react-hook-form';
 
 import { GrafanaTheme2 } from '@grafana/data';
-import { Stack } from '@grafana/experimental';
-import { Button, Field, FieldSet, Icon, Input, useStyles2 } from '@grafana/ui';
+import { Button, Field, FieldSet, Icon, Input, useStyles2, Stack } from '@grafana/ui';
 
 import { MuteTimingFields } from '../../types/mute-timing-form';
 import { DAYS_OF_THE_WEEK, defaultTimeInterval, MONTHS, validateArrayField } from '../../utils/mute-timings';

public/app/features/alerting/unified/components/mute-timings/MuteTimingsTable.tsx

@@ -2,8 +2,7 @@ import { css } from '@emotion/css';
 import React, { useMemo, useState } from 'react';
 
 import { GrafanaTheme2 } from '@grafana/data';
-import { Stack } from '@grafana/experimental';
-import { IconButton, LinkButton, Link, useStyles2, ConfirmModal } from '@grafana/ui';
+import { IconButton, LinkButton, Link, useStyles2, ConfirmModal, Stack } from '@grafana/ui';
 import { MuteTimeInterval } from 'app/plugins/datasource/alertmanager/types';
 import { useDispatch } from 'app/types/store';
 

public/app/features/alerting/unified/components/notification-policies/AlertGroupsSummary.tsx

@@ -1,8 +1,7 @@
 import pluralize from 'pluralize';
 import React, { Fragment } from 'react';
 
-import { Stack } from '@grafana/experimental';
-import { Badge } from '@grafana/ui';
+import { Badge, Stack } from '@grafana/ui';
 
 interface Props {
   active?: number;

public/app/features/alerting/unified/components/notification-policies/ContactPointSelector.tsx

@@ -1,8 +1,7 @@
 import React from 'react';
 
 import { SelectableValue } from '@grafana/data';
-import { Stack } from '@grafana/experimental';
-import { Select, SelectCommonProps, Text } from '@grafana/ui';
+import { Select, SelectCommonProps, Text, Stack } from '@grafana/ui';
 
 import {
   RECEIVER_META_KEY,
@@ -36,7 +35,7 @@ interface ReceiversProps {
 
 const ReceiversSummary = ({ receivers }: ReceiversProps) => {
   return (
-    <Stack direction="row" wrap={false}>
+    <Stack direction="row">
       {receivers.map((receiver, index) => (
         <Stack key={receiver.uid ?? index} direction="row" gap={0.5}>
           {receiver[RECEIVER_PLUGIN_META_KEY]?.icon && (

public/app/features/alerting/unified/components/notification-policies/EditNotificationPolicyForm.tsx

@@ -2,7 +2,6 @@ import { css } from '@emotion/css';
 import React, { ReactNode, useState } from 'react';
 
 import { GrafanaTheme2 } from '@grafana/data';
-import { Stack } from '@grafana/experimental';
 import {
   Button,
   Field,
@@ -17,6 +16,7 @@ import {
   useStyles2,
   Badge,
   FieldValidationMessage,
+  Stack,
 } from '@grafana/ui';
 import { MatcherOperator, RouteWithID } from 'app/plugins/datasource/alertmanager/types';
 

public/app/features/alerting/unified/components/notification-policies/Filters.tsx

@@ -3,8 +3,7 @@ import { debounce } from 'lodash';
 import React, { useCallback, useEffect, useRef } from 'react';
 
 import { SelectableValue } from '@grafana/data';
-import { Stack } from '@grafana/experimental';
-import { Button, Field, Icon, Input, Label as LabelElement, Select, Tooltip, useStyles2 } from '@grafana/ui';
+import { Button, Field, Icon, Input, Label as LabelElement, Select, Tooltip, useStyles2, Stack } from '@grafana/ui';
 import { ObjectMatcher, Receiver, RouteWithID } from 'app/plugins/datasource/alertmanager/types';
 
 import { useURLSearchParams } from '../../hooks/useURLSearchParams';

public/app/features/alerting/unified/components/notification-policies/Matchers.tsx

@@ -3,8 +3,7 @@ import { take, takeRight, uniqueId } from 'lodash';
 import React, { FC } from 'react';
 
 import { GrafanaTheme2 } from '@grafana/data';
-import { Stack } from '@grafana/experimental';
-import { getTagColorsFromName, useStyles2 } from '@grafana/ui';
+import { getTagColorsFromName, useStyles2, Stack } from '@grafana/ui';
 import { ObjectMatcher } from 'app/plugins/datasource/alertmanager/types';
 
 import { HoverCard } from '../HoverCard';
@@ -23,7 +22,7 @@ const Matchers: FC<MatchersProps> = ({ matchers }) => {
 
   return (
     <span data-testid="label-matchers">
-      <Stack direction="row" gap={1} alignItems="center">
+      <Stack direction="row" gap={1} alignItems="center" wrap={'wrap'}>
         {firstFew.map((matcher) => (
           <MatcherBadge key={uniqueId()} matcher={matcher} />
         ))}

public/app/features/alerting/unified/components/notification-policies/Modals.tsx

@@ -1,8 +1,7 @@
 import { groupBy } from 'lodash';
 import React, { FC, useCallback, useMemo, useState } from 'react';
 
-import { Stack } from '@grafana/experimental';
-import { Button, Icon, Modal, ModalProps, Spinner } from '@grafana/ui';
+import { Button, Icon, Modal, ModalProps, Spinner, Stack } from '@grafana/ui';
 import {
   AlertmanagerGroup,
   AlertState,
@@ -239,7 +238,7 @@ const useAlertGroupsModal = (): [
         closeOnBackdropClick={true}
         closeOnEscape={true}
         title={
-          <Stack direction="row" alignItems="center" gap={1} flexGrow={1}>
+          <Stack direction="row" alignItems="center" gap={1} wrap={'wrap'}>
             <Stack direction="row" alignItems="center" gap={0.5}>
               <Icon name="x" /> Matchers
             </Stack>

public/app/features/alerting/unified/components/notification-policies/Policy.tsx

@@ -6,8 +6,18 @@ import { Link } from 'react-router-dom';
 import { useToggle } from 'react-use';
 
 import { GrafanaTheme2 } from '@grafana/data';
-import { Stack } from '@grafana/experimental';
-import { Badge, Button, Dropdown, getTagColorsFromName, Icon, Menu, Text, Tooltip, useStyles2 } from '@grafana/ui';
+import {
+  Badge,
+  Button,
+  Dropdown,
+  Icon,
+  Menu,
+  Stack,
+  Text,
+  Tooltip,
+  getTagColorsFromName,
+  useStyles2,
+} from '@grafana/ui';
 import ConditionalWrap from 'app/features/alerting/components/ConditionalWrap';
 import { AlertmanagerGroup, ObjectMatcher, Receiver, RouteWithID } from 'app/plugins/datasource/alertmanager/types';
 import { ReceiversState } from 'app/types';

public/app/features/alerting/unified/components/receivers/ReceiversAndTemplatesView.tsx

@@ -1,7 +1,6 @@
 import React from 'react';
 
-import { Stack } from '@grafana/experimental';
-import { Alert, LinkButton } from '@grafana/ui';
+import { Alert, LinkButton, Stack } from '@grafana/ui';
 import { AlertManagerCortexConfig } from 'app/plugins/datasource/alertmanager/types';
 
 import { AlertmanagerAction, useAlertmanagerAbility } from '../../hooks/useAbilities';

public/app/features/alerting/unified/components/receivers/ReceiversSection.tsx

@@ -4,8 +4,7 @@ import { Link } from 'react-router-dom';
 import { useToggle } from 'react-use';
 
 import { GrafanaTheme2 } from '@grafana/data';
-import { Stack } from '@grafana/experimental';
-import { Button, Dropdown, Icon, Menu, MenuItem, useStyles2 } from '@grafana/ui';
+import { Button, Dropdown, Icon, Menu, MenuItem, useStyles2, Stack } from '@grafana/ui';
 
 import { GrafanaReceiversExporter } from '../export/GrafanaReceiversExporter';