@atlaskit/smart-card 34.6.6 → 34.8.0

package/dist/es2019/view/EmbedCard/views/unresolved-view/UnresolvedViewOld.js

@@ -0,0 +1,119 @@
+/**
+ * @jsxRuntime classic
+ * @jsx jsx
+ */
+import React, { useMemo } from 'react';
+
+// eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
+import { css, jsx } from '@emotion/react';
+import Heading from '@atlaskit/heading';
+import LinkGlyph from '@atlaskit/icon/core/migration/link';
+import { gs } from '../../../common/utils';
+import { ExpandedFrame } from '../../components/ExpandedFrame';
+import { ImageIcon } from '../../components/ImageIcon';
+const containerStyles = css({
+  display: 'grid',
+  height: 'inherit'
+});
+const contentStyles = css({
+  display: 'flex',
+  flexDirection: 'column',
+  justifyContent: 'center',
+  textAlign: 'center',
+  alignItems: 'center',
+  margin: 'auto',
+  padding: "var(--ds-space-200, 16px)",
+  gap: "var(--ds-space-250, 20px)",
+  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
+  maxWidth: gs(50)
+});
+const descriptionStyles = css({
+  font: "var(--ds-font-body, normal 400 14px/20px ui-sans-serif, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Ubuntu, system-ui, \"Helvetica Neue\", sans-serif)",
+  textAlign: 'center'
+});
+const imageStyles = css({
+  height: '120px',
+  width: '180px',
+  objectFit: 'contain',
+  objectPosition: 'center center'
+});
+const UnresolvedViewOld = ({
+  button,
+  description,
+  frameStyle,
+  icon: iconUrlOrElement,
+  image: imageUrlOrElement,
+  inheritDimensions,
+  isSelected,
+  onClick,
+  testId,
+  text,
+  title,
+  url
+}) => {
+  const icon = useMemo(() => {
+    if ( /*#__PURE__*/React.isValidElement(iconUrlOrElement)) {
+      return iconUrlOrElement;
+    }
+    return jsx(ImageIcon, {
+      src: typeof iconUrlOrElement === 'string' ? iconUrlOrElement : undefined,
+      default: jsx(LinkGlyph, {
+        label: "icon",
+        LEGACY_size: "small",
+        testId: "embed-card-fallback-icon",
+        color: "currentColor"
+      })
+    });
+  }, [iconUrlOrElement]);
+  const image = useMemo(() => {
+    if (!imageUrlOrElement) {
+      return null;
+    }
+    const imageTestId = `${testId}-unresolved-image`;
+    if (typeof imageUrlOrElement === 'string') {
+      // eslint-disable-next-line jsx-a11y/alt-text
+      return jsx("img", {
+        css: imageStyles,
+        "data-testid": imageTestId,
+        src: imageUrlOrElement
+      });
+    }
+    return jsx("div", {
+      css: imageStyles,
+      "data-testid": imageTestId
+    }, imageUrlOrElement);
+  }, [imageUrlOrElement, testId]);
+  return jsx(ExpandedFrame
+  // Scroll bar must be shown for unresolved views to display the connect account button
+  , {
+    allowScrollBar: true,
+    setOverflow: true
+    // EDM-9259: Fix embed frame showing on unresolved views when frameStyle is set to hide.
+    // Set fallback to 'show' here to maintain the current behaviour when platform.editor.show-embed-card-frame-renderer is OFF.
+    // Remove 'show' on platform.editor.show-embed-card-frame-renderer cleanup as frameStyle will be set to 'show' both in renderer and editor.
+    // We want all views to be consistent and respect frameStyle instead of
+    // having resolved view default to showOnHover and unresolved view default to show.
+    // Default frameStyle is set inside <ExpandedFrame />
+    ,
+    frameStyle: frameStyle !== null && frameStyle !== void 0 ? frameStyle : 'show',
+    href: url,
+    icon: icon,
+    inheritDimensions: inheritDimensions,
+    isSelected: isSelected,
+    onClick: onClick,
+    testId: testId,
+    text: text
+  }, jsx("div", {
+    css: containerStyles,
+    "data-testid": `${testId}-unresolved-container`
+  }, jsx("div", {
+    css: contentStyles
+  }, image, jsx(Heading, {
+    size: "large",
+    testId: `${testId}-unresolved-title`
+  }, title), jsx("span", {
+    css: descriptionStyles,
+    "data-testid": `${testId}-unresolved-description`
+  }, description), button)));
+};
+export default UnresolvedViewOld;

