Address feedback for MTV-1880

Signed-off-by: Jeff Puzzo <[email protected]>
kubev2v · Jan 24, 2025 · 5a32279 · 5a32279
1 parent da6e7df
commit 5a32279
Show file tree

Hide file tree

Showing 4 changed files with 33 additions and 22 deletions.
diff --git a/packages/forklift-console-plugin/src/modules/Plans/components/PlansAddButton.tsx b/packages/forklift-console-plugin/src/modules/Plans/components/PlansAddButton.tsx
@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { FC } from 'react';
 import { useHistory } from 'react-router';
 import { getResourceUrl } from 'src/modules/Providers/utils';
 import { useCreateVmMigrationData } from 'src/modules/Providers/views/migrate';
@@ -8,12 +8,12 @@ import { useForkliftTranslation } from 'src/utils/i18n';
 import { PlanModelRef } from '@kubev2v/types';
 import { Button } from '@patternfly/react-core';
 
-interface PlansAddButtonProps {
+type PlansAddButtonProps = {
   namespace?: string;
   dataTestId?: string;
-}
+};
 
-export const PlansAddButton: React.FC<PlansAddButtonProps> = ({ namespace, dataTestId }) => {
+export const PlansAddButton: FC<PlansAddButtonProps> = ({ namespace, dataTestId }) => {
   const { t } = useForkliftTranslation();
   const history = useHistory();
   const { setData } = useCreateVmMigrationData();

diff --git a/...ages/forklift-console-plugin/src/modules/Plans/views/create/components/PlanCreateForm.tsx b/...ages/forklift-console-plugin/src/modules/Plans/views/create/components/PlanCreateForm.tsx
@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { useCallback, useMemo } from 'react';
 import { ProjectNameSelect, useProjectNameSelectOptions } from 'src/components/common';
 import { SelectableCard } from 'src/modules/Providers/utils/components/Gallery/SelectableCard';
 import { SelectableGallery } from 'src/modules/Providers/utils/components/Gallery/SelectableGallery';
@@ -60,11 +60,17 @@ export const PlanCreateForm: React.FC<PlanCreateFormProps> = ({
   const { t } = useForkliftTranslation();
   const { data, setData } = useCreateVmMigrationData();
   const projectNameOptions = useProjectNameSelectOptions(projectName);
-  const providerCardItems = createProviderCardItems(
-    providers.filter((provider) => provider.metadata.namespace === projectName),
+  const providerCardItems = useMemo(
+    () =>
+      createProviderCardItems(
+        providers.filter((provider) => provider.metadata.namespace === projectName),
+      ),
+    [projectName, providers],
   );
+  const { selectedProviderUID: selectedProviderId } = filterState;
+  const selectedProviderCardItem = providerCardItems[selectedProviderId];
 
-  const onProviderChange = React.useCallback((id: string) => {
+  const onProviderChange = useCallback((id: string) => {
     filterDispatch({ type: 'SELECT_PROVIDER', payload: id || '' });
   }, []);
 
@@ -121,12 +127,12 @@ export const PlanCreateForm: React.FC<PlanCreateFormProps> = ({
             />
             <ChipsToolbarProviders filterState={filterState} filterDispatch={filterDispatch} />
 
-            {filterState.selectedProviderUID ? (
+            {selectedProviderId ? (
               <Flex>
                 <FlexItem className="forklift--create-provider-edit-card-selected">
                   <SelectableCard
-                    title={providerCardItems[filterState.selectedProviderUID]?.title}
-                    titleLogo={providerCardItems[filterState.selectedProviderUID]?.logo}
+                    title={selectedProviderCardItem.title}
+                    titleLogo={selectedProviderCardItem.logo}
                     onChange={() => onProviderChange('')}
                     isSelected
                     isCompact
@@ -148,7 +154,7 @@ export const PlanCreateForm: React.FC<PlanCreateFormProps> = ({
               </Flex>
             ) : (
               <SelectableGallery
-                selectedID={filterState.selectedProviderUID}
+                selectedID={selectedProviderId}
                 items={providerCardItems}
                 onChange={onProviderChange}
               />

diff --git a/...forklift-console-plugin/src/modules/Plans/views/create/components/ProvidersEmptyState.tsx b/...forklift-console-plugin/src/modules/Plans/views/create/components/ProvidersEmptyState.tsx
@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { FC } from 'react';
 import { ProvidersAddButton } from 'src/modules/Providers';
 import { ForkliftTrans, useForkliftTranslation } from 'src/utils';
 
@@ -12,11 +12,11 @@ import {
 } from '@patternfly/react-core';
 import SearchIcon from '@patternfly/react-icons/dist/esm/icons/search-icon';
 
-interface ProviderCardEmptyStateProps {
+type ProviderCardEmptyStateProps = {
   projectName: string;
-}
+};
 
-export const ProviderCardEmptyState: React.FC<ProviderCardEmptyStateProps> = ({ projectName }) => {
+export const ProviderCardEmptyState: FC<ProviderCardEmptyStateProps> = ({ projectName }) => {
   const { t } = useForkliftTranslation();
 
   return (

diff --git a/...orklift-console-plugin/src/modules/Providers/views/list/components/ProvidersAddButton.tsx b/...orklift-console-plugin/src/modules/Providers/views/list/components/ProvidersAddButton.tsx
@@ -1,18 +1,18 @@
-import React from 'react';
+import React, { FC } from 'react';
 import { useHistory } from 'react-router';
 import { getResourceUrl } from 'src/modules/Providers/utils';
 import { useForkliftTranslation } from 'src/utils/i18n';
 
 import { ProviderModelRef } from '@kubev2v/types';
-import { Button, ButtonProps } from '@patternfly/react-core';
+import { Button, ButtonProps, ButtonVariant } from '@patternfly/react-core';
 
-interface ProvidersAddButtonProps {
+type ProvidersAddButtonProps = {
   namespace?: string;
   dataTestId?: string;
   buttonProps?: ButtonProps;
-}
+};
 
-export const ProvidersAddButton: React.FC<ProvidersAddButtonProps> = ({
+export const ProvidersAddButton: FC<ProvidersAddButtonProps> = ({
   namespace,
   dataTestId,
   buttonProps,
@@ -31,7 +31,12 @@ export const ProvidersAddButton: React.FC<ProvidersAddButtonProps> = ({
   };
 
   return (
-    <Button data-testid={dataTestId} variant="primary" onClick={onClick} {...buttonProps}>
+    <Button
+      data-testid={dataTestId}
+      variant={ButtonVariant.primary}
+      onClick={onClick}
+      {...buttonProps}
+    >
       {t('Create Provider')}
     </Button>
   );