Merge pull request #3689 from dlabrecq/tag-mapping-empty-state

Added empty state
project-koku · Mar 7, 2024 · 4d9898c · 4d9898c
2 parents 62c4275 + 860118a
commit 4d9898c
Show file tree

Hide file tree

Showing 21 changed files with 165 additions and 43 deletions.
diff --git a/locales/data.json b/locales/data.json
@@ -10205,6 +10205,36 @@
         "value": "There are no export files available"
       }
     ],
+    "noMappedTags": [
+      {
+        "type": 0,
+        "value": "No mapped tags"
+      }
+    ],
+    "noMappedTagsDesc": [
+      {
+        "type": 0,
+        "value": "Map multiple tags across data sources to be used as a single tag key for report grouping and filtering. "
+      },
+      {
+        "type": 1,
+        "value": "warning"
+      },
+      {
+        "type": 0,
+        "value": " Changes will be reflected within 24 hours. "
+      },
+      {
+        "type": 1,
+        "value": "learnMore"
+      }
+    ],
+    "noMappedTagsWarning": [
+      {
+        "type": 0,
+        "value": "Tags must be enabled to be mapped."
+      }
+    ],
     "noOptimizationsDesc": [
       {
         "type": 0,

diff --git a/locales/translations.json b/locales/translations.json
@@ -374,6 +374,9 @@
   "noDataStateRefresh": "Refresh this page",
   "noDataStateTitle": "Still processing the data",
   "noExportsStateTitle": "There are no export files available",
+  "noMappedTags": "No mapped tags",
+  "noMappedTagsDesc": "Map multiple tags across data sources to be used as a single tag key for report grouping and filtering. {warning} Changes will be reflected within 24 hours. {learnMore}",
+  "noMappedTagsWarning": "Tags must be enabled to be mapped.",
   "noOptimizationsDesc": "Resource Optimization is now available in preview for select customers. If your organization wants to participate, tell us through the Feedback button, which is purple and located on the right. Otherwise, there is not enough data available to generate an optimization.",
   "noOptimizationsTitle": "No optimizations available",
   "noProvidersStateAwsDesc": "Add an Amazon Web Services account to see a total cost breakdown of your spend by accounts, organizational units, services, regions, or tags.",

diff --git a/src/api/settings.ts b/src/api/settings.ts
@@ -40,6 +40,7 @@ export const enum SettingsType {
   tags = 'tags',
   tagsEnable = 'tagsEnable',
   tagsDisable = 'tagsDisable',
+  tagsMappings = 'tagsMappings',
 }
 
 export const SettingsTypePaths: Partial<Record<SettingsType, string>> = {
@@ -52,6 +53,7 @@ export const SettingsTypePaths: Partial<Record<SettingsType, string>> = {
   [SettingsType.tags]: 'settings/tags',
   [SettingsType.tagsEnable]: 'settings/tags/enable/',
   [SettingsType.tagsDisable]: 'settings/tags/disable/',
+  [SettingsType.tagsMappings]: 'settings/tags/mappings',
 };
 
 export function fetchSettings(settingsType: SettingsType, query: string) {

diff --git a/src/locales/messages.ts b/src/locales/messages.ts
@@ -2418,6 +2418,23 @@ export default defineMessages({
     description: 'There are no export files available',
     id: 'noExportsStateTitle',
   },
+  noMappedTags: {
+    defaultMessage: 'No mapped tags',
+    description: 'No mapped tags',
+    id: 'noMappedTags',
+  },
+  noMappedTagsDesc: {
+    defaultMessage:
+      'Map multiple tags across data sources to be used as a single tag key for report grouping and filtering. {warning} Changes will be reflected within 24 hours. {learnMore}',
+    description:
+      'Map multiple tags across data sources to be used as a single tag key for report grouping and filtering. {warning} Changes will be reflected within 24 hours. {learnMore}',
+    id: 'noMappedTagsDesc',
+  },
+  noMappedTagsWarning: {
+    defaultMessage: 'Tags must be enabled to be mapped.',
+    description: 'Tags must be enabled to be mapped.',
+    id: 'noMappedTagsWarning',
+  },
   noOptimizationsDesc: {
     defaultMessage:
       'Resource Optimization is now available in preview for select customers. If your organization wants to participate, tell us through the Feedback button, which is purple and located on the right.  Otherwise, there is not enough data available to generate an optimization.',

diff --git a/src/routes/components/page/noData/noDataState.tsx b/src/routes/components/page/noData/noDataState.tsx
@@ -26,7 +26,7 @@ class NoDataStateBase extends React.Component<NoDataStateProps, any> {
     return (
       <EmptyState variant={EmptyStateVariant.lg} className="pf-m-redhat-font">
         <EmptyStateHeader
-          titleText={<>{intl.formatMessage(messages.noDataStateTitle)}</>}
+          titleText={intl.formatMessage(messages.noDataStateTitle)}
           icon={<EmptyStateIcon icon={PlusCircleIcon} />}
           headingLevel="h5"
         />

diff --git a/src/routes/components/page/noOptimizations/noOptimizationsState.tsx b/src/routes/components/page/noOptimizations/noOptimizationsState.tsx
@@ -24,7 +24,7 @@ class NoOptimizationsStateBase extends React.Component<NoOptimizationsStateProps
     return (
       <EmptyState variant={EmptyStateVariant.lg} className="pf-m-redhat-font">
         <EmptyStateHeader
-          titleText={<>{intl.formatMessage(messages.noOptimizationsTitle)}</>}
+          titleText={intl.formatMessage(messages.noOptimizationsTitle)}
           icon={<EmptyStateIcon icon={OptimizationIcon as any} />}
           headingLevel="h1"
         />

diff --git a/src/routes/components/page/noProviders/noProvidersState.tsx b/src/routes/components/page/noProviders/noProvidersState.tsx
@@ -84,7 +84,7 @@ class NoProvidersStateBase extends React.Component<NoProvidersStateProps, any> {
     return (
       <EmptyState variant={EmptyStateVariant.lg} className="pf-m-redhat-font">
         <EmptyStateHeader
-          titleText={<>{intl.formatMessage(titleKey)}</>}
+          titleText={intl.formatMessage(titleKey)}
           icon={<EmptyStateIcon icon={icon ? icon : PlusCircleIcon} />}
           headingLevel="h1"
         />

diff --git a/src/routes/components/state/emptyFilterState/emptyFilterState.tsx b/src/routes/components/state/emptyFilterState/emptyFilterState.tsx
@@ -114,7 +114,7 @@ const EmptyFilterStateBase: React.FC<EmptyFilterStateProps> = ({
     >
       <EmptyState>
         {getItem()}
-        <EmptyStateHeader titleText={<>{intl.formatMessage(title)}</>} headingLevel="h2" />
+        <EmptyStateHeader titleText={intl.formatMessage(title)} headingLevel="h2" />
         <EmptyStateBody>{intl.formatMessage(subTitle)}</EmptyStateBody>
       </EmptyState>
     </div>

diff --git a/src/routes/components/state/errorState/errorState.tsx b/src/routes/components/state/errorState/errorState.tsx
@@ -30,7 +30,7 @@ const ErrorStateBase: React.FC<ErrorStateProps> = ({ error, icon = ErrorCircleOI
 
   return (
     <EmptyState variant={EmptyStateVariant.lg} className="pf-m-redhat-font">
-      <EmptyStateHeader titleText={<>{title}</>} icon={<EmptyStateIcon icon={icon} />} headingLevel="h5" />
+      <EmptyStateHeader titleText={title} icon={<EmptyStateIcon icon={icon} />} headingLevel="h5" />
       <EmptyStateBody>{subTitle}</EmptyStateBody>
     </EmptyState>
   );

diff --git a/src/routes/components/state/loadingState/loadingState.tsx b/src/routes/components/state/loadingState/loadingState.tsx
@@ -20,7 +20,7 @@ const LoadingStateBase: React.FC<LoadingStateProps> = ({
   return (
     <EmptyState variant={EmptyStateVariant.lg} className="pf-m-redhat-font">
       <Spinner size="lg" />
-      <EmptyStateHeader titleText={<>{heading}</>} headingLevel="h5" />
+      <EmptyStateHeader titleText={heading} headingLevel="h5" />
       <EmptyStateBody>{body}</EmptyStateBody>
     </EmptyState>
   );

diff --git a/src/routes/settings/costModels/components/errorState.tsx b/src/routes/settings/costModels/components/errorState.tsx
@@ -34,7 +34,7 @@ export const ErrorState: React.FC<ErrorStateProps> = ({ variant, actionButton, t
   return (
     <EmptyState variant={variant}>
       <EmptyStateHeader
-        titleText={<>{title}</>}
+        titleText={title}
         icon={<EmptyStateIcon icon={ExclamationCircleIcon} color={global_DangerColor_100.value} />}
         headingLevel="h4"
       />

diff --git a/src/routes/settings/costModels/costModel/costModelInfo.tsx b/src/routes/settings/costModels/costModel/costModelInfo.tsx
@@ -93,7 +93,7 @@ class CostModelInfo extends React.Component<CostModelInfoProps, CostModelInfoSta
               <PageSection>
                 <EmptyState>
                   <EmptyStateHeader
-                    titleText={<>{intl.formatMessage(messages.costModelsUUIDEmptyState)}</>}
+                    titleText={intl.formatMessage(messages.costModelsUUIDEmptyState)}
                     icon={<EmptyStateIcon icon={ErrorCircleOIcon} />}
                     headingLevel="h2"
                   />

diff --git a/src/routes/settings/costModels/costModel/priceListTable.tsx b/src/routes/settings/costModels/costModel/priceListTable.tsx
@@ -293,7 +293,7 @@ class PriceListTable extends React.Component<PriceListTableProps, PriceListTable
                     <Bullseye>
                       <EmptyState>
                         <EmptyStateHeader
-                          titleText={<>{intl.formatMessage(messages.priceListEmptyRate)}</>}
+                          titleText={intl.formatMessage(messages.priceListEmptyRate)}
                           icon={<EmptyStateIcon icon={PlusCircleIcon} />}
                           headingLevel="h2"
                         />

diff --git a/src/routes/settings/costModels/costModel/table.tsx b/src/routes/settings/costModels/costModel/table.tsx
@@ -126,7 +126,7 @@ class TableBase extends React.Component<TableBaseProps, TableBaseState> {
           <div style={styles.emptyState}>
             <EmptyState>
               <EmptyStateHeader
-                titleText={<>{intl.formatMessage(messages.costModelsSourceEmptyStateDesc)}</>}
+                titleText={intl.formatMessage(messages.costModelsSourceEmptyStateDesc)}
                 icon={<EmptyStateIcon icon={PlusCircleIcon} />}
                 headingLevel="h2"
               />

diff --git a/src/routes/settings/costModels/costModelWizard/priceListTable.tsx b/src/routes/settings/costModels/costModelWizard/priceListTable.tsx
@@ -94,7 +94,7 @@ class PriceListTable extends React.Component<PriceListTableProps, PriceListTable
       <Bullseye>
         <EmptyState>
           <EmptyStateHeader
-            titleText={<>{intl.formatMessage(messages.costModelsWizardEmptyStateTitle)}</>}
+            titleText={intl.formatMessage(messages.costModelsWizardEmptyStateTitle)}
             icon={<EmptyStateIcon icon={PlusCircleIcon} />}
             headingLevel="h2"
           />

diff --git a/src/routes/settings/costModels/costModelWizard/review.tsx b/src/routes/settings/costModels/costModelWizard/review.tsx
@@ -36,7 +36,7 @@ const ReviewSuccessBase: React.FC<WrappedComponentProps> = ({ intl }) => (
     {({ onClose, name }) => (
       <EmptyState>
         <EmptyStateHeader
-          titleText={<>{intl.formatMessage(messages.costModelsWizardReviewStatusTitle)}</>}
+          titleText={intl.formatMessage(messages.costModelsWizardReviewStatusTitle)}
           icon={
             <Icon status="success">
               <EmptyStateIcon icon={OkIcon} />

diff --git a/src/routes/settings/costModels/costModelsDetails/emptyStateBase.tsx b/src/routes/settings/costModels/costModelsDetails/emptyStateBase.tsx
@@ -11,7 +11,7 @@ interface EmptyStateBaseProps {
 function EmptyStateBase(props: EmptyStateBaseProps): JSX.Element {
   return (
     <EmptyState className="pf-m-redhat-font">
-      <EmptyStateHeader titleText={<>{props.title}</>} icon={<EmptyStateIcon icon={props.icon} />} headingLevel="h2" />
+      <EmptyStateHeader titleText={props.title} icon={<EmptyStateIcon icon={props.icon} />} headingLevel="h2" />
       <EmptyStateBody>{props.description}</EmptyStateBody>
       <EmptyStateFooter>{props.actions ? props.actions : null}</EmptyStateFooter>
     </EmptyState>

diff --git a/src/routes/settings/tagLabels/tagMappings/tagMappings.styles.ts b/src/routes/settings/tagLabels/tagMappings/tagMappings.styles.ts
@@ -6,6 +6,9 @@ export const styles = {
   action: {
     marginLeft: global_spacer_md.var,
   },
+  emptyStateContainer: {
+    paddingTop: global_spacer_md.value,
+  },
   pagination: {
     backgroundColor: global_BackgroundColor_light_100.value,
     paddingBottom: global_spacer_md.value,

diff --git a/src/routes/settings/tagLabels/tagMappings/tagMappings.tsx b/src/routes/settings/tagLabels/tagMappings/tagMappings.tsx
@@ -1,3 +1,4 @@
+import Unavailable from '@patternfly/react-component-groups/dist/esm/UnavailableContent';
 import { Pagination, PaginationVariant } from '@patternfly/react-core';
 import type { Query } from 'api/queries/query';
 import { getQuery } from 'api/queries/query';
@@ -10,14 +11,14 @@ import { useIntl } from 'react-intl';
 import { useDispatch, useSelector } from 'react-redux';
 import type { AnyAction } from 'redux';
 import type { ThunkDispatch } from 'redux-thunk';
-import { NotAvailable } from 'routes/components/page/notAvailable';
 import { LoadingState } from 'routes/components/state/loadingState';
 import * as queryUtils from 'routes/utils/query';
 import type { RootState } from 'store';
 import { FetchStatus } from 'store/common';
 import { settingsActions, settingsSelectors } from 'store/settings';
 
 import { styles } from './tagMappings.styles';
+import { TagMappingsEmptyState } from './tagMappingsEmptyState';
 import { TagMappingsTable } from './tagMappingsTable';
 import { TagMappingsToolbar } from './tagMappingsToolbar';
 
@@ -43,7 +44,7 @@ const baseQuery: Query = {
   offset: 0,
   filter_by: {},
   order_by: {
-    key: 'asc',
+    parent: 'asc',
   },
 };
 
@@ -100,14 +101,14 @@ const TagMappings: React.FC<MappingsProps> = ({ canWrite }) => {
     );
   };
 
-  const getToolbar = (tags: SettingsData[]) => {
+  const getToolbar = (mappings: SettingsData[]) => {
     const itemsTotal = settings?.meta ? settings.meta.count : 0;
 
     return (
       <TagMappingsToolbar
         canWrite={canWrite}
-        isDisabled={tags.length === 0}
-        itemsPerPage={tags.length}
+        isDisabled={mappings.length === 0}
+        itemsPerPage={mappings.length}
         itemsTotal={itemsTotal}
         onCreateTagMapping={handleOnCreateTagMapping}
         onFilterAdded={filter => handleOnFilterAdded(filter)}
@@ -148,11 +149,12 @@ const TagMappings: React.FC<MappingsProps> = ({ canWrite }) => {
   };
 
   if (settingsError) {
-    return <NotAvailable />;
+    return <Unavailable />;
   }
 
-  const tags = getMappings();
-  const isDisabled = tags.length === 0;
+  const mappings = getMappings();
+  const isDisabled = mappings.length === 0;
+  const hasMappings = mappings.length > 0 && !Object.keys(query.filter_by).length; // no filter applied
 
   return (
     <>
@@ -166,14 +168,18 @@ const TagMappings: React.FC<MappingsProps> = ({ canWrite }) => {
           warning: <b>{intl.formatMessage(messages.tagMappingWarning)}</b>,
         })}
       </div>
-      {getToolbar(tags)}
+      {hasMappings && getToolbar(mappings)}
       {settingsStatus === FetchStatus.inProgress ? (
         <LoadingState />
-      ) : (
+      ) : hasMappings ? (
         <>
           {getTable()}
           <div style={styles.pagination}>{getPagination(isDisabled, true)}</div>
         </>
+      ) : (
+        <div style={styles.emptyStateContainer}>
+          <TagMappingsEmptyState canWrite={canWrite} onCreateTagMapping={handleOnCreateTagMapping} />
+        </div>
       )}
     </>
   );
@@ -191,32 +197,20 @@ const useMapToProps = ({ query }: MappingsMapProps): MappingsStateProps => {
   };
   const settingsQueryString = getQuery(settingsQuery);
   const settings = useSelector((state: RootState) =>
-    settingsSelectors.selectSettings(state, SettingsType.tags, settingsQueryString)
+    settingsSelectors.selectSettings(state, SettingsType.tagsMappings, settingsQueryString)
   );
   const settingsStatus = useSelector((state: RootState) =>
-    settingsSelectors.selectSettingsStatus(state, SettingsType.tags, settingsQueryString)
+    settingsSelectors.selectSettingsStatus(state, SettingsType.tagsMappings, settingsQueryString)
   );
   const settingsError = useSelector((state: RootState) =>
-    settingsSelectors.selectSettingsError(state, SettingsType.tags, settingsQueryString)
-  );
-
-  const settingsUpdateDisableStatus = useSelector((state: RootState) =>
-    settingsSelectors.selectSettingsUpdateStatus(state, SettingsType.tagsDisable)
-  );
-  const settingsUpdateEnableStatus = useSelector((state: RootState) =>
-    settingsSelectors.selectSettingsUpdateStatus(state, SettingsType.tagsEnable)
+    settingsSelectors.selectSettingsError(state, SettingsType.tagsMappings, settingsQueryString)
   );
 
   useEffect(() => {
-    if (
-      !settingsError &&
-      settingsStatus !== FetchStatus.inProgress &&
-      settingsUpdateDisableStatus !== FetchStatus.inProgress &&
-      settingsUpdateEnableStatus !== FetchStatus.inProgress
-    ) {
-      dispatch(settingsActions.fetchSettings(SettingsType.tags, settingsQueryString));
+    if (!settingsError && settingsStatus !== FetchStatus.inProgress) {
+      dispatch(settingsActions.fetchSettings(SettingsType.tagsMappings, settingsQueryString));
     }
-  }, [query, settingsUpdateDisableStatus, settingsUpdateEnableStatus]);
+  }, [query]);
 
   return {
     settings,