Merge pull request #673 from yaacov/align-create-buttons-rules

Align create button logic with empty state
kubev2v · Aug 9, 2023 · c26cfbd · c26cfbd
2 parents 0f6f4bc + 437c6c4
commit c26cfbd
Show file tree

Hide file tree

Showing 4 changed files with 70 additions and 18 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
@@ -46,6 +46,7 @@
   "Create by using the form or manually entering YAML or JSON definitions, Provider CR stores attributes that enable MTV to connect to and interact with the source and target providers.": "Create by using the form or manually entering YAML or JSON definitions, Provider CR stores attributes that enable MTV to connect to and interact with the source and target providers.",
   "Create NetworkMap": "Create NetworkMap",
   "Create new provider": "Create new provider",
+  "Create plan": "Create plan",
   "Create provider": "Create provider",
   "Create Provider": "Create Provider",
   "Create StorageMap": "Create StorageMap",

diff --git a/packages/forklift-console-plugin/src/components/mappings/MappingPage.tsx b/packages/forklift-console-plugin/src/components/mappings/MappingPage.tsx
@@ -1,4 +1,6 @@
 import React from 'react';
+import { ConditionalTooltip } from 'legacy/src/common/components/ConditionalTooltip';
+import { useHasSufficientProviders } from 'src/modules/Plans/data';
 import * as C from 'src/utils/constants';
 import { MAPPING_STATUS } from 'src/utils/enums';
 
@@ -19,19 +21,27 @@ export const AddMappingButton: React.FC<{
 }> = ({ namespace, label, mappingType }) => {
   const launchModal = useModal();
 
+  const hasSufficientProviders = useHasSufficientProviders(namespace);
+
   return (
-    <Button
-      variant="primary"
-      onClick={() =>
-        launchModal(withQueryClient(AddMappingModal), {
-          currentNamespace: namespace,
-          label,
-          mappingType,
-        })
-      }
+    <ConditionalTooltip
+      isTooltipEnabled={!hasSufficientProviders}
+      content={`You must add at least one source and one target provider in order to create a mapping.`}
     >
-      {label}
-    </Button>
+      <Button
+        variant="primary"
+        isAriaDisabled={!hasSufficientProviders}
+        onClick={() =>
+          launchModal(withQueryClient(AddMappingModal), {
+            currentNamespace: namespace,
+            label,
+            mappingType,
+          })
+        }
+      >
+        {label}
+      </Button>
+    </ConditionalTooltip>
   );
 };
 AddMappingButton.displayName = 'AddMappingButton';

diff --git a/packages/forklift-console-plugin/src/modules/NetworkMaps/NetworkMappingsPage.tsx b/packages/forklift-console-plugin/src/modules/NetworkMaps/NetworkMappingsPage.tsx
@@ -1,4 +1,5 @@
 import React, { useState } from 'react';
+import { ConditionalTooltip } from 'legacy/src/common/components/ConditionalTooltip';
 import {
   commonFieldsMetadataFactory,
   StartWithEmptyColumnMapper,
@@ -19,6 +20,8 @@ import { NetworkMapModel } from '@kubev2v/types';
 import { useAccessReview, useModal } from '@openshift-console/dynamic-plugin-sdk';
 import { Button } from '@patternfly/react-core';
 
+import { useHasSufficientProviders } from '../Plans/data';
+
 import { FlatNetworkMapping, Network, useFlatNetworkMappings } from './dataForNetwork';
 import EmptyStateNetworkMaps from './EmptyStateNetworkMaps';
 import NetworkMappingRow from './NetworkMappingRow';
@@ -110,13 +113,23 @@ export const AddNetworkMappingButton: React.FC<{ namespace: string }> = ({ names
   const { t } = useForkliftTranslation();
   const launchModal = useModal();
 
+  const hasSufficientProviders = useHasSufficientProviders(namespace);
+
   return (
-    <Button
-      variant="primary"
-      onClick={() => launchModal(withQueryClient(AddMappingModal), { currentNamespace: namespace })}
+    <ConditionalTooltip
+      isTooltipEnabled={!hasSufficientProviders}
+      content={`You must add at least one source and one target provider in order to create a mapping.`}
     >
-      {t('Create NetworkMap')}
-    </Button>
+      <Button
+        variant="primary"
+        isAriaDisabled={!hasSufficientProviders}
+        onClick={() =>
+          launchModal(withQueryClient(AddMappingModal), { currentNamespace: namespace })
+        }
+      >
+        {t('Create NetworkMap')}
+      </Button>
+    </ConditionalTooltip>
   );
 };
 AddNetworkMappingButton.displayName = 'AddNetworkMappingButton';

diff --git a/packages/forklift-console-plugin/src/modules/Plans/PlansPage.tsx b/packages/forklift-console-plugin/src/modules/Plans/PlansPage.tsx
@@ -1,4 +1,7 @@
 import React, { useState } from 'react';
+import { useHistory } from 'react-router-dom';
+import { ConditionalTooltip } from 'legacy/src/common/components/ConditionalTooltip';
+import { ENV, PATH_PREFIX } from 'legacy/src/common/constants';
 import StandardPage from 'src/components/page/StandardPage';
 import * as C from 'src/utils/constants';
 import { PLAN_STATUS_FILTER } from 'src/utils/enums';
@@ -9,11 +12,11 @@ import { EnumToTuple } from '@kubev2v/common';
 import { loadUserSettings, UserSettings } from '@kubev2v/common';
 import { ResourceFieldFactory } from '@kubev2v/common';
 import { MustGatherModal } from '@kubev2v/legacy/common/components/MustGatherModal';
-import { CreatePlanButton } from '@kubev2v/legacy/Plans/components/CreatePlanButton';
 import { PlanModel } from '@kubev2v/types';
 import { useAccessReview } from '@openshift-console/dynamic-plugin-sdk';
+import { Button } from '@patternfly/react-core';
 
-import { FlatPlan, useFlatPlans } from './data';
+import { FlatPlan, useFlatPlans, useHasSufficientProviders } from './data';
 import EmptyStatePlans from './EmptyStatePlans';
 import PlanRow from './PlanRow';
 
@@ -130,6 +133,31 @@ export const PlansPage = ({ namespace }: ResourceConsolePageProps) => {
 };
 PlansPage.displayName = 'PlansPage';
 
+export const CreatePlanButton: React.FC<{ namespace: string }> = ({ namespace }) => {
+  const { t } = useForkliftTranslation();
+  const history = useHistory();
+  const hasSufficientProviders = useHasSufficientProviders(namespace);
+
+  return (
+    <ConditionalTooltip
+      isTooltipEnabled={!hasSufficientProviders}
+      content={`You must add at least one source and one target provider in order to create a mapping.`}
+    >
+      <Button
+        onClick={() =>
+          history.push(`${PATH_PREFIX}/plans/ns/${namespace || ENV.DEFAULT_NAMESPACE}/create`)
+        }
+        isAriaDisabled={!hasSufficientProviders}
+        variant="primary"
+        id="create-plan-button"
+      >
+        {t('Create plan')}
+      </Button>
+    </ConditionalTooltip>
+  );
+};
+CreatePlanButton.displayName = 'CreatePlanButton';
+
 const Page = ({
   dataSource,
   namespace,