Merge branch 'feature/frontend' into release-v1.0.10

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>

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}

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={

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>;

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>

src/apps/devdoc/app/components/page/devops.tsx

@@ -1,13 +1,13 @@
 import Chips from 'kl-design-system/atoms/chips';
+import { useState } from 'react';
+import { Button } from 'kl-design-system/atoms/button';
 import HorizontalTopTabDevops from '~/app/components/website/horizontal-top-tab-devops';
 import Discover from '~/app/components/website/discover-component';
 import ReadyToOps from '~/app/components/website/ready-to-ops';
 import GetStarted from '~/app/components/website/get-started';
 import SuccessStories from '~/app/components/website/success-stories';
 import { successStories } from '~/app/utils/dummy-data';
 import consts from '~/app/utils/const';
-import { useState } from 'react';
-import { Button } from 'kl-design-system/atoms/button';
 import EmbeddedData from '../../../images/embedded-data.svg';
 import TroubleFree from '../../../images/trouble-free.svg';
 import SeamlessDev from '../../../images/seamless-dev.svg';
@@ -96,26 +96,26 @@ export const GetStartedSection = () => {
     switch (selectedTab) {
       case 'config':
         return (
-          <div className="relative h-full overflow-hidden flex items-center justify-center lg:!items-start lg:!justify-start">
+          <div className="relative h-full overflow-hidden flex items-center justify-center lg:!items-end">
             <img alt="config" src={ConfigDevops.src} />
           </div>
         );
       case 'deploy':
         return (
-          <div className="relative h-full overflow-hidden flex items-center justify-center lg:!items-start lg:!justify-start">
+          <div className="relative h-full overflow-hidden flex items-center justify-center lg:!items-end">
             <img alt="deploy" src={DeployDevops.src} />
           </div>
         );
       case 'setup':
         return (
-          <div className="relative h-full p-xl lg:!p-0 overflow-hidden flex items-center justify-center lg:!items-start lg:!justify-start">
+          <div className="relative h-full p-xl overflow-hidden flex items-center justify-center lg:!p-4xl">
             <img alt="setup" src={SetupDevops.src} />
           </div>
         );
       case 'create':
       default:
         return (
-          <div className="h-full flex items-center justify-center flex items-center lg:!items-start">
+          <div className="h-full flex items-center justify-center flex items-center lg:!p-4xl">
             <img alt="create" src={CreateDevops.src} />
           </div>
         );

src/apps/devdoc/app/components/page/index.tsx

@@ -6,7 +6,7 @@ import Link from 'next/link';
 import { ReactNode, useEffect, useRef, useState } from 'react';
 import { BrandLogo } from 'kl-design-system/branding/brand-logo';
 import ProgressTracker from '~/app/components/progress-tracker';
-import { Graph, GraphItem } from '~/app/components/graph';
+import { Graph, GraphExtended, GraphItem } from '~/app/components/graph';
 import ReadyToOps from '~/app/components/website/ready-to-ops';
 
 import { cn } from '~/app/utils/commons';
@@ -157,7 +157,7 @@ const FeaturedCard = () => {
           Develop, Deploy, Distribute
         </span>
       </div>
-      <div className="bg-surface-basic-subdued h-[160px]" />
+      <div className="bg-surface-basic-subdued h-[160px] 3xl:!h-[148px]" />
       <p className="bodyMd text-text-soft">
         From developing the code to deploying to, distributing, we got you
         covered at each touch point.
@@ -427,12 +427,12 @@ const _DontBelieve = () => {
 
 const Exploring = () => {
   return (
-    <div className="flex flex-col pt-7xl md:!pt-8xl xl:!pt-10xl">
+    <SectionWrapper className="flex-col">
       <h2 className="heading3xl-marketing md:!heading4xl-marketing xl:!heading5xl-marketing text-text-default text-center">
         Unveil the untold - Keep exploring
       </h2>
-      <Graph className="-mx-10xl" responsive>
-        <div className="grid grid-cols-1 md:!grid-cols-2 xl:!grid-cols-[480px_512px] 2xl:!grid-cols-[544px_544px] 3xl:!grid-cols-[672px_704px] gap-3xl xl:!gap-5xl px-10xl py-7xl md:!py-8xl xl:!py-10xl">
+      <GraphExtended>
+        <div className="grid grid-cols-1 md:!grid-cols-2 xl:!grid-cols-[480px_512px] 2xl:!grid-cols-[544px_544px] 3xl:!grid-cols-[672px_704px] gap-3xl xl:!gap-5xl">
           <GraphItem>
             <TutorialCard />
           </GraphItem>
@@ -446,8 +446,8 @@ const Exploring = () => {
             <ChangeLogCard />
           </GraphItem>
         </div>
-      </Graph>
-    </div>
+      </GraphExtended>
+    </SectionWrapper>
   );
 };
 

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'