website changes

src/apps/console/routes/_main+/$account+/infra+/byok-cluster/handle-byok-cluster.tsx

@@ -104,7 +104,7 @@ const Root = (props: IDialog) => {
           {!isUpdate && (
             <>
               <Checkbox
-                label="Private"
+                label="Private Cluster"
                 checked={values.visibilityMode}
                 onChange={(val) => {
                   handleChange('visibilityMode')(dummyEvent(val));
@@ -113,11 +113,14 @@ const Root = (props: IDialog) => {
               <Banner
                 type="info"
                 body={
-                  <span className="bodyMd-medium">
-                    {values.visibilityMode === false
-                      ? 'Public mode assumes cluster is accessible to public internet'
-                      : 'In Private mode traffic is routed via a kloudlite gateway'}
-                  </span>
+                  <div className="flex flex-col">
+                    <span className="bodyMd-medium">
+                      Private clusters are those who are hosted behind a NAT.
+                    </span>
+                    <span className="bodyMd">
+                      Ex: Cluster running on your local machine
+                    </span>
+                  </div>
                 }
               />
             </>
@@ -142,7 +145,9 @@ const HandleByokCluster = (props: IDialog) => {
 
   return (
     <Popup.Root show={visible} onOpenChange={(v) => setVisible(v)}>
-      <Popup.Header>{isUpdate ? 'Edit Cluster' : 'Add Cluster'}</Popup.Header>
+      <Popup.Header>
+        {isUpdate ? 'Edit Cluster' : 'Attach Cluster'}
+      </Popup.Header>
       {(!isUpdate || (isUpdate && props.data)) && <Root {...props} />}
     </Popup.Root>
   );

src/apps/console/routes/_main+/$account+/infra+/clusters/cluster-resources-v2.tsx

@@ -129,7 +129,7 @@ const ByokInstructionsPopup = ({
 
   return (
     <Popup.Root onOpenChange={onClose} show={show} className="!w-[800px]">
-      <Popup.Header>{`${clusterName} setup instructions:`}</Popup.Header>
+      <Popup.Header>Instructions to attach cluster</Popup.Header>
       <Popup.Content>
         <form className="flex flex-col gap-2xl">
           {error && (

src/apps/console/routes/_main+/$account+/infra+/clusters/route.tsx

@@ -1,22 +1,17 @@
 import { Plus } from '~/console/components/icons';
 import { defer } from '@remix-run/node';
-import { Link, useLoaderData, useParams } from '@remix-run/react';
+import { useLoaderData } from '@remix-run/react';
 import { Button } from '~/components/atoms/button.jsx';
 import Wrapper from '~/console/components/wrapper';
 import { ExtractNodeType, parseNodes } from '~/console/server/r-utils/common';
-import {
-  base64Encrypt,
-  getPagination,
-  getSearch,
-} from '~/console/server/utils/common';
+import { getPagination, getSearch } from '~/console/server/utils/common';
 import { IRemixCtx } from '~/root/lib/types/common';
 import { LoadingComp, pWrapper } from '~/console/components/loading-component';
 import { ensureAccountSet } from '~/console/server/utils/auth-utils';
 import { GQLServerHandler } from '~/console/server/gql/saved-queries';
 import { useState } from 'react';
 import { IClusters } from '~/console/server/gql/queries/cluster-queries';
 import { IByocClusters } from '~/console/server/gql/queries/byok-cluster-queries';
-import OptionList from '~/components/atoms/option-list';
 import fake from '~/root/fake-data-generator/fake';
 import { EmptyClusterImage } from '~/console/components/empty-resource-images';
 import Tools from './tools';
@@ -60,53 +55,19 @@ export const loader = async (ctx: IRemixCtx) => {
   return defer({ promise });
 };
 
-const CreateClusterButton = ({
-  cpSecretsCount,
-}: {
-  cpSecretsCount?: number;
-}) => {
-  const { account } = useParams();
-
+const CreateClusterButton = () => {
   const [visible, setVisible] = useState(false);
 
   return (
     <>
-      <OptionList.Root>
-        <OptionList.Trigger>
-          <Button
-            content={
-              cpSecretsCount === 0
-                ? 'setup cloud provider and cluster'
-                : 'Add cluster'
-            }
-            variant="primary"
-            prefix={<Plus />}
-          />
-        </OptionList.Trigger>
-        <OptionList.Content>
-          <OptionList.Link
-            to={
-              cpSecretsCount === 0
-                ? `/onboarding/${account}/new-cloud-provider?f=${base64Encrypt(
-                    'infra'
-                  )}`
-                : `/${account}/new-cluster`
-            }
-            LinkComponent={Link}
-          >
-            {cpSecretsCount === 0
-              ? 'Setup cloud provider and cluster'
-              : 'New Cluster'}
-          </OptionList.Link>
-          <OptionList.Item
-            onClick={() => {
-              setVisible(true);
-            }}
-          >
-            Attach existing cluster
-          </OptionList.Item>
-        </OptionList.Content>
-      </OptionList.Root>
+      <Button
+        content="Attach cluster"
+        variant="primary"
+        prefix={<Plus />}
+        onClick={() => {
+          setVisible(true);
+        }}
+      />
       <HandleByokCluster
         {...{
           visible,
@@ -163,9 +124,7 @@ const ClusterComponent = ({
             attch your own cluster, before starting working with clusters
           </p>
         ),
-        action: (
-          <CreateClusterButton cpSecretsCount={cloudProviderSecretsCount} />
-        ),
+        action: <CreateClusterButton />,
       };
     }
 
@@ -200,7 +159,7 @@ const ClusterComponent = ({
       secondaryHeader={{
         title: 'Clusters',
         action: (clusters.length > 0 || byokClusters.length > 0) && (
-          <CreateClusterButton cpSecretsCount={secretsCount} />
+          <CreateClusterButton />
         ),
       }}
       empty={getEmptyState({

src/apps/devdoc/pages/docs/getting-started.mdx

@@ -5,6 +5,10 @@ import Steps from "~/app/components/steps";
 <Steps>
 ### Attach Your Cluster
 Attach your cluster to Kloudlite using a Helm chart. First, create a cluster reference in Kloudlite, then follow the steps to attach the cluster.
+<img src="/attach-cluster-1.png" alt="" className="wb-p-3xl wb-mt-3xl wb-bg-white" />
+
+<img src="/attach-cluster-2.png" alt="" className="wb-p-3xl wb-mt-3xl wb-bg-white" />
+
 
 ### Create an Environment
 Create a new environment in Kloudlite by providing an environment name and the cluster reference. Once your environment is set up, deploy your applications, configure settings, and import resources into the environment.