Merge pull request #569 from yaacov/align-all-empty-states-to-use-tab…

…le-custom-empty-state Align all empty states to use customNoResultsFound
kubev2v · Jul 17, 2023 · 128aaa8 · 128aaa8
2 parents a560968 + cc5ff67
commit 128aaa8
Show file tree

Hide file tree

Showing 6 changed files with 18 additions and 44 deletions.
diff --git a/packages/forklift-console-plugin/locales/en/plugin__forklift-console-plugin.json b/packages/forklift-console-plugin/locales/en/plugin__forklift-console-plugin.json
@@ -137,7 +137,7 @@
   "Maximum number of concurrent VM migrations. Default value is 20.": "Maximum number of concurrent VM migrations. Default value is 20.",
   "Message": "Message",
   "Message: {{message}}": "Message: {{message}}",
-  "Migrating virtualization workloads is a multi-step process:": "Migrating virtualization workloads is a multi-step process:",
+  "Migrating virtualization workloads is a multi-step process. <2>Learn more</2>.": "Migrating virtualization workloads is a multi-step process. <2>Learn more</2>.",
   "Migration network maps are used to map network interfaces between source and target virtualization providers, at least one source and one target provider must be available in order to create a migration storage map, <2>Learn more</2>.": "Migration network maps are used to map network interfaces between source and target virtualization providers, at least one source and one target provider must be available in order to create a migration storage map, <2>Learn more</2>.",
   "Migration networks maps are used to map network interfaces between source and target workloads.": "Migration networks maps are used to map network interfaces between source and target workloads.",
   "Migration plans": "Migration plans",

diff --git a/packages/forklift-console-plugin/src/modules/NetworkMaps/NetworkMappingsPage.tsx b/packages/forklift-console-plugin/src/modules/NetworkMaps/NetworkMappingsPage.tsx
@@ -10,7 +10,6 @@ import { ResourceConsolePageProps } from 'src/utils/types';
 
 import { FreetextFilter } from '@kubev2v/common';
 import { ValueMatcher } from '@kubev2v/common';
-import { LoadingDots } from '@kubev2v/common';
 import { loadUserSettings, UserSettings } from '@kubev2v/common';
 import { withQueryClient } from '@kubev2v/common';
 import { ResourceFieldFactory } from '@kubev2v/common';
@@ -75,18 +74,6 @@ const Page = ({
 }) => {
   const { t } = useForkliftTranslation();
 
-  const [data, isLoadSuccess, isLoadError] = dataSource;
-  const isLoading = !isLoadSuccess && !isLoadError;
-  const loadedDataIsEmpty = isLoadSuccess && !isLoadError && (data?.length ?? 0) === 0;
-
-  if (isLoading) {
-    return <LoadingDots />;
-  }
-
-  if (loadedDataIsEmpty) {
-    return <EmptyStateNetworkMaps namespace={namespace} />;
-  }
-
   return (
     <StandardPage<FlatNetworkMapping>
       addButton={<AddNetworkMappingButton namespace={namespace} />}
@@ -101,6 +88,7 @@ const Page = ({
         targetNetwork: FreetextFilter,
       }}
       extraSupportedMatchers={[targetNetworkMatcher]}
+      customNoResultsFound={<EmptyStateNetworkMaps namespace={namespace} />}
     />
   );
 };

diff --git a/packages/forklift-console-plugin/src/modules/Overview/views/overview/OverviewPage.style.css b/packages/forklift-console-plugin/src/modules/Overview/views/overview/OverviewPage.style.css
@@ -11,8 +11,8 @@
 }
 
 .forklift-welcome__icon {
-    max-width: 14rem;
-    max-height: 14rem;
+    max-width: 18rem;
+    max-height: 18rem;
     padding-right:  var(--pf-global--spacer--lg);
   }
 

diff --git a/packages/forklift-console-plugin/src/modules/Plans/PlansPage.tsx b/packages/forklift-console-plugin/src/modules/Plans/PlansPage.tsx
@@ -6,7 +6,6 @@ import { useForkliftTranslation } from 'src/utils/i18n';
 import { ResourceConsolePageProps } from 'src/utils/types';
 
 import { EnumToTuple } from '@kubev2v/common';
