Merge pull request #80 from kloudlite/release-v1.0.1

Release v1.0.1
kloudlite · Feb 7, 2024 · 8acd815 · 8acd815
2 parents e73892a + b3e69cc
commit 8acd815
Show file tree

Hide file tree

Showing 12 changed files with 109 additions and 111 deletions.
diff --git a/.github/workflows/release.yml b/.github/workflows/release.yml
diff --git a/.gitignore b/.gitignore
@@ -27,6 +27,9 @@ public/**
 !public/package.json
 .tmp
 
+out
+.firebase
+
 storybook-dist
 
 tsconfig-compile.tsbuildinfo
diff --git a/src/apps/auth/server/gql/queries/device-queries.ts b/src/apps/auth/server/gql/queries/device-queries.ts
@@ -111,6 +111,7 @@ export const vpnQueries = (executor: IExecutor) => ({
           }
           clusterName
           projectName
+          environmentName
           spec {
             activeNamespace
             disabled

diff --git a/src/apps/console/components/delete-dialog.tsx b/src/apps/console/components/delete-dialog.tsx
@@ -59,6 +59,7 @@ const DeleteDialog = ({
                 setInputName(target.value);
               }}
               disabled={loading}
+              autoComplete="off"
             />
           </div>
         </div>

diff --git a/src/apps/console/components/menu-select.tsx b/src/apps/console/components/menu-select.tsx
@@ -11,13 +11,10 @@ interface ISelectItem {
   active?: boolean;
 }
 
-const SelectItem = React.forwardRef<HTMLDivElement, ISelectItem>(
+export const SelectItem = React.forwardRef<HTMLDivElement, ISelectItem>(
   ({ children, className, ...props }, forwardedRef) => {
     return (
       <Select.Item
-        onClick={(e) => {
-          console.log(e);
-        }}
         className={cn(
           'group relative flex flex-row gap-xl items-center bodyMd gap cursor-pointer select-none py-lg px-xl text-text-default outline-none transition-colors focus:bg-surface-basic-hovered hover:bg-surface-basic-hovered data-[disabled]:pointer-events-none data-[disabled]:text-text-disabled data-[state=checked]:bg-surface-basic-active',
           className
@@ -37,6 +34,7 @@ interface IMenuSelect {
   items: {
     label: ReactNode;
     value: string;
+    render?: () => ReactNode;
   }[];
   onChange?: (value: string) => void;
   onClick?: (value: string) => void;
@@ -83,15 +81,13 @@ const MenuSelect = ({
                 >
                   {items.map((item) => (
                     <div key={item.value} onClick={() => onClick?.(item.value)}>
-                      <SelectItem key={item.value} value={item.value}>
-                        <div
-                          onClick={() => {
-                            console.log('clicked');
-                          }}
-                        >
-                          {item.label}
-                        </div>
-                      </SelectItem>
+                      {item.render ? (
+                        item.render()
+                      ) : (
+                        <SelectItem key={item.value} value={item.value}>
+                          <div>{item.label}</div>
+                        </SelectItem>
+                      )}
                     </div>
                   ))}
                 </Select.Viewport>

diff --git a/src/apps/console/routes/_a+/onboarding+/$a+/new-cloud-provider.tsx b/src/apps/console/routes/_a+/onboarding+/$a+/new-cloud-provider.tsx
@@ -10,8 +10,8 @@ import { handleError } from '~/root/lib/utils/common';
 import { useState } from 'react';
 import { useConsoleApi } from '~/console/server/gql/api-provider';
 import { validateCloudProvider } from '~/console/server/r-utils/common';
-import { IdSelector } from '~/console/components/id-selector';
 import ProgressWrapper from '~/console/components/progress-wrapper';
+import { NameIdView } from '~/console/components/name-id-view';
 
 const NewCloudProvider = () => {
   const { a: accountName } = useParams();
@@ -27,6 +27,7 @@ const NewCloudProvider = () => {
       name: '',
       provider: providers[0],
       awsAccountId: '',
+      isNameError: false,
     },
     validationSchema: Yup.object({
       displayName: Yup.string().required(),
@@ -35,6 +36,7 @@ const NewCloudProvider = () => {
         label: Yup.string().required(),
         value: Yup.string().required(),
       }).required(),
+      awsAccountId: Yup.string().required('AccountId is required.'),
     }),
     onSubmit: async (val) => {
       const addProvider = async () => {
@@ -95,24 +97,16 @@ const NewCloudProvider = () => {
             the internet.
           </div>
           <div className="flex flex-col">
-            <TextInput
-              label="Name"
-              onChange={handleChange('displayName')}
-              error={!!errors.displayName}
-              message={errors.displayName}
-              value={values.displayName}
-              name="provider-secret-name"
-              size="lg"
-            />
-            <IdSelector
-              name={values.displayName}
+            <NameIdView
+              nameErrorLabel="isNameError"
               resType="providersecret"
-              onChange={(id) => {
-                handleChange('name')({ target: { value: id } });
-              }}
-              className="pt-xl"
+              displayName={values.displayName}
+              name={values.name}
+              label="Name"
+              placeholder="Enter provider name"
+              errors={errors.name}
+              handleChange={handleChange}
             />
-
             <div className="flex flex-col gap-3xl pt-3xl">
               <Select
                 error={!!errors.provider}

diff --git a/src/apps/console/routes/_main+/$account+/_layout.tsx b/src/apps/console/routes/_main+/$account+/_layout.tsx
@@ -1,7 +1,5 @@
 import {
-  ArrowCounterClockwise,
   ArrowsCounterClockwise,
-  CaretDownFill,
   ChevronUpDown,
   Copy,
   GearSix,
@@ -18,7 +16,7 @@ import {
   useOutletContext,
   useParams,
 } from '@remix-run/react';
-import { useEffect, useState } from 'react';
+import { ReactNode, useEffect, useState } from 'react';
 import Popup from '~/components/molecule/popup';
 import logger from '~/root/lib/client/helpers/log';
 import { useDataFromMatches } from '~/root/lib/client/hooks/use-custom-matches';
@@ -29,25 +27,23 @@ import {
   IAccount,
   IAccounts,
 } from '~/console/server/gql/queries/account-queries';
-import { parseName, parseNodes } from '~/console/server/r-utils/common';
+import { parseName } from '~/console/server/r-utils/common';
 
 import {
   ensureAccountClientSide,
   ensureAccountSet,
 } from '~/console/server/utils/auth-utils';
 import { GQLServerHandler } from '~/console/server/gql/saved-queries';
-import MenuSelect from '~/console/components/menu-select';
+import MenuSelect, { SelectItem } from '~/console/components/menu-select';
 import { BreadcrumButtonContent } from '~/console/utils/commons';
 import OptionList from '~/components/atoms/option-list';
 import { IConsoleDevicesForUser } from '~/console/server/gql/queries/console-vpn-queries';
 import { Button, IconButton } from '~/components/atoms/button';
 import HandleConsoleDevices, {
-  QRCodeView,
   ShowWireguardConfig,
   decodeConfig,
   switchEnvironment,
 } from '~/console/page-components/handle-console-devices';
-import Profile from '~/components/molecule/profile';
 import useClipboard from '~/root/lib/client/hooks/use-clipboard';
 import { useConsoleApi } from '~/console/server/gql/api-provider';
 import { handleError } from '~/root/lib/utils/common';
@@ -59,14 +55,42 @@ const AccountMenu = ({ account }: { account: IAccount }) => {
   const accounts = useDataFromMatches<IAccounts>('accounts', {});
   const { account: accountName } = useParams();
   const navigate = useNavigate();
+  const [acc, setAcc] = useState<
+    { label: string; value: string; render?: () => ReactNode }[]
+  >([]);
+
+  useEffect(() => {
+    setAcc([
+      ...accounts.map((acc) => ({
+        label: acc.displayName,
+        value: parseName(acc),
+      })),
+      {
+        label: 'create new team',
+        value: 'newteam',
+        render: () => (
+          <SelectItem
+            className="!flex-row items-center !text-text-primary border-t border-border-default"
+            value="newteam"
+          >
+            <div className="flex flex-row items-center gap-xl">
+              <Plus size={16} /> create new team
+            </div>{' '}
+          </SelectItem>
+        ),
+      },
+    ]);
+  }, [accounts]);
+
   return (
     <MenuSelect
       value={accountName}
-      items={accounts.map((acc) => ({
-        label: acc.displayName,
-        value: parseName(acc),
-      }))}
+      items={acc}
       onChange={(value) => {
+        if (value === 'newteam') {
+          navigate('/new-team');
+          return;
+        }
         navigate(`/${value}/projects`);
       }}
       trigger={

diff --git a/src/apps/console/routes/_main+/$account+/infra+/$cluster+/storage/storage-resources.tsx b/src/apps/console/routes/_main+/$account+/infra+/$cluster+/storage/storage-resources.tsx
@@ -16,7 +16,6 @@ import { IPvs } from '~/console/server/gql/queries/pv-queries';
 import { CircleFill, Database, Trash } from '@jengaicons/react';
 import ResourceExtraAction from '~/console/components/resource-extra-action';
 import { useState } from 'react';
-import DeleteDialog from '~/console/components/delete-dialog';
 
 const RESOURCE_NAME = 'storage';
 type BaseType = ExtractNodeType<IPvs>;

diff --git a/src/apps/console/routes/_main+/$account+/infra+/clusters/cluster-resources.tsx b/src/apps/console/routes/_main+/$account+/infra+/clusters/cluster-resources.tsx
@@ -7,6 +7,7 @@ import {
   ListBody,
   ListItem,
   ListTitle,
+  listFlex,
 } from '~/console/components/console-list-components';
 import Grid from '~/console/components/grid';
 import List from '~/console/components/list';
@@ -157,7 +158,7 @@ const ListView = ({ items }: { items: ExtractNodeType<IClusters>[] }) => {
         const tempStatus = listStatus({
           key: keyPrefix,
           item,
-          className: 'basis-full text-center',
+          className: 'text-center',
         });
 
         return (
@@ -190,6 +191,7 @@ const ListView = ({ items }: { items: ExtractNodeType<IClusters>[] }) => {
                 ),
               },
               tempStatus,
+              listFlex({ key: 'flex-1' }),
               {
                 key: generateKey(keyPrefix, `${provider}`),
                 className: 'min-w-[150px] text-start',

diff --git a/src/apps/console/routes/_main+/_layout/_layout.tsx b/src/apps/console/routes/_main+/_layout/_layout.tsx
@@ -38,7 +38,6 @@ import {
   Container as ContainerIcon,
   GearSix,
   Project,
-  WireGuardlogo,
 } from '@jengaicons/react';
 import HandleProfile from './handle-profile';
 
@@ -200,7 +199,7 @@ const Console = () => {
 
   const noMainLayout = useHandleFromMatches('noMainLayout', null);
 
-  const devicesMenu = useHandleFromMatches('devicesMenu', null);
+  const _devicesMenu = useHandleFromMatches('devicesMenu', null);
 
   const headerExtra = useHandleFromMatches('headerExtra', null);
 
@@ -236,7 +235,7 @@ const Console = () => {
         tabs={navbar === constants.nan ? null : navbar}
         actions={
           <div className="flex flex-row gap-2xl items-center">
-            {/*{!!devicesMenu && devicesMenu()}*/}
+            {/* {!!devicesMenu && devicesMenu()} */}
             {!!headerExtra && headerExtra()}
             <ProfileMenu setShowProfileDialog={setShowProfileDialog} />
           </div>

