From 04131c4823780ab6af341195eb0f7e24933405ce Mon Sep 17 00:00:00 2001
From: Ondrej Ezr <oezr@redhat.com>
Date: Wed, 17 Apr 2024 08:33:41 +0200
Subject: [PATCH] Blueprints: selected Blueprint Empty state action

Add action in the Images Table empty state when Blueprint is selected.
Change the icon to plus as it better underlines the action needed to remedy.
---
 src/Components/Blueprints/BuildImagesButton.tsx | 15 ++++++++++++---
 src/Components/ImagesTable/EmptyState.tsx       | 16 ++++++++++++----
 2 files changed, 24 insertions(+), 7 deletions(-)

diff --git a/src/Components/Blueprints/BuildImagesButton.tsx b/src/Components/Blueprints/BuildImagesButton.tsx
index f31e6699..c8d2683b 100644
--- a/src/Components/Blueprints/BuildImagesButton.tsx
+++ b/src/Components/Blueprints/BuildImagesButton.tsx
@@ -1,12 +1,20 @@
 import React from 'react';
 
-import { Button } from '@patternfly/react-core';
+import { Button, ButtonProps } from '@patternfly/react-core';
 
 import { selectSelectedBlueprintId } from '../../store/BlueprintSlice';
 import { useAppSelector } from '../../store/hooks';
 import { useComposeBlueprintMutation } from '../../store/imageBuilderApi';
 
-export const BuildImagesButton = () => {
+type BuildImagesButtonPropTypes = {
+  variant?: ButtonProps['variant'];
+  children?: React.ReactNode;
+};
+
+export const BuildImagesButton = ({
+  variant,
+  children,
+}: BuildImagesButtonPropTypes) => {
   const selectedBlueprintId = useAppSelector(selectSelectedBlueprintId);
   const [buildBlueprint, { isLoading: imageBuildLoading }] =
     useComposeBlueprintMutation();
@@ -19,8 +27,9 @@ export const BuildImagesButton = () => {
       onClick={onBuildHandler}
       isDisabled={!selectedBlueprintId}
       isLoading={imageBuildLoading}
+      variant={variant}
     >
-      Build images
+      {children ? children : 'Build images'}
     </Button>
   );
 };
diff --git a/src/Components/ImagesTable/EmptyState.tsx b/src/Components/ImagesTable/EmptyState.tsx
index 60b5375b..7ace5d6e 100644
--- a/src/Components/ImagesTable/EmptyState.tsx
+++ b/src/Components/ImagesTable/EmptyState.tsx
@@ -15,11 +15,12 @@ import {
 import {
   ExternalLinkAltIcon,
   PlusCircleIcon,
-  CubesIcon,
+  PlusIcon,
 } from '@patternfly/react-icons';
 import { Link } from 'react-router-dom';
 
 import { resolveRelPath } from '../../Utilities/path';
+import { BuildImagesButton } from '../Blueprints/BuildImagesButton';
 
 type ImagesEmptyStateProps = {
   selectedBlueprint?: string;
@@ -29,16 +30,23 @@ const EmptyBlueprintsImagesTable = () => (
   <Bullseye>
     <EmptyState variant={EmptyStateVariant.lg}>
       <EmptyStateHeader
-        icon={<EmptyStateIcon icon={CubesIcon} />}
+        icon={<EmptyStateIcon icon={PlusIcon} />}
         titleText="No images"
         data-testid="empty-state-header"
       />
       <EmptyStateBody>
         <Text>
-          The selected blueprint does not contain any images, build an image
-          from this version or adjust the filters.
+          The selected blueprint does not contain any images, build images from
+          this version or adjust the filters.
         </Text>
       </EmptyStateBody>
+      <EmptyStateFooter>
+        <EmptyStateActions>
+          <BuildImagesButton variant="link">
+            Build images for this version
+          </BuildImagesButton>
+        </EmptyStateActions>
+      </EmptyStateFooter>
     </EmptyState>
   </Bullseye>
 );