Add region selection while account creation

gql-queries-generator/doc/queries.graphql

@@ -48,6 +48,13 @@ mutation consoleCreateAccount($account: AccountIn!) {
   }
 }
 
+query consoleGetAvailableKloudliteRegions {
+  accounts_availableKloudliteRegions {
+    displayName
+    id
+  }
+}
+
 query consoleListAccounts {
   accounts_listAccounts {
     id
@@ -57,6 +64,7 @@ query consoleListAccounts {
     }
     updateTime
     displayName
+    kloudliteGatewayRegion
   }
 }
 
@@ -76,6 +84,7 @@ query consoleGetAccount($accountName: String!) {
     updateTime
     contactEmail
     displayName
+    kloudliteGatewayRegion
   }
 }
 

src/apps/console/routes/_a+/new-team.tsx

@@ -29,50 +29,32 @@ const NewAccount = () => {
     return api.listAccounts({});
   });
 
-  const regions = [
-    {
-      label: 'ap-south-1',
-      value: 'ap-south-1',
-      render: () => (
-        <div className="flex flex-row gap-lg items-center">
-          <div>ap-south-1</div>
-        </div>
-      ),
-    },
-    {
-      label: 'eu-north-1',
-      value: 'eu-north-1',
-      render: () => (
-        <div className="flex flex-row gap-lg items-center">
-          <div>eu-north-1</div>
-        </div>
-      ),
-    },
-    {
-      label: 'eu-west-3',
-      value: 'eu-west-3',
-      render: () => (
-        <div className="flex flex-row gap-lg items-center">
-          <div>eu-west-3</div>
-        </div>
-      ),
-    },
-    {
-      label: 'eu-west-2',
-      value: 'eu-west-2',
+  const { data: kloudliteRegionsData, isLoading: klRegionIsLoading } =
+    useCustomSwr(
+      'kloudliteRegions',
+      async () => api.getAvailableKloudliteRegions({}),
+      true
+    );
+
+  console.log('klRegionIsLoading', kloudliteRegionsData);
+
+  const klRegionData = kloudliteRegionsData?.map((d) => {
+    return {
+      label: d.displayName,
+      value: d.id,
       render: () => (
         <div className="flex flex-row gap-lg items-center">
-          <div>eu-west-2</div>
+          <div>{d.displayName}</div>
         </div>
       ),
-    },
-  ];
+    };
+  });
 
   const { values, handleChange, errors, isLoading, handleSubmit } = useForm({
     initialValues: {
       name: '',
       displayName: '',
-      region: regions[0].value,
+      region: '',
       isNameError: false,
     },
     validationSchema: Yup.object({
@@ -86,6 +68,7 @@ const NewAccount = () => {
             metadata: { name: v.name },
             displayName: v.displayName,
             contactEmail: user.email,
+            kloudliteGatewayRegion: v.region,
           },
         });
         if (_errors) {
@@ -151,18 +134,21 @@ const NewAccount = () => {
                 handleChange={handleChange}
                 nameErrorLabel="isNameError"
               />
-              {/* <Select
-                error={!!errors.region}
+              <Select
                 size="lg"
-                message={errors.region}
                 value={values.region}
                 label="Region"
                 placeholder="Select region"
                 onChange={(_, value) => {
                   handleChange('region')(dummyEvent(value));
                 }}
-                options={async () => regions}
-              /> */}
+                options={async () => [
+                  ...((klRegionData && klRegionData) || []),
+                ]}
+                error={!!errors.region}
+                message={errors.region}
+                loading={klRegionIsLoading}
+              />
               <BottomNavigation
                 primaryButton={{
                   variant: 'primary',

src/apps/console/routes/_a+/onboarding+/$a+/attach-new-cluster.tsx

@@ -96,7 +96,7 @@ const AttachNewCluster = () => {
                   nameErrorLabel="isNameError"
                 />
                 <Checkbox
-                  label="Private"
+                  label="Private Cluster"
                   checked={values.visibilityMode}
                   onChange={(val) => {
                     handleChange('visibilityMode')(dummyEvent(val));
@@ -105,11 +105,14 @@ const AttachNewCluster = () => {
                 <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>
                   }
                 />
               </div>

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

@@ -104,12 +104,10 @@ const ByokInstructionsPopup = ({
   show,
   item,
   onClose,
-  clusterName,
 }: {
   show: boolean;
   item: CombinedBaseType;
   onClose: () => void;
-  clusterName: string;
 }) => {
   const params = useParams();
   ensureAccountClientSide(params);
@@ -181,7 +179,6 @@ const ByokButton = ({ item }: { item: CombinedBaseType }) => {
     <div>
       {show ? (
         <ByokInstructionsPopup
-          clusterName={item.displayName || ''}
           show={show}
           onClose={() => {
             setShow(false);

src/apps/console/routes/_main+/$account+/settings+/general.tsx

@@ -46,6 +46,7 @@ export const updateAccount = async ({
           name: parseName(data),
         },
         contactEmail: data.contactEmail,
+        kloudliteGatewayRegion: data.kloudliteGatewayRegion,
       },
     });
     if (e) {
@@ -128,11 +129,37 @@ const SettingGeneral = () => {
             <Avatar size="lg" color="one" image={<Buildings />} />{' '}
             <Button content="Upload photo" variant="basic" />
           </div>
-          <TextInput
-            label="Account name"
-            value={values.displayName}
-            onChange={handleChange('displayName')}
-          />
+          <div className="flex flex-row gap-3xl">
+            <div className="flex-1">
+              <TextInput
+                label="Account name"
+                value={values.displayName}
+                onChange={handleChange('displayName')}
+              />
+            </div>
+            <div className="flex-1">
+              <TextInput
+                value={account.kloudliteGatewayRegion}
+                label="Kloudlite gateway region"
+                suffix={
+                  <div
+                    className="flex justify-center items-center"
+                    title="Copy"
+                  >
+                    <button
+                      onClick={() => copy(account.kloudliteGatewayRegion)}
+                      className="outline-none hover:bg-surface-basic-hovered active:bg-surface-basic-active rounded text-text-default"
+                      tabIndex={-1}
+                      aria-label="copy account id"
+                    >
+                      <CopySimple size={16} />
+                    </button>
+                  </div>
+                }
+                disabled
+              />
+            </div>
+          </div>
           <div className="flex flex-row items-center gap-3xl">
             <div className="flex-1">
               <TextInput

src/apps/console/server/gql/queries/account-queries.ts

@@ -12,6 +12,8 @@ import {
   ConsoleUpdateAccountMutationVariables,
   ConsoleDeleteAccountMutation,
   ConsoleDeleteAccountMutationVariables,
+  ConsoleGetAvailableKloudliteRegionsQuery,
+  ConsoleGetAvailableKloudliteRegionsQueryVariables,
 } from '~/root/src/generated/gql/server';
 
 export type IAccounts = NN<ConsoleListAccountsQuery['accounts_listAccounts']>;
@@ -32,6 +34,21 @@ export const accountQueries = (executor: IExecutor) => ({
       vars(_: ConsoleCreateAccountMutationVariables) {},
     }
   ),
+  getAvailableKloudliteRegions: executor(
+    gql`
+      query Accounts_availableKloudliteRegions {
+        accounts_availableKloudliteRegions {
+          displayName
+          id
+        }
+      }
+    `,
+    {
+      transformer: (data: ConsoleGetAvailableKloudliteRegionsQuery) =>
+        data.accounts_availableKloudliteRegions,
+      vars(_: ConsoleGetAvailableKloudliteRegionsQueryVariables) {},
+    }
+  ),
 
   listAccounts: executor(
     gql`
@@ -44,6 +61,7 @@ export const accountQueries = (executor: IExecutor) => ({
           }
           updateTime
           displayName
+          kloudliteGatewayRegion
         }
       }
     `,
@@ -79,6 +97,7 @@ export const accountQueries = (executor: IExecutor) => ({
           updateTime
           contactEmail
           displayName
+          kloudliteGatewayRegion
         }
       }
     `,

src/generated/gql/sdl.graphql

@@ -11,6 +11,7 @@ type Account {
   displayName: String!
   id: ID!
   isActive: Boolean
+  kloudliteGatewayRegion: String!
   lastUpdatedBy: Github__com___kloudlite___api___common__CreatedOrUpdatedBy!
   logo: String
   markedForDeletion: Boolean
@@ -24,6 +25,7 @@ input AccountIn {
   contactEmail: String
   displayName: String!
   isActive: Boolean
+  kloudliteGatewayRegion: String!
   logo: String
   metadata: MetadataIn
 }
@@ -91,6 +93,16 @@ type AppPaginatedRecords {
   totalCount: Int!
 }
 
+type AvailableKloudliteRegion {
+  displayName: String!
+  id: String!
+}
+
+input AvailableKloudliteRegionIn {
+  displayName: String!
+  id: String!
+}
+
 type Build {
   buildClusterName: String!
   createdBy: Github__com___kloudlite___api___common__CreatedOrUpdatedBy!
@@ -3904,6 +3916,7 @@ input PortIn {
 scalar ProviderDetail
 
 type Query {
+  accounts_availableKloudliteRegions: [AvailableKloudliteRegion!]
   accounts_checkNameAvailability(name: String!): AccountsCheckNameAvailabilityOutput!
   accounts_ensureKloudliteRegistryPullSecrets(accountName: String!): Boolean!
   accounts_getAccount(accountName: String!): Account

src/generated/gql/server.ts

@@ -398,6 +398,7 @@ export type AccountIn = {
   contactEmail?: InputMaybe<Scalars['String']['input']>;
   displayName: Scalars['String']['input'];
   isActive?: InputMaybe<Scalars['Boolean']['input']>;
+  kloudliteGatewayRegion: Scalars['String']['input'];
   logo?: InputMaybe<Scalars['String']['input']>;
   metadata?: InputMaybe<MetadataIn>;
 };
@@ -1316,6 +1317,11 @@ export type AccountMembershipIn = {
   userId: Scalars['String']['input'];
 };
 
+export type AvailableKloudliteRegionIn = {
+  displayName: Scalars['String']['input'];
+  id: Scalars['String']['input'];
+};
+
 export type BuildRunIn = {
   displayName: Scalars['String']['input'];
 };
@@ -1833,13 +1839,25 @@ export type ConsoleCreateAccountMutation = {
   accounts_createAccount: { displayName: string };
 };
 
+export type ConsoleGetAvailableKloudliteRegionsQueryVariables = Exact<{
+  [key: string]: never;
+}>;
+
+export type ConsoleGetAvailableKloudliteRegionsQuery = {
+  accounts_availableKloudliteRegions?: Array<{
+    displayName: string;
+    id: string;
+  }>;
+};
+
 export type ConsoleListAccountsQueryVariables = Exact<{ [key: string]: never }>;
 
 export type ConsoleListAccountsQuery = {
   accounts_listAccounts?: Array<{
     id: string;
     updateTime: any;
     displayName: string;
+    kloudliteGatewayRegion: string;
     metadata?: { name: string; annotations?: any };
   }>;
 };
@@ -1862,6 +1880,7 @@ export type ConsoleGetAccountQuery = {
     updateTime: any;
     contactEmail?: string;
     displayName: string;
+    kloudliteGatewayRegion: string;
     metadata?: { name: string; annotations?: any };
   };
 };