diff --git a/src/design-system/components/atoms/input.tsx b/src/design-system/components/atoms/input.tsx
@@ -99,7 +99,7 @@ export const TextInputBase = forwardRef<HTMLInputElement, ITextInputBase>(
       disabled = false,
       label,
       onKeyDown,
-      autoComplete,
+      autoComplete = 'off',
       onBlur = () => {},
       onFocus = () => {},
       onChange = () => {},
@@ -116,7 +116,7 @@ export const TextInputBase = forwardRef<HTMLInputElement, ITextInputBase>(
       tabIndex,
       shimmerLoading,
       autoFocus,
-      focusRing,
+      focusRing = true,
       ...extraProps
     } = props;
     const [t, setT] = useState(type || 'text');
@@ -218,8 +218,6 @@ export const TextInputBase = forwardRef<HTMLInputElement, ITextInputBase>(
             }}
             onFocus={(e: any) => {
               if (focusRing) {
-                console.log('here', placeholder);
-
                 containerRef.current?.classList.add(
                   'ring-2',
                   'ring-border-focus'
-Original file line number
+Diff line change
@@ Expand Up / @@ -59,6 +59,7 @@ const DeleteDialog = ({ @@
                     setInputName(target.value);
                   }}
                   disabled={loading}
+                  autoComplete="off"
                 />
               </div>
             </div>
@@ Expand Down @@