From ca3baea7d62d8a869ffa41239798dc1a3c42df6f Mon Sep 17 00:00:00 2001
From: regexowl <ksimicko@redhat.com>
Date: Wed, 22 May 2024 17:01:23 +0200
Subject: [PATCH] LandingPage: Make buttons disabled on Immutable

This makes the "Create blueprint" button and the "Import" button disabled when the Immutable tab is selected.
---
 src/Components/LandingPage/LandingPage.tsx       |  5 ++++-
 .../sharedComponents/ImageBuilderHeader.tsx      | 16 +++++++++++-----
 2 files changed, 15 insertions(+), 6 deletions(-)

diff --git a/src/Components/LandingPage/LandingPage.tsx b/src/Components/LandingPage/LandingPage.tsx
index 0d2baa5a..44f46a91 100644
--- a/src/Components/LandingPage/LandingPage.tsx
+++ b/src/Components/LandingPage/LandingPage.tsx
@@ -104,7 +104,10 @@ export const LandingPage = () => {
 
   return (
     <>
-      <ImageBuilderHeader experimentalFlag={experimentalFlag} />
+      <ImageBuilderHeader
+        experimentalFlag={experimentalFlag}
+        activeTab={activeTabKey}
+      />
       {edgeParityFlag ? (
         <Tabs
           className="pf-c-tabs pf-c-page-header pf-c-table"
diff --git a/src/Components/sharedComponents/ImageBuilderHeader.tsx b/src/Components/sharedComponents/ImageBuilderHeader.tsx
index 757880e7..d8e117d6 100644
--- a/src/Components/sharedComponents/ImageBuilderHeader.tsx
+++ b/src/Components/sharedComponents/ImageBuilderHeader.tsx
@@ -20,7 +20,7 @@ import {
   PageHeaderTitle,
 } from '@redhat-cloud-services/frontend-components';
 import { useFlag } from '@unleash/proxy-client-react';
-import { Link } from 'react-router-dom';
+import { useNavigate } from 'react-router-dom';
 
 import {
   CREATE_RHEL_IMAGES_WITH_AUTOMATED_MANAGEMENT_URL,
@@ -33,6 +33,7 @@ import { ImportBlueprintModal } from '../Blueprints/ImportBlueprintModal';
 
 type ImageBuilderHeaderPropTypes = {
   experimentalFlag?: boolean;
+  activeTab?: number;
 };
 
 const AboutImageBuilderPopover = () => {
@@ -92,9 +93,12 @@ const AboutImageBuilderPopover = () => {
 
 export const ImageBuilderHeader = ({
   experimentalFlag,
+  activeTab,
 }: ImageBuilderHeaderPropTypes) => {
+  const navigate = useNavigate();
   const importExportFlag = useFlag('image-builder.import.enabled');
   const [showImportModal, setShowImportModal] = useState(false);
+  const isOnBlueprintsTab = activeTab === 0;
   return (
     <>
       {importExportFlag && (
@@ -121,13 +125,14 @@ export const ImageBuilderHeader = ({
           {experimentalFlag && (
             <>
               <FlexItem align={{ default: 'alignRight' }}>
-                <Link
-                  to={resolveRelPath('imagewizard')}
-                  className="pf-c-button pf-m-primary"
+                <Button
+                  variant="primary"
                   data-testid="blueprints-create-button"
+                  onClick={() => navigate(resolveRelPath('imagewizard'))}
+                  isDisabled={!isOnBlueprintsTab}
                 >
                   Create blueprint
-                </Link>
+                </Button>
               </FlexItem>
               <FlexItem>
                 {importExportFlag && (
@@ -137,6 +142,7 @@ export const ImageBuilderHeader = ({
                     icon={<ImportIcon />}
                     iconPosition="end"
                     onClick={() => setShowImportModal(true)}
+                    isDisabled={!isOnBlueprintsTab}
                   >
                     Import{' '}
                   </Button>