Add icons to the plan list action buttons

Reference: #1058 Add icons next to labels for the following action buttons in the plan list page: Start, Restart, Cutover Signed-off-by: Sharon Gratch <sgratch@redhat.com>
kubev2v · Apr 11, 2024 · a196438 · a196438
1 parent bc8a5ae
commit a196438
Show file tree

Hide file tree

Showing 2 changed files with 23 additions and 1 deletion.
diff --git a/packages/forklift-console-plugin/src/modules/Plans/views/list/PlansListPage.style.css b/packages/forklift-console-plugin/src/modules/Plans/views/list/PlansListPage.style.css
@@ -20,3 +20,12 @@
 .forklift-table__status-cell-progress div {
   grid-gap: var(--pf-global--spacer--xs);
 }
+
+.forklift-providers-list-buttons__icon {
+  font-size: smaller;
+}
+
+.forklift-providers-list-buttons {
+  min-width: 98px;
+  text-align: left;
+}
diff --git a/packages/forklift-console-plugin/src/modules/Plans/views/list/components/ActionsCell.tsx b/packages/forklift-console-plugin/src/modules/Plans/views/list/components/ActionsCell.tsx
@@ -7,6 +7,9 @@ import { useForkliftTranslation } from 'src/utils/i18n';
 
 import { PlanModel } from '@kubev2v/types';
 import { Button, Flex, FlexItem } from '@patternfly/react-core';
+import CutoverIcon from '@patternfly/react-icons/dist/esm/icons/migration-icon';
+import StartIcon from '@patternfly/react-icons/dist/esm/icons/play-icon';
+import ReStartIcon from '@patternfly/react-icons/dist/esm/icons/redo-icon';
 
 import { CellProps } from './CellProps';
 
@@ -21,7 +24,13 @@ export const ActionsCell = ({ data }: CellProps) => {
 
   const isWarmAndExecuting = plan?.spec?.warm && isPlanExecuting(plan);
 
-  const buttonStartLabel = canReStart ? t('Restart') : t('start');
+  const buttonStartLabel = canReStart ? t('Restart') : t('Start');
+  const buttonStartIcon = canReStart ? (
+    <ReStartIcon className="forklift-providers-list-buttons__icon" />
+  ) : (
+    <StartIcon className="forklift-providers-list-buttons__icon" />
+  );
+  const buttonCutoverIcon = <CutoverIcon className="forklift-providers-list-buttons__icon" />;
 
   return (
     <Flex flex={{ default: 'flex_3' }} flexWrap={{ default: 'nowrap' }}>
@@ -30,7 +39,9 @@ export const ActionsCell = ({ data }: CellProps) => {
       {canStart && (
         <FlexItem align={{ default: 'alignRight' }}>
           <Button
+            className="forklift-providers-list-buttons"
             variant="secondary"
+            icon={buttonStartIcon}
             onClick={() =>
               showModal(
                 <PlanStartMigrationModal
@@ -49,7 +60,9 @@ export const ActionsCell = ({ data }: CellProps) => {
       {isWarmAndExecuting && (
         <FlexItem align={{ default: 'alignRight' }}>
           <Button
+            className="forklift-providers-list-buttons"
             variant="secondary"
+            icon={buttonCutoverIcon}
             onClick={() => showModal(<PlanCutoverMigrationModal resource={data.obj} />)}
           >
             {t('Cutover')}