-import { LoadingDots } from '@kubev2v/common';
 import { loadUserSettings, UserSettings } from '@kubev2v/common';
 import { ResourceFieldFactory } from '@kubev2v/common';
 import { MustGatherModal } from '@kubev2v/legacy/common/components/MustGatherModal';
@@ -134,18 +133,6 @@ const Page = ({
 }) => {
   const { t } = useForkliftTranslation();
 
-  const [data, isLoadSuccess, isLoadError] = dataSource;
-  const isLoading = !isLoadSuccess && !isLoadError;
-  const loadedDataIsEmpty = isLoadSuccess && !isLoadError && (data?.length ?? 0) === 0;
-
-  if (isLoading) {
-    return <LoadingDots />;
-  }
-
-  if (loadedDataIsEmpty) {
-    return <EmptyStatePlans namespace={namespace} />;
-  }
-
   return (
     <>
       <StandardPage<FlatPlan>
@@ -156,6 +143,7 @@ const Page = ({
         namespace={namespace}
         title={title}
         userSettings={userSettings}
+        customNoResultsFound={<EmptyStatePlans namespace={namespace} />}
       />
       <MustGatherModal />
     </>

diff --git a/...rklift-console-plugin/src/modules/Providers/views/list/components/ProvidersEmptyState.tsx b/...rklift-console-plugin/src/modules/Providers/views/list/components/ProvidersEmptyState.tsx
@@ -1,6 +1,9 @@
 import React, { ComponentType, ReactNode } from 'react';
+import { Trans } from 'react-i18next';
+import { HELP_LINK_HREF } from 'src/utils/constants';
 import { useForkliftTranslation } from 'src/utils/i18n';
 
+import { ExternalLink } from '@kubev2v/common';
 import {
   Bullseye,
   EmptyState,
@@ -41,8 +44,15 @@ export const ProvidersEmptyState: React.FC<ProvidersEmptyStateProps> = ({
                 <Title headingLevel="h4" size="lg">
                   {title}
                 </Title>
-
-                <Text>{t('Migrating virtualization workloads is a multi-step process:')}</Text>
+                <Text>
+                  <Trans>
+                    Migrating virtualization workloads is a multi-step process.{' '}
+                    <ExternalLink href={HELP_LINK_HREF} isInline>
+                      Learn more
+                    </ExternalLink>
+                    .
+                  </Trans>
+                </Text>
                 <TextList component="ol">
                   <TextListItem>
                     {t('Add source and target providers for the migration.')}

diff --git a/packages/forklift-console-plugin/src/modules/StorageMaps/StorageMappingsPage.tsx b/packages/forklift-console-plugin/src/modules/StorageMaps/StorageMappingsPage.tsx
@@ -11,7 +11,6 @@ import { ResourceConsolePageProps } from 'src/utils/types';
 
 import { FreetextFilter } from '@kubev2v/common';
 import { ValueMatcher } from '@kubev2v/common';
-import { LoadingDots } from '@kubev2v/common';
 import { loadUserSettings } from '@kubev2v/common';
 import { ResourceFieldFactory } from '@kubev2v/common';
 import { MappingType } from '@kubev2v/legacy/queries/types';
@@ -67,18 +66,6 @@ const Page = ({
 }: Partial<StandardPageProps<FlatStorageMapping>>) => {
   const { t } = useForkliftTranslation();
 
-  const [data, isLoadSuccess, isLoadError] = dataSource;
-  const isLoading = !isLoadSuccess && !isLoadError;
-  const loadedDataIsEmpty = isLoadSuccess && !isLoadError && (data?.length ?? 0) === 0;
-
-  if (isLoading) {
-    return <LoadingDots />;
-  }
-
-  if (loadedDataIsEmpty) {
-    return <EmptyStateStorageMaps namespace={namespace} />;
-  }
-
   return (
     <StandardPage<FlatStorageMapping>
       addButton={
@@ -97,6 +84,7 @@ const Page = ({
       userSettings={userSettings}
       extraSupportedFilters={{ targetStorage: FreetextFilter }}
       extraSupportedMatchers={[targetStorageMatcher]}
+      customNoResultsFound={<EmptyStateStorageMaps namespace={namespace} />}
     />
   );
 };