Show join command during restore in Embedded Cluster (#4826)

Author: miaawong

web/src/Root.tsx

@@ -501,6 +501,9 @@ const Root = () => {
             isEmbeddedClusterEnabled={Boolean(
               state.adminConsoleMetadata?.isEmbeddedCluster
             )}
+            isEmbeddedClusterWaitingForNodes={
+              state.isEmbeddedClusterWaitingForNodes
+            }
             isGitOpsSupported={isGitOpsSupported()}
             isIdentityServiceSupported={isIdentityServiceSupported()}
             appsList={state.appsList}
@@ -636,7 +639,11 @@ const Root = () => {
                     state.adminConsoleMetadata?.isKurl ? (
                       <KurlClusterManagement />
                     ) : (
-                      <EmbeddedClusterManagement />
+                      <EmbeddedClusterManagement
+                        isEmbeddedClusterWaitingForNodes={
+                          state.isEmbeddedClusterWaitingForNodes
+                        }
+                      />
                     )
                   }
                 />

web/src/components/apps/EmbeddedClusterManagement.tsx

@@ -31,8 +31,10 @@ type State = {
 
 const EmbeddedClusterManagement = ({
   fromLicenseFlow = false,
+  isEmbeddedClusterWaitingForNodes = false,
 }: {
   fromLicenseFlow?: boolean;
+  isEmbeddedClusterWaitingForNodes?: boolean;
 }) => {
   const [state, setState] = useReducer(
     (prevState: State, newState: Partial<State>) => ({
@@ -415,11 +417,13 @@ const EmbeddedClusterManagement = ({
   const AddNodeInstructions = () => {
     return (
       <div className="tw-mb-2 tw-text-base">
-        <p>
-          Optionally add nodes to the cluster. Click{" "}
-          <span className="tw-font-semibold">Continue </span>
-          to proceed with a single node.
-        </p>
+        {Utilities.isInitialAppInstall(app) && (
+          <p>
+            Optionally add nodes to the cluster. Click{" "}
+            <span className="tw-font-semibold">Continue </span>
+            to proceed with a single node.
+          </p>
+        )}
         <p>
           {rolesData?.roles &&
             rolesData.roles.length > 1 &&
@@ -517,6 +521,9 @@ const EmbeddedClusterManagement = ({
     );
   };
 
+  const isInitialInstallOrRestore =
+    Utilities.isInitialAppInstall(app) || isEmbeddedClusterWaitingForNodes;
+
   return (
     <div className="EmbeddedClusterManagement--wrapper container u-overflow--auto u-paddingTop--50 tw-font-sans">
       <KotsPageTitle pageName="Cluster Management" />
@@ -525,26 +532,26 @@ const EmbeddedClusterManagement = ({
           Nodes
         </p>
         <div className="tw-flex tw-gap-6 tw-items-center">
-          {" "}
-          {!Utilities.isInitialAppInstall(app) && (
-            <div className="tw-flex tw-gap-6">
-              <p>
-                View the nodes in your cluster, generate commands to add nodes
-                to the cluster, and view workloads running on each node.
-              </p>
-            </div>
+          {!isInitialInstallOrRestore && (
+            <>
+              <div className="tw-flex tw-gap-6">
+                <p>
+                  View the nodes in your cluster, generate commands to add nodes
+                  to the cluster, and view workloads running on each node.
+                </p>
+              </div>
+              {Utilities.sessionRolesHasOneOf([rbacRoles.CLUSTER_ADMIN]) && (
+                <button
+                  className="btn primary tw-ml-auto tw-w-fit tw-h-fit"
+                  onClick={onAddNodeClick}
+                >
+                  Add node
+                </button>
+              )}
+            </>
           )}
-          {Utilities.sessionRolesHasOneOf([rbacRoles.CLUSTER_ADMIN]) &&
-            !Utilities.isInitialAppInstall(app) && (
-              <button
-                className="btn primary tw-ml-auto tw-w-fit tw-h-fit"
-                onClick={onAddNodeClick}
-              >
-                Add node
-              </button>
-            )}
         </div>
-        {Utilities.isInitialAppInstall(app) && (
+        {isInitialInstallOrRestore && (
           <div className="tw-mt-4 tw-flex tw-flex-col">
             <AddNodeInstructions />
             <AddNodeCommands />

web/src/components/shared/NavBar.tsx

@@ -19,6 +19,7 @@ type Props = {
   isIdentityServiceSupported: boolean;
   isKurlEnabled: boolean;
   isEmbeddedClusterEnabled: boolean;
+  isEmbeddedClusterWaitingForNodes: boolean;
   isSnapshotsSupported: boolean;
   logo: string | null;
   onLogoutError: (message: string) => void;
@@ -144,6 +145,7 @@ export class NavBar extends PureComponent<Props, State> {
       fetchingMetadata,
       isKurlEnabled,
       isEmbeddedClusterEnabled,
+      isEmbeddedClusterWaitingForNodes,
       isGitOpsSupported,
       isIdentityServiceSupported,
       appsList,
@@ -206,7 +208,8 @@ export class NavBar extends PureComponent<Props, State> {
           </div>
           {Utilities.isLoggedIn() &&
             appsList?.length > 0 &&
-            !isInitialEmbeddedInstall && (
+            !isInitialEmbeddedInstall &&
+            !isEmbeddedClusterWaitingForNodes && (
               <div className="flex flex-auto left-items">
                 <div
                   className={classNames("NavItem u-position--relative flex", {
@@ -286,7 +289,7 @@ export class NavBar extends PureComponent<Props, State> {
               </div>
             )}
         </div>
-        {Utilities.isLoggedIn() && (
+        {Utilities.isLoggedIn() && !isEmbeddedClusterWaitingForNodes && (
           <>
             <NavBarDropdown
               handleLogOut={this.handleLogOut}