package/dist/es2019/view/EmbedCard/views/unresolved-view/index.compiled.css

@@ -0,0 +1,19 @@
+._11c81oud{font:var(--ds-font-body,normal 400 14px/20px ui-sans-serif,-apple-system,BlinkMacSystemFont,"Segoe UI",Ubuntu,system-ui,"Helvetica Neue",sans-serif)}
+._1yt4pxbi{padding:var(--ds-space-200,1pc)}
+._zulpv47k{gap:var(--ds-space-250,20px)}
+._18u01wug{margin-left:auto}
+._19pk1wug{margin-top:auto}
+._1bah1h6o{justify-content:center}
+._1bsbmgvx{width:180px}
+._1e0c11p5{display:grid}
+._1e0c1txw{display:flex}
+._2hwx1wug{margin-right:auto}
+._2lx21bp4{flex-direction:column}
+._4cvr1h6o{align-items:center}
+._4t3i1kw7{height:inherit}
+._4t3i68cl{height:90pt}
+._5ral1f51{object-fit:contain}
+._otyr1wug{margin-bottom:auto}
+._p12f1kdj{max-width:25pc}
+._rsufaqso{object-position:center center}
+._y3gn1h6o{text-align:center}

package/dist/es2019/view/EmbedCard/views/unresolved-view/index.js

@@ -1,42 +1,17 @@
-/**
- * @jsxRuntime classic
- * @jsx jsx
- */
+/* index.tsx generated by @compiled/babel-plugin v0.36.0 */
+import "./index.compiled.css";
+import { ax, ix } from "@compiled/react/runtime";
 import React, { useMemo } from 'react';
-
-// eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
-import { css, jsx } from '@emotion/react';
 import Heading from '@atlaskit/heading';
 import LinkGlyph from '@atlaskit/icon/core/migration/link';
-import { gs } from '../../../common/utils';
+import { fg } from '@atlaskit/platform-feature-flags';
 import { ExpandedFrame } from '../../components/ExpandedFrame';
 import { ImageIcon } from '../../components/ImageIcon';
