Added initial wizard and success empty state

locales/data.json

@@ -11944,7 +11944,7 @@
         "value": "Map tags and labels"
       }
     ],
-    "tagMappingDesc": [
+    "tagMappingsDesc": [
       {
         "type": 0,
         "value": "Combine multiple tags across your cloud integrations to group and filter similar tags with one tag key. "
@@ -11962,12 +11962,60 @@
         "value": "learnMore"
       }
     ],
-    "tagMappingWarning": [
+    "tagMappingsWarning": [
       {
         "type": 0,
         "value": "You must enable tags to use tag mapping."
       }
     ],
+    "tagMappingsWizardDesc": [
+      {
+        "type": 0,
+        "value": "Map multiple tags across data sources to be used as a single tag key for report grouping and filtering. Changes will be reflected within 24 hours."
+      }
+    ],
+    "tagMappingsWizardNavToCreateTagMapping": [
+      {
+        "type": 0,
+        "value": "Create another tag mapping"
+      }
+    ],
+    "tagMappingsWizardNavToTagMappings": [
+      {
+        "type": 0,
+        "value": "Go back to Cost Management Settings"
+      }
+    ],
+    "tagMappingsWizardReview": [
+      {
+        "type": 0,
+        "value": "Review details"
+      }
+    ],
+    "tagMappingsWizardSelectChildTags": [
+      {
+        "type": 0,
+        "value": "Select child tags"
+      }
+    ],
+    "tagMappingsWizardSelectParentTag": [
+      {
+        "type": 0,
+        "value": "Select parent tag"
+      }
+    ],
+    "tagMappingsWizardSuccess": [
+      {
+        "type": 0,
+        "value": "Tag mapping successful"
+      }
+    ],
+    "tagMappingsWizardSuccessDesc": [
+      {
+        "type": 0,
+        "value": "Your tag keys were successfully mapped. Changes will be reflected in report summarizations within 24 hours."
+      }
+    ],
     "tagNames": [
       {
         "type": 0,

locales/translations.json

@@ -543,8 +543,16 @@
   "tagLabels": "Tags and labels",
   "tagLabelsEnable": "Enable tags and labels",
   "tagLabelsMap": "Map tags and labels",
-  "tagMappingDesc": "Combine multiple tags across your cloud integrations to group and filter similar tags with one tag key. {warning} Changes will be reflected within 24 hours. {learnMore}",
-  "tagMappingWarning": "You must enable tags to use tag mapping.",
+  "tagMappingsDesc": "Combine multiple tags across your cloud integrations to group and filter similar tags with one tag key. {warning} Changes will be reflected within 24 hours. {learnMore}",
+  "tagMappingsWarning": "You must enable tags to use tag mapping.",
+  "tagMappingsWizardDesc": "Map multiple tags across data sources to be used as a single tag key for report grouping and filtering. Changes will be reflected within 24 hours.",
+  "tagMappingsWizardNavToCreateTagMapping": "Create another tag mapping",
+  "tagMappingsWizardNavToTagMappings": "Go back to Cost Management Settings",
+  "tagMappingsWizardReview": "Review details",
+  "tagMappingsWizardSelectChildTags": "Select child tags",
+  "tagMappingsWizardSelectParentTag": "Select parent tag",
+  "tagMappingsWizardSuccess": "Tag mapping successful",
+  "tagMappingsWizardSuccessDesc": "Your tag keys were successfully mapped. Changes will be reflected in report summarizations within 24 hours.",
   "tagNames": "Tag names",
   "timeOfExport": "Time of export",
   "to": "to",

src/locales/messages.ts

@@ -3339,17 +3339,61 @@ export default defineMessages({
     description: 'Tags and labels',
     id: 'tagLabels',
   },
-  tagMappingDesc: {
+  tagMappingsDesc: {
     defaultMessage:
       'Combine multiple tags across your cloud integrations to group and filter similar tags with one tag key. {warning} Changes will be reflected within 24 hours. {learnMore}',
     description:
       'Combine multiple tags across your cloud integrations to group and filter similar tags with one tag key. {warning} Changes will be reflected within 24 hours. {learnMore}',
-    id: 'tagMappingDesc',
+    id: 'tagMappingsDesc',
   },
-  tagMappingWarning: {
+  tagMappingsWarning: {
     defaultMessage: 'You must enable tags to use tag mapping.',
     description: 'You must enable tags to use tag mapping.',
-    id: 'tagMappingWarning',
+    id: 'tagMappingsWarning',
+  },
+  tagMappingsWizardDesc: {
+    defaultMessage:
+      'Map multiple tags across data sources to be used as a single tag key for report grouping and filtering. Changes will be reflected within 24 hours.',
+    description:
+      'Map multiple tags across data sources to be used as a single tag key for report grouping and filtering. Changes will be reflected within 24 hours.',
+    id: 'tagMappingsWizardDesc',
+  },
+  tagMappingsWizardNavToCreateTagMapping: {
+    defaultMessage: 'Create another tag mapping',
+    description: 'Create another tag mapping',
+    id: 'tagMappingsWizardNavToCreateTagMapping',
+  },
+  tagMappingsWizardNavToTagMappings: {
+    defaultMessage: 'Go back to Cost Management Settings',
+    description: 'Go back to Cost Management Settings',
+    id: 'tagMappingsWizardNavToTagMappings',
+  },
+  tagMappingsWizardReview: {
+    defaultMessage: 'Review details',
+    description: 'Review details',
+    id: 'tagMappingsWizardReview',
+  },
+  tagMappingsWizardSelectChildTags: {
+    defaultMessage: 'Select child tags',
+    description: 'Select child tags',
+    id: 'tagMappingsWizardSelectChildTags',
+  },
+  tagMappingsWizardSelectParentTag: {
+    defaultMessage: 'Select parent tag',
+    description: 'Select parent tag',
+    id: 'tagMappingsWizardSelectParentTag',
+  },
+  tagMappingsWizardSuccess: {
+    defaultMessage: 'Tag mapping successful',
+    description: 'Tag mapping successful',
+    id: 'tagMappingsWizardSuccess',
+  },
+  tagMappingsWizardSuccessDesc: {
+    defaultMessage:
+      'Your tag keys were successfully mapped. Changes will be reflected in report summarizations within 24 hours.',
+    description:
+      'Your tag keys were successfully mapped. Changes will be reflected in report summarizations within 24 hours.',
+    id: 'tagMappingsWizardSuccessDesc',
   },
   tagNames: {
     defaultMessage: 'Tag names',

src/routes/details/ocpBreakdown/clusterInfo/cloudIntegration.tsx

@@ -16,7 +16,7 @@ import { FetchStatus } from 'store/common';
 import { providersActions, providersSelectors } from 'store/providers';
 import { formatPath, getReleasePath } from 'utils/paths';
 
-import { styles } from './modal.styles';
+import { styles } from './clusterInfo.styles';
 
 interface CloudIntegrationOwnProps {
   uuid?: string;

src/routes/details/ocpBreakdown/clusterInfo/clusterContent.tsx

@@ -21,7 +21,7 @@ import { providersActions, providersQuery, providersSelectors } from 'store/prov
 import { formatPath, getReleasePath } from 'utils/paths';
 
 import { CloudIntegration } from './cloudIntegration';
-import { styles } from './modal.styles';
+import { styles } from './clusterInfo.styles';
 
 interface ClusterInfoContentOwnProps {
   clusterId?: string;

src/routes/details/ocpBreakdown/clusterInfo/clusterInfo.tsx

@@ -5,7 +5,7 @@ import React, { useState } from 'react';
 import { useIntl } from 'react-intl';
 
 import { ClusterContent } from './clusterContent';
-import { styles } from './modal.styles';
+import { styles } from './clusterInfo.styles';
 
 interface ClusterInfoOwnProps {
   clusterId?: string;
@@ -17,7 +17,7 @@ const ClusterInfo: React.FC<ClusterInfoProps> = ({ clusterId }: ClusterInfoProps
   const intl = useIntl();
   const [isOpen, setIsOpen] = useState(false);
 
-  const handleClose = () => {
+  const handleOnClose = () => {
     setIsOpen(false);
   };
 
@@ -33,7 +33,7 @@ const ClusterInfo: React.FC<ClusterInfoProps> = ({ clusterId }: ClusterInfoProps
       <Button onClick={handleOnClick} style={styles.clusterInfo} variant={ButtonVariant.link}>
         {intl.formatMessage(messages.clusterInfo)}
       </Button>
-      <Modal className="costManagement" isOpen={isOpen} onClose={handleClose} variant={ModalVariant.medium}>
+      <Modal className="costManagement" isOpen={isOpen} onClose={handleOnClose} variant={ModalVariant.medium}>
         <ModalHeader title={intl.formatMessage(messages.clusterInfo)} />
         <ModalBody>
           <ClusterContent clusterId={clusterId} />

src/routes/settings/tagLabels/tagMappings/tagMappings.tsx

@@ -110,7 +110,6 @@ const TagMappings: React.FC<MappingsProps> = ({ canWrite }) => {
         isDisabled={mappings.length === 0}
         itemsPerPage={mappings.length}
         itemsTotal={itemsTotal}
-        onCreateTagMapping={handleOnCreateTagMapping}
         onFilterAdded={filter => handleOnFilterAdded(filter)}
         onFilterRemoved={filter => handleOnFilterRemoved(filter)}
         pagination={getPagination(isDisabled)}
@@ -119,10 +118,6 @@ const TagMappings: React.FC<MappingsProps> = ({ canWrite }) => {
     );
   };
 
-  const handleOnCreateTagMapping = () => {
-    // Todo: Open wizard
-  };
-
   const handleOnFilterAdded = filter => {
     const newQuery = queryUtils.handleOnFilterAdded(query, filter);
     setQuery(newQuery);
@@ -159,13 +154,13 @@ const TagMappings: React.FC<MappingsProps> = ({ canWrite }) => {
   return (
     <>
       <div>
-        {intl.formatMessage(messages.tagMappingDesc, {
+        {intl.formatMessage(messages.tagMappingsDesc, {
           learnMore: (
             <a href={intl.formatMessage(messages.docsTagMappings)} rel="noreferrer" target="_blank">
               {intl.formatMessage(messages.learnMore)}
             </a>
           ),
-          warning: <b>{intl.formatMessage(messages.tagMappingWarning)}</b>,
+          warning: <b>{intl.formatMessage(messages.tagMappingsWarning)}</b>,
         })}
       </div>
       {hasMappings && getToolbar(mappings)}
@@ -178,7 +173,7 @@ const TagMappings: React.FC<MappingsProps> = ({ canWrite }) => {
         </>
       ) : (
         <div style={styles.emptyStateContainer}>
-          <TagMappingsEmptyState canWrite={canWrite} onCreateTagMapping={handleOnCreateTagMapping} />
+          <TagMappingsEmptyState canWrite={canWrite} />
         </div>
       )}
     </>

src/routes/settings/tagLabels/tagMappings/tagMappingsEmptyState.tsx

@@ -1,51 +1,32 @@
 import {
-  Button,
-  ButtonVariant,
   EmptyState,
   EmptyStateActions,
   EmptyStateBody,
   EmptyStateFooter,
   EmptyStateHeader,
   EmptyStateIcon,
   EmptyStateVariant,
-  Tooltip,
 } from '@patternfly/react-core';
 import { PlusCircleIcon } from '@patternfly/react-icons/dist/esm/icons/plus-circle-icon';
 import messages from 'locales/messages';
 import React from 'react';
 import { useIntl } from 'react-intl';
 
+import { TagMappingsWizard } from '../tagMappingsWizard';
+
 interface TagMappingsEmptyStateOwnProps {
   canWrite?: boolean;
   isDisabled?: boolean;
-  onCreateTagMapping();
 }
 
 type TagMappingsEmptyStateProps = TagMappingsEmptyStateOwnProps;
 
 const TagMappingsEmptyState: React.FC<TagMappingsEmptyStateProps> = ({
   canWrite,
   isDisabled,
-  onCreateTagMapping,
 }: TagMappingsEmptyStateOwnProps) => {
   const intl = useIntl();
 
-  const getActions = () => {
-    const getTooltip = children => {
-      if (!canWrite) {
-        const disableTagsTooltip = intl.formatMessage(messages.readOnlyPermissions);
-        return <Tooltip content={disableTagsTooltip}>{children}</Tooltip>;
-      }
-      return children;
-    };
-
-    return getTooltip(
-      <Button isAriaDisabled={isDisabled} key="save" onClick={onCreateTagMapping} variant={ButtonVariant.primary}>
-        {intl.formatMessage(messages.createTagMapping)}
-      </Button>
-    );
-  };
-
   return (
     <EmptyState variant={EmptyStateVariant.lg} className="pf-m-redhat-font">
       <EmptyStateHeader
@@ -64,7 +45,9 @@ const TagMappingsEmptyState: React.FC<TagMappingsEmptyStateProps> = ({
         })}
       </EmptyStateBody>
       <EmptyStateFooter>
-        <EmptyStateActions>{getActions()}</EmptyStateActions>
+        <EmptyStateActions>
+          <TagMappingsWizard canWrite={canWrite} isDisabled={isDisabled} />
+        </EmptyStateActions>
       </EmptyStateFooter>
     </EmptyState>
   );

src/routes/settings/tagLabels/tagMappings/tagMappingsToolbar.tsx

@@ -1,4 +1,3 @@
-import { Button, ButtonVariant, Tooltip } from '@patternfly/react-core';
 import type { OcpQuery } from 'api/queries/ocpQuery';
 import { ResourcePathsType } from 'api/resources/resource';
 import messages from 'locales/messages';
@@ -11,6 +10,8 @@ import type { ToolbarChipGroupExt } from 'routes/components/dataToolbar/utils/co
 import type { Filter } from 'routes/utils/filter';
 import { createMapStateToProps } from 'store/common';
 
+import { TagMappingsWizard } from '../tagMappingsWizard';
+
 interface TagMappingsToolbarOwnProps {
   canWrite?: boolean;
   enabledTagsCount?: number;
@@ -21,7 +22,6 @@ interface TagMappingsToolbarOwnProps {
   isSecondaryActionDisabled?: boolean;
   itemsPerPage?: number;
   itemsTotal?: number;
-  onCreateTagMapping();
   onFilterAdded(filter: Filter);
   onFilterRemoved(filter: Filter);
   pagination?: React.ReactNode;
@@ -55,24 +55,6 @@ export class TagMappingsToolbarBase extends React.Component<TagMappingsToolbarPr
     });
   }
 
-  private getActions = () => {
-    const { canWrite, intl, isDisabled, onCreateTagMapping } = this.props;
-
-    const getTooltip = children => {
-      if (!canWrite) {
-        const disableTagsTooltip = intl.formatMessage(messages.readOnlyPermissions);
-        return <Tooltip content={disableTagsTooltip}>{children}</Tooltip>;
-      }
-      return children;
-    };
-
-    return getTooltip(
-      <Button isAriaDisabled={isDisabled} key="save" onClick={onCreateTagMapping} variant={ButtonVariant.primary}>
-        {intl.formatMessage(messages.createTagMapping)}
-      </Button>
-    );
-  };
-
   private getCategoryOptions = (): ToolbarChipGroupExt[] => {
     const { intl } = this.props;
 
@@ -150,7 +132,7 @@ export class TagMappingsToolbarBase extends React.Component<TagMappingsToolbarPr
 
     return (
       <BasicToolbar
-        actions={this.getActions()}
+        actions={<TagMappingsWizard canWrite={canWrite} isDisabled={isDisabled} />}
         categoryOptions={categoryOptions}
         isAllSelected={isAllSelected}
         isDisabled={isDisabled}