Merge branch 'features/release-checklist' into release-v1.0.5

kloudlite · Dec 19, 2023 · e9913b7 · e9913b7
2 parents 07dc6e1 + f6b6e18
commit e9913b7
Show file tree

Hide file tree

Showing 100 changed files with 26,732 additions and 19,314 deletions.
diff --git a/gql-queries-generator/doc/queries.graphql b/gql-queries-generator/doc/queries.graphql
@@ -442,11 +442,16 @@ query consoleGetCluster($name: String!) {
       syncScheduledAt
     }
     updateTime
+    clusterToken
+  }
+}
+
+query consoleGetKubeConfig($name: String!) {
+  infra_getCluster(name: $name) {
     adminKubeconfig {
-      value
       encoding
+      value
     }
-    clusterToken
   }
 }
 

diff --git a/src/apps/console/components/breadcrum.tsx b/src/apps/console/components/breadcrum.tsx
@@ -11,8 +11,7 @@ const Root = ({ children }: IBreadcrum) => {
 
 const Button = React.forwardRef<HTMLButtonElement, IButton>((props, ref) => {
   return (
-    <div className="flex flex-row gap-md items-center">
-      <div className="text-text-disabled bodySm">/</div>
+    <div className="flex flex-row gap-md items-center bodyMd-medium">
       <NativeButton size="md" variant="plain" ref={ref} {...props} />
     </div>
   );

diff --git a/src/apps/console/components/commons.tsx b/src/apps/console/components/commons.tsx
@@ -1,16 +1,16 @@
-import { CopySimple, Check, Info } from '@jengaicons/react';
+import { CopySimple, Info, Question } from '@jengaicons/react';
 import { ReactNode, useState } from 'react';
-import Chips from '~/components/atoms/chips';
 import { ProdLogo } from '~/components/branding/prod-logo';
 import { WorkspacesLogo } from '~/components/branding/workspace-logo';
-import { toast } from '~/components/molecule/toast';
 import useClipboard from '~/root/lib/client/hooks/use-clipboard';
 import { generateKey, titleCase } from '~/components/utils';
 import { Badge } from '~/components/atoms/badge';
 import {
   Kloudlite__Io___Pkg___Types__SyncStatusState as SyncState,
   Kloudlite__Io___Pkg___Types__SyncStatusAction as SyncAction,
 } from '~/root/src/generated/gql/server';
+import Tooltip from '~/components/atoms/tooltip';
+import { Link } from '@remix-run/react';
 import { ListItem } from './console-list-components';
 import {
   parseUpdateOrCreatedBy,
@@ -40,6 +40,32 @@ export const DetailItem = ({
   );
 };
 
+interface InfoLabelProps {
+  info: ReactNode;
+  label: ReactNode;
+  title?: ReactNode;
+}
+
+export const InfoLabel = ({ info, title, label }: InfoLabelProps) => {
+  return (
+    <span className="flex items-center gap-lg">
+      {label}{' '}
+      <Tooltip.Root
+        content={
+          <div className="p-md text-xs flex flex-col gap-md">
+            <div className="headingSm">{title}</div>
+            {info}
+          </div>
+        }
+      >
+        <span className="text-text-primary">
+          <Question color="currentColor" size={13} />
+        </span>
+      </Tooltip.Root>
+    </span>
+  );
+};
+
 export const CopyButton = ({
   title,
   value,
@@ -53,21 +79,32 @@ export const CopyButton = ({
       setTimeout(() => {
         setCopyIcon(<CopySimple />);
       }, 1000);
-      toast.success('Copied to clipboard');
+      // toast.success('Copied to clipboard');
     },
   });
 
   return (
-    <Chips.Chip
-      type="CLICKABLE"
-      item={title}
-      label={title}
-      prefix={copyIcon}
+    // <Chips.Chip
+    //   type="CLICKABLE"
+    //   item={title}
+    //   label={title}
+    //   prefix={copyIcon}
+    //   onClick={() => {
+    //     copy(value);
+    //     setCopyIcon(<Check />);
+    //   }}
+    // />
+    <div
       onClick={() => {
         copy(value);
-        setCopyIcon(<Check />);
       }}
-    />
+      className="flex flex-row gap-md items-center select-none group cursor-pointer"
+    >
+      <span>{title}</span>
+      <span className="invisible group-hover:visible">
+        <CopySimple size={10} />
+      </span>
+    </div>
   );
 };
 
@@ -104,11 +141,7 @@ type ICommonMeta = IUpdateMeta & IStatusMeta;
 const parseStatusComponent = ({ status }: { status: IStatus }) => {
   switch (status) {
     case 'deleting':
-      return (
-        <Badge icon={<Info />} type="critical">
-          Deleting...
-        </Badge>
-      );
+      return <div className="bodySm text-text-soft">Deleting...</div>;
     default:
       return null;
   }
@@ -154,3 +187,22 @@ export const listRender = ({
     },
   };
 };
+
+export const SubHeaderTitle = ({
+  to,
+  toTitle,
+  title,
+}: {
+  to: string;
+  toTitle: ReactNode;
+  title: ReactNode;
+}) => {
+  return (
+    <div className="flex flex-col gap-md">
+      <Link to={to} className="text-text-soft bodySm">
+        {toTitle}
+      </Link>
+      <span>{title}</span>
+    </div>
+  );
+};
diff --git a/src/apps/console/components/console-avatar.tsx b/src/apps/console/components/console-avatar.tsx
@@ -2,11 +2,19 @@ import { Avatar } from '~/components/atoms/avatar';
 import { titleCase } from '~/components/utils';
 import generateColor from './color-generator';
 
-const ConsoleAvatar = ({ name }: { name: string }) => {
+const ConsoleAvatar = ({
+  name,
+  color,
+  size,
+}: {
+  name: string;
+  color?: string;
+  size?: string;
+}) => {
   return (
     <Avatar
-      color={generateColor(name, 'dark')}
-      size="sm"
+      color={color || generateColor(name, 'dark')}
+      size={size || 'sm'}
       image={<span style={{ color: 'white' }}>{titleCase(name[0])}</span>}
     />
   );

diff --git a/src/apps/console/components/logger.tsx b/src/apps/console/components/logger.tsx
@@ -105,7 +105,7 @@ const LineNumber = ({ lineNumber, fontSize, lines }: ILineNumber) => {
   return (
     <code
       key={`ind+${lineNumber}`}
-      className="inline-flex gap-xl items-center whitespace-pre select-none"
+      className="inline-flex gap-xl items-center whitespace-pre select-none pulsable"
       ref={ref}
     >
       <span className="flex sticky left-0" style={{ fontSize }}>
@@ -321,7 +321,7 @@ const LogLine = ({
       )}
 
       <div
-        className="w-[3px] mr-xl ml-sm h-full"
+        className="w-[3px] mr-xl ml-sm h-full pulsable pulsable-hidden"
         style={{ backgroundImage: generateColor(log.pod_name) }}
       />
       <div className="inline-flex gap-xl pulsable">
@@ -670,7 +670,7 @@ ${url}`
   }, [fullScreen]);
 
   const mockDataRef = useRef(
-    Array.from({ length: 100 }).map(() => {
+    Array.from({ length: 15 }).map(() => {
       return {
         message: logsMockData[Math.floor(Math.random() * 10)],
         timestamp: dayjs().toISOString(),

diff --git a/src/apps/console/components/sidebar-layout.tsx b/src/apps/console/components/sidebar-layout.tsx
@@ -13,7 +13,7 @@ interface Item extends Omit<IActionItem, 'children'> {
 interface ISidebarLayout {
   navItems: Item[];
   parentPath: string;
-  headerTitle: string;
+  headerTitle?: string;
   children: ReactNode;
   headerActions?: ReactNode;
 }
@@ -28,7 +28,11 @@ const SidebarLayout = ({
   const { activePath } = useActivePath({ parent: parentPath });
   return (
     <>
-      <SubHeader title={headerTitle} actions={headerActions} />
+      {!!headerTitle || !!headerActions ? (
+        <SubHeader title={headerTitle} actions={headerActions} />
+      ) : (
+        <div className="pt-6xl" />
+      )}
       <div className="flex flex-col md:flex-row">
         <div className="flex flex-col">
           <div className="flex flex-col">
@@ -73,7 +77,7 @@ const SidebarLayout = ({
             </div>
           </div>
         </div>
-        <div className="flex flex-col flex-1 overflow-x-hidden md:pl-10xl">
+        <div className="flex flex-col flex-1 overflow-x-hidden md:pl-6xl">
           <div className="flex-1 flex flex-col gap-6xl">{children}</div>
         </div>
       </div>

diff --git a/...routes/_.$account.$cluster.$project.$scope.$workspace.app.$app.settings.compute/route.tsx b/...routes/_.$account.$cluster.$project.$scope.$workspace.app.$app.settings.compute/route.tsx
@@ -14,9 +14,9 @@ import {
 } from '../_.$account.$cluster.$project.$scope.$workspace.new-app/datas';
 import {
   FadeIn,
-  InfoLabel,
   parseValue,
 } from '../_.$account.$cluster.$project.$scope.$workspace.new-app/util';
+import { InfoLabel } from '~/console/components/commons';
 
 const SettingCompute = () => {
   const { app, setApp, getContainer } = useAppState();

diff --git a/...pps/console/routes/_.$account.$cluster.$project.$scope.$workspace.new-app/app-compute.tsx b/...pps/console/routes/_.$account.$cluster.$project.$scope.$workspace.new-app/app-compute.tsx
@@ -11,7 +11,8 @@ import { keyconstants } from '~/console/server/r-utils/key-constants';
 import useForm, { dummyEvent } from '~/root/lib/client/hooks/use-form';
 import Yup from '~/root/lib/server/helpers/yup';
 import { IcpuMode, plans } from './datas';
-import { FadeIn, InfoLabel, parseValue } from './util';
+import { FadeIn, parseValue } from './util';
+import { InfoLabel } from '~/console/components/commons';
 
 const AppCompute = () => {
   const { app, setApp, setPage, markPageAsCompleted, activeContIndex } =

diff --git a/.../routes/_.$account.$cluster.$project.$scope.$workspace.new-app/app-environment-mounts.tsx b/.../routes/_.$account.$cluster.$project.$scope.$workspace.new-app/app-environment-mounts.tsx
@@ -12,6 +12,7 @@ import { TextInput } from '~/components/atoms/input';
 import SelectPrimitive from '~/components/atoms/select-primitive';
 import { usePagination } from '~/components/molecule/pagination';
 import { cn } from '~/components/utils';
+import { InfoLabel } from '~/console/components/commons';
 import List from '~/console/components/list';
 import NoResultsFound from '~/console/components/no-results-found';
 import { useAppState } from '~/console/page-components/app-states';
@@ -22,7 +23,6 @@ import useForm from '~/root/lib/client/hooks/use-form';
 import Yup from '~/root/lib/server/helpers/yup';
 import { NonNullableString } from '~/root/lib/types/common';
 import { handleError } from '~/root/lib/utils/common';
-import { InfoLabel } from './util';
 
 export interface IValue {
   refKey: string;

diff --git a/...pps/console/routes/_.$account.$cluster.$project.$scope.$workspace.new-app/app-network.tsx b/...pps/console/routes/_.$account.$cluster.$project.$scope.$workspace.new-app/app-network.tsx
@@ -15,7 +15,8 @@ import List from '~/console/components/list';
 import NoResultsFound from '~/console/components/no-results-found';
 import { TitleBox } from '~/console/components/raw-wrapper';
 import { useAppState } from '~/console/page-components/app-states';
-import { FadeIn, InfoLabel, parseValue } from './util';
+import { FadeIn, parseValue } from './util';
+import { InfoLabel } from '~/console/components/commons';
 
 interface IExposedPorts {
   targetPort?: number;

diff --git a/src/apps/console/routes/_.$account.$cluster.$project.$scope.$workspace.new-app/util.tsx b/src/apps/console/routes/_.$account.$cluster.$project.$scope.$workspace.new-app/util.tsx
@@ -1,7 +1,5 @@
-import { Question } from '@jengaicons/react';
 import { motion } from 'framer-motion';
-import { FormEventHandler, ReactNode } from 'react';
-import Tooltip from '~/components/atoms/tooltip';
+import { FormEventHandler } from 'react';
 import { ChildrenProps } from '~/components/types';
 import { cn } from '~/components/utils';
 import { InputMaybe } from '~/root/src/generated/gql/server';
@@ -41,24 +39,6 @@ export const FadeIn = ({
   );
 };
 
-interface InfoLabelProps {
-  info: ReactNode;
-  label: ReactNode;
-}
-
-export const InfoLabel = ({ info, label }: InfoLabelProps) => {
-  return (
-    <span className="flex items-center gap-lg">
-      {label}{' '}
-      <Tooltip.Root content={info}>
-        <span className="text-text-primary">
-          <Question color="currentColor" size={13} />
-        </span>
-      </Tooltip.Root>
-    </span>
-  );
-};
-
 export function parseValue<T>(v: any, def: T): T {
   try {
     switch (typeof def) {

diff --git a/src/apps/console/routes/_.$account.$cluster.$project.settings.access-management/route.tsx b/src/apps/console/routes/_.$account.$cluster.$project.settings.access-management/route.tsx
@@ -2,7 +2,7 @@ import { Plus, SmileySad } from '@jengaicons/react';
 import { useState } from 'react';
 import { Button } from '~/components/atoms/button';
 import Tabs from '~/components/atoms/tabs';
-import { Profile } from '~/components/molecule/profile';
+import Profile from '~/components/molecule/profile';
 import Wrapper from '~/console/components/wrapper';
 import { dummyData } from '~/console/dummy/data';
 import HandleUser from './handle-user';

diff --git a/src/apps/console/routes/_.$account.$cluster.network.tsx b/src/apps/console/routes/_.$account.$cluster.network.tsx
@@ -11,7 +11,7 @@ const ContainerRegistry = () => {
         { label: 'Domain', value: 'domain' },
       ]}
       parentPath="/network"
-      headerTitle="Network"
+      // headerTitle="Network"
     >
       <Outlet context={{ ...rootContext }} />
     </SidebarLayout>

diff --git a/src/apps/console/routes/_.$account.$cluster.network.vpn/devices-resources.tsx b/src/apps/console/routes/_.$account.$cluster.network.vpn/devices-resources.tsx
@@ -3,7 +3,6 @@ import { useState } from 'react';
 import { toast } from '~/components/molecule/toast';
 import { generateKey, titleCase } from '~/components/utils';
 import {
-  ListBody,
   ListItem,
   ListTitle,
 } from '~/console/components/console-list-components';
@@ -32,7 +31,6 @@ const parseItem = (item: BaseType) => {
   return {
     name: item.displayName,
     id: parseName(item),
-    cluster: item.clusterName,
     updateInfo: {
       author: titleCase(
         `${parseUpdateOrCreatedBy(item)} updated the ${RESOURCE_NAME}`
@@ -105,7 +103,7 @@ const GridView = ({ items, onAction }: IResource) => {
   return (
     <Grid.Root className="!grid-cols-1 md:!grid-cols-3">
       {items.map((item, index) => {
-        const { name, id, cluster, updateInfo } = parseItem(item);
+        const { name, id, updateInfo } = parseItem(item);
         const keyPrefix = `${RESOURCE_NAME}-${id}-${index}`;
         return (
           <Grid.Column
@@ -121,14 +119,6 @@ const GridView = ({ items, onAction }: IResource) => {
                   />
                 ),
               },
-              {
-                key: generateKey(keyPrefix, 'access'),
-                render: () => (
-                  <div className="flex flex-col gap-md">
-                    <ListBody data={cluster} />
-                  </div>
-                ),
-              },
               {
                 key: generateKey(keyPrefix, updateInfo.author),
                 render: () => (
@@ -150,7 +140,7 @@ const ListView = ({ items, onAction }: IResource) => {
   return (
     <List.Root>
       {items.map((item, index) => {
-        const { name, id, cluster, updateInfo } = parseItem(item);
+        const { name, id, updateInfo } = parseItem(item);
         const keyPrefix = `${RESOURCE_NAME}-${id}-${index}`;
         return (
           <List.Row
@@ -162,11 +152,6 @@ const ListView = ({ items, onAction }: IResource) => {
                 className: 'w-full',
                 render: () => <ListTitle title={name} subtitle={id} />,
               },
-              {
-                key: generateKey(keyPrefix, cluster),
-                className: 'w-[180px] text-start mr-[50px]',
-                render: () => <ListBody data={cluster} />,
-              },
               {
                 key: generateKey(keyPrefix, updateInfo.author),
                 className: 'w-[200px] min-w-[200px] max-w-[200px]',