-const containerStyles = css({
-  display: 'grid',
-  height: 'inherit'
-});
-const contentStyles = css({
-  display: 'flex',
-  flexDirection: 'column',
-  justifyContent: 'center',
-  textAlign: 'center',
-  alignItems: 'center',
-  margin: 'auto',
-  padding: "var(--ds-space-200, 16px)",
-  gap: "var(--ds-space-250, 20px)",
-  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
-  maxWidth: gs(50)
-});
-const descriptionStyles = css({
-  font: "var(--ds-font-body, normal 400 14px/20px ui-sans-serif, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Ubuntu, system-ui, \"Helvetica Neue\", sans-serif)",
-  textAlign: 'center'
-});
-const imageStyles = css({
-  height: '120px',
-  width: '180px',
-  objectFit: 'contain',
-  objectPosition: 'center center'
-});
+import UnresolvedViewOld from './UnresolvedViewOld';
+const containerStyles = null;
+const contentStyles = null;
+const descriptionStyles = null;
+const imageStyles = null;
 const UnresolvedView = ({
   button,
   description,
@@ -55,9 +30,9 @@ const UnresolvedView = ({
     if ( /*#__PURE__*/React.isValidElement(iconUrlOrElement)) {
       return iconUrlOrElement;
     }
-    return jsx(ImageIcon, {
+    return /*#__PURE__*/React.createElement(ImageIcon, {
       src: typeof iconUrlOrElement === 'string' ? iconUrlOrElement : undefined,
-      default: jsx(LinkGlyph, {
+      default: /*#__PURE__*/React.createElement(LinkGlyph, {
         label: "icon",
         LEGACY_size: "small",
         testId: "embed-card-fallback-icon",
@@ -72,18 +47,18 @@ const UnresolvedView = ({
     const imageTestId = `${testId}-unresolved-image`;
     if (typeof imageUrlOrElement === 'string') {
       // eslint-disable-next-line jsx-a11y/alt-text
-      return jsx("img", {
-        css: imageStyles,
+      return /*#__PURE__*/React.createElement("img", {
         "data-testid": imageTestId,
-        src: imageUrlOrElement
+        src: imageUrlOrElement,
+        className: ax(["_4t3i68cl _1bsbmgvx _5ral1f51 _rsufaqso"])
       });
     }
-    return jsx("div", {
-      css: imageStyles,
-      "data-testid": imageTestId
+    return /*#__PURE__*/React.createElement("div", {
+      "data-testid": imageTestId,
+      className: ax(["_4t3i68cl _1bsbmgvx _5ral1f51 _rsufaqso"])
     }, imageUrlOrElement);
   }, [imageUrlOrElement, testId]);
-  return jsx(ExpandedFrame
+  return /*#__PURE__*/React.createElement(ExpandedFrame
   // Scroll bar must be shown for unresolved views to display the connect account button
   , {
     allowScrollBar: true,
@@ -103,17 +78,24 @@ const UnresolvedView = ({
     onClick: onClick,
     testId: testId,
     text: text
-  }, jsx("div", {
-    css: containerStyles,
-    "data-testid": `${testId}-unresolved-container`
-  }, jsx("div", {
-    css: contentStyles
-  }, image, jsx(Heading, {
+  }, /*#__PURE__*/React.createElement("div", {
+    "data-testid": `${testId}-unresolved-container`,
+    className: ax(["_1e0c11p5 _4t3i1kw7"])
+  }, /*#__PURE__*/React.createElement("div", {
+    className: ax(["_19pk1wug _2hwx1wug _otyr1wug _18u01wug _1yt4pxbi _zulpv47k _1e0c1txw _2lx21bp4 _1bah1h6o _y3gn1h6o _4cvr1h6o _p12f1kdj"])
+  }, image, /*#__PURE__*/React.createElement(Heading, {
     size: "large",
     testId: `${testId}-unresolved-title`
-  }, title), jsx("span", {
-    css: descriptionStyles,
-    "data-testid": `${testId}-unresolved-description`
+  }, title), /*#__PURE__*/React.createElement("span", {
+    "data-testid": `${testId}-unresolved-description`,
+    className: ax(["_11c81oud _y3gn1h6o"])
   }, description), button)));
 };
-export default UnresolvedView;
+export const UnresolvedViewExported = props => {
+  if (fg('bandicoots-compiled-migration-smartcard')) {
+    return /*#__PURE__*/React.createElement(UnresolvedView, props);
+  } else {
+    return /*#__PURE__*/React.createElement(UnresolvedViewOld, props);
+  }
+};
+export default UnresolvedViewExported;

package/dist/es2019/view/FlexibleCard/components/actions/action/action-stack-item/action-button.compiled.css

@@ -0,0 +1,7 @@
+
+._kkk2n7od{all:unset}._11c8qk37{font:var(--ds-font-body-UNSAFE_small,normal 400 9pt/1pc ui-sans-serif,-apple-system,BlinkMacSystemFont,"Segoe UI",Ubuntu,system-ui,"Helvetica Neue",sans-serif)}
+._1yt41b66{padding:var(--ds-space-050,4px)}
+._1bsb1osq{width:100%}
+._syaz1fxt{color:var(--ds-text,#172b4d)}
+._irr3166n:hover{background-color:var(--ds-background-neutral-subtle-hovered,#091e420f)}
+._1di61dty:active{background-color:var(--ds-background-neutral-subtle-pressed,#091e4224)}

package/dist/es2019/view/FlexibleCard/components/actions/action/action-stack-item/action-button.js

@@ -1,25 +1,20 @@
+/* action-button.tsx generated by @compiled/babel-plugin v0.36.0 */
 import _extends from "@babel/runtime/helpers/extends";
-import React, { useCallback } from 'react';
-import { Box, Inline, Pressable, xcss } from '@atlaskit/primitives';
+import "./action-button.compiled.css";
+import * as React from 'react';
+import { ax, ix } from "@compiled/react/runtime";
+import { useCallback } from 'react';
+import { fg } from '@atlaskit/platform-feature-flags';
+import { Box, Inline, Pressable } from '@atlaskit/primitives/compiled';
 import Spinner from '@atlaskit/spinner';
 import { getPrimitivesInlineSpaceBySize } from '../../../utils';
 import ActionIcon from '../action-icon';
-const buttonStyles = xcss({
-  all: 'unset',
-  padding: 'space.050',
-  width: '100%',
-  ':hover': {
-    backgroundColor: 'color.background.neutral.subtle.hovered'
-  },
-  ':active': {
-    backgroundColor: 'color.background.neutral.subtle.pressed'
-  }
-});
-const contentStyles = xcss({
-  color: 'color.text',
-  font: "var(--ds-font-body-UNSAFE_small, normal 400 12px/16px ui-sans-serif, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Ubuntu, system-ui, \"Helvetica Neue\", sans-serif)"
-});
-const ActionButton = ({
+import ActionButtonOld from './action-buttonOld';
+const styles = {
+  button: "_kkk2n7od _1yt41b66 _1bsb1osq _irr3166n _1di61dty",
+  content: "_11c8qk37 _syaz1fxt"
+};
+const ActionButtonNew = ({
   content,
   icon: iconOption,
   isDisabled,
@@ -29,7 +24,7 @@ const ActionButton = ({
   space: spaceOption,
   testId,
   tooltipProps,
-  xcss
+  style
 }) => {
   const space = spaceOption !== null && spaceOption !== void 0 ? spaceOption : getPrimitivesInlineSpaceBySize(size);
   const onClick = useCallback(() => {
@@ -44,21 +39,26 @@ const ActionButton = ({
     }),
     size: size
   }) : iconOption;
-  return (
-    /*#__PURE__*/
-    // eslint-disable-next-line @atlaskit/design-system/consistent-css-prop-usage
-    React.createElement(Pressable, _extends({
-      xcss: [buttonStyles, xcss]
-    }, tooltipProps, {
-      onClick: onClick,
-      testId: testId
-    }), /*#__PURE__*/React.createElement(Inline, {
-      alignBlock: "center",
-      grow: "fill",
-      space: space
-    }, icon, /*#__PURE__*/React.createElement(Box, {
-      xcss: contentStyles
-    }, content)))
-  );
+  return /*#__PURE__*/React.createElement(Pressable, _extends({
+    xcss: styles.button
+  }, tooltipProps, {
+    onClick: onClick,
+    testId: testId
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop
+    ,
+    style: style
+  }), /*#__PURE__*/React.createElement(Inline, {
+    alignBlock: "center",
+    grow: "fill",
+    space: space
+  }, icon, /*#__PURE__*/React.createElement(Box, {
+    xcss: styles.content
+  }, content)));
+};
+const ActionButton = props => {
+  if (fg('bandicoots-compiled-migration-smartcard')) {
+    return /*#__PURE__*/React.createElement(ActionButtonNew, props);
+  }
+  return /*#__PURE__*/React.createElement(ActionButtonOld, props);
 };
 export default ActionButton;

package/dist/es2019/view/FlexibleCard/components/actions/action/action-stack-item/action-buttonOld.js

@@ -0,0 +1,64 @@
+import _extends from "@babel/runtime/helpers/extends";
+import React, { useCallback } from 'react';
+import { Box, Inline, Pressable, xcss } from '@atlaskit/primitives';
+import Spinner from '@atlaskit/spinner';
+import { getPrimitivesInlineSpaceBySize } from '../../../utils';
+import ActionIcon from '../action-icon';
+const buttonStyles = xcss({
+  all: 'unset',
+  padding: 'space.050',
+  width: '100%',
+  ':hover': {
+    backgroundColor: 'color.background.neutral.subtle.hovered'
+  },
+  ':active': {
+    backgroundColor: 'color.background.neutral.subtle.pressed'
+  }
+});
+const contentStyles = xcss({
+  color: 'color.text',
+  font: "var(--ds-font-body-UNSAFE_small, normal 400 12px/16px ui-sans-serif, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Ubuntu, system-ui, \"Helvetica Neue\", sans-serif)"
+});
+const ActionButtonOld = ({
+  content,
+  icon: iconOption,
+  isDisabled,
+  isLoading,
+  onClick: onClickCallback,
+  size,
+  space: spaceOption,
+  testId,
+  tooltipProps,
+  xcss
+}) => {
+  const space = spaceOption !== null && spaceOption !== void 0 ? spaceOption : getPrimitivesInlineSpaceBySize(size);
+  const onClick = useCallback(() => {
+    if (!isDisabled && !isLoading && onClickCallback) {
+      onClickCallback();
+    }
+  }, [isDisabled, isLoading, onClickCallback]);
+  const icon = iconOption && isLoading ? /*#__PURE__*/React.createElement(ActionIcon, {
+    asStackItemIcon: true,
+    icon: /*#__PURE__*/React.createElement(Spinner, {
+      testId: `${testId}-loading`
+    }),
+    size: size
+  }) : iconOption;
+  return (
+    /*#__PURE__*/
+    // eslint-disable-next-line @atlaskit/design-system/consistent-css-prop-usage
+    React.createElement(Pressable, _extends({
+      xcss: [buttonStyles, xcss]
+    }, tooltipProps, {
+      onClick: onClick,
+      testId: testId
+    }), /*#__PURE__*/React.createElement(Inline, {
+      alignBlock: "center",
+      grow: "fill",
+      space: space
+    }, icon, /*#__PURE__*/React.createElement(Box, {
+      xcss: contentStyles
+    }, content)))
+  );
+};
+export default ActionButtonOld;

package/dist/es2019/view/FlexibleCard/components/actions/action/index.js

@@ -26,7 +26,7 @@ const ActionNew = ({
   tooltipOnHide,
   hideTooltip,
   hideTooltipOnMouseDown,
-  xcss,
+  style,
   asDropDownItem,
   className,
   isDisabled,
@@ -59,9 +59,9 @@ const ActionNew = ({
       size: size,
       testId: testId,
       tooltipMessage: tooltipMessage || content
-      // eslint-disable-next-line @atlaskit/design-system/consistent-css-prop-usage
+      // eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop
       ,
-      xcss: xcss,
+      style: style,
       tooltipOnHide: tooltipOnHide,
       hideTooltipOnMouseDown: hideTooltipOnMouseDown,
       hideTooltip: hideTooltip

package/dist/es2019/view/FlexibleCard/components/actions/automation-action/AutomationActionOld.js

@@ -0,0 +1,87 @@
+import _extends from "@babel/runtime/helpers/extends";
+import React, { lazy, useCallback } from 'react';
+import { FormattedMessage, useIntl } from 'react-intl-next';
+import AutomationIcon from '@atlaskit/icon/core/automation';
+import { Text } from '@atlaskit/primitives';
+import { useAnalyticsEvents } from '../../../../../common/analytics/generated/use-analytics-events';
+import { ActionName } from '../../../../../constants';
+import { messages } from '../../../../../messages';
+import { useFlexibleUiContext } from '../../../../../state/flexible-ui-context';
+import { useSmartLinkModal } from '../../../../../state/modal';
+import Action from '../action';
+import AutomationManualTriggersGlyph from './manual-triggers-icon';
+import { getModalContent } from './utils';
+const AutomationModal = /*#__PURE__*/lazy(() => import( /* webpackChunkName: "@atlaskit-internal_smart-card-automation-modal" */'./automation-manual-triggers/manual-triggers-modal'));
+const AutomationActionOld = props => {
+  var _context$actions;
+  const {
+    formatMessage
+  } = useIntl();
+  const modal = useSmartLinkModal();
+  const {
+    onClick: onClickCallback
+  } = props;
+  const context = useFlexibleUiContext();
+  const {
+    fireEvent
+  } = useAnalyticsEvents();
+  const automationActionData = context === null || context === void 0 ? void 0 : (_context$actions = context.actions) === null || _context$actions === void 0 ? void 0 : _context$actions[ActionName.AutomationAction];
+  const automationActionOnClick = useCallback(automationActionData => {
+    const {
+      product,
+      resourceType,
+      baseAutomationUrl,
+      objectAri,
+      siteAri,
+      canManageAutomation,
+      analyticsSource,
+      objectName
+    } = automationActionData;
+    fireEvent('ui.button.clicked.automationAction', {});
+    const {
+      modalTitle,
+      modalDescription
+    } = getModalContent(product, resourceType) || {};
+    const automationModalTitle = modalTitle ? /*#__PURE__*/React.createElement(FormattedMessage, modalTitle) : undefined;
+    const automationModalDescription = modalDescription ? /*#__PURE__*/React.createElement(FormattedMessage, _extends({}, modalDescription, {
+      values: {
+        name: objectName,
+        b: chunks => /*#__PURE__*/React.createElement(Text, {
+          as: "strong"
+        }, chunks),
+        br: /*#__PURE__*/React.createElement("br", null)
+      }
+    })) : undefined;
+    modal.open( /*#__PURE__*/React.createElement(AutomationModal, {
+      baseAutomationUrl: baseAutomationUrl,
+      objectAri: objectAri,
+      siteAri: siteAri,
+      canManageAutomation: canManageAutomation,
+      analyticsSource: analyticsSource,
+      modalTitle: automationModalTitle,
+      modalDescription: automationModalDescription,
+      onClose: () => modal.close()
+    }));
+    onClickCallback === null || onClickCallback === void 0 ? void 0 : onClickCallback();
+  }, [modal, onClickCallback, fireEvent]);
+  if (!automationActionData) {
+    return null;
+  }
+  const automationActionTitle = /*#__PURE__*/React.createElement(FormattedMessage, messages.automation_action_title);
+  const automationActionTooltip = /*#__PURE__*/React.createElement(FormattedMessage, messages.automation_action_tooltip);
+  const automationActionIconLabel = formatMessage(messages.automation_action_icon_label);
+  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Action, _extends({
+    content: automationActionTitle,
+    icon: /*#__PURE__*/React.createElement(AutomationIcon, {
+      spacing: "spacious",
+      LEGACY_fallbackIcon: AutomationManualTriggersGlyph,
+      color: "currentColor",
+      label: automationActionIconLabel
+    }),
+    testId: "smart-action-automation-action",
+    tooltipMessage: automationActionTooltip
+  }, props, {
+    onClick: () => automationActionOnClick(automationActionData)
+  })));
+};
+export default AutomationActionOld;

package/dist/es2019/view/FlexibleCard/components/actions/automation-action/automation-manual-triggers/manual-triggers-modal/sub-components/empty-state/AutomationModalEmptyStateOld.js

@@ -0,0 +1,89 @@
+import React from 'react';
+import { defineMessages, FormattedMessage, useIntl } from 'react-intl-next';
+import { useAnalyticsEvents } from '@atlaskit/analytics-next';
+import Button from '@atlaskit/button';
+import { Box, Stack, xcss } from '@atlaskit/primitives';
+import { useAutomationMenu } from '../../menu-context';
+import EmptyIcon from './empty-icon';
+const i18n = defineMessages({
+  defaultEmptyStateAdminDesc: {
+    id: 'automation-menu.modal.empty.automations.admin.description',
+    defaultMessage: 'Use the manual trigger to populate a menu of selections that anyone, or people you specify, can apply as one-click automations.',
+    description: 'A description shown in the automation menu when the rule list is empty for an admin.'
+  },
+  defaultEmptyStateDesc: {
+    id: 'automation-menu.modal.empty.automations.user.description',
+    defaultMessage: 'Admins haven’t configured any manually triggered automations yet.',
+    description: 'A description shown in the automation menu when the rule list is empty for a user.'
+  },
+  learnMoreLink: {
+    id: 'automation-menu.empty-state.learn-more.link',
+    defaultMessage: 'Learn more about the manual trigger',
+    description: 'The text of a link that takes a user to the documentation for manually triggered rules in Automation for Confluence.'
+  },
+  emptyAutomationListImageAlt: {
+    id: 'automation-menu.empty-state.image.alt',
+    defaultMessage: 'Empty automation list icon',
+    description: 'Alternative text for the image that renders when the automation list is empty.'
+  }
+});
+const emptyStateStyles = xcss({
+  paddingLeft: 'space.300',
+  paddingRight: 'space.300',
+  marginTop: 'space.500'
+});
+const imageStyles = xcss({
+  marginTop: 'space.050',
+  marginBottom: 'space.300',
+  width: '160px',
+  height: '156px'
+});
+const descriptionStyles = xcss({
+  width: '360px',
+  textAlign: 'center'
+});
+export const AutomationModalEmptyStateOld = () => {
+  const {
+    formatMessage
+  } = useIntl();
+  const {
+    createAnalyticsEvent
+  } = useAnalyticsEvents();
+  const {
+    canManageAutomation,
+    analyticsSource,
+    emptyStateDescription,
+    emptyStateAdminDescription
+  } = useAutomationMenu();
+  const emptyStateDesc = emptyStateDescription !== null && emptyStateDescription !== void 0 ? emptyStateDescription : /*#__PURE__*/React.createElement(FormattedMessage, i18n.defaultEmptyStateDesc);
+  const adminEmptyStateDesc = emptyStateAdminDescription !== null && emptyStateAdminDescription !== void 0 ? emptyStateAdminDescription : /*#__PURE__*/React.createElement(FormattedMessage, i18n.defaultEmptyStateAdminDesc);
+  const displayedEmptyStateDesc = canManageAutomation ? adminEmptyStateDesc : emptyStateDesc;
+  return /*#__PURE__*/React.createElement(Stack, {
+    xcss: emptyStateStyles,
+    alignInline: "center",
+    alignBlock: "center",
+    grow: "fill"
+  }, /*#__PURE__*/React.createElement(Box, {
+    xcss: imageStyles
+  }, /*#__PURE__*/React.createElement(EmptyIcon, {
+    alt: formatMessage(i18n.emptyAutomationListImageAlt)
+  })), /*#__PURE__*/React.createElement(Box, {
+    xcss: descriptionStyles
+  }, displayedEmptyStateDesc, canManageAutomation && /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement(Button, {
+    appearance: "link",
+    spacing: "none",
+    href: "https://www.atlassian.com/platform/automation",
+    target: "_blank",
+    onClick: () => {
+      createAnalyticsEvent({
+        type: 'sendUIEvent',
+        data: {
+          action: 'clicked',
+          actionSubject: 'link',
+          actionSubjectId: 'learnMore',
+          source: analyticsSource
+        }
+      }).fire();
+    }
+  }, /*#__PURE__*/React.createElement(FormattedMessage, i18n.learnMoreLink)))));
+};

package/dist/es2019/view/FlexibleCard/components/actions/automation-action/automation-manual-triggers/manual-triggers-modal/sub-components/empty-state/main.compiled.css

@@ -0,0 +1,9 @@
+._19bv1ejb{padding-left:var(--ds-space-300,24px)}
+._19pk1b66{margin-top:var(--ds-space-050,4px)}
+._19pk1jfw{margin-top:var(--ds-space-500,40px)}
+._1bsb1gwv{width:360px}
+._1bsb1lit{width:10pc}
+._4t3iplmo{height:156px}
+._otyr1ejb{margin-bottom:var(--ds-space-300,24px)}
+._u5f31ejb{padding-right:var(--ds-space-300,24px)}
+._y3gn1h6o{text-align:center}