Update package-lock.json

2026-10-14 21:51:56 +00:00 · 2023-04-17 11:11:18 +03:00
parent df83e8ceb9 8f08c4955f
commit 338d287d35
22 changed files with 1920 additions and 889 deletions
@@ -0,0 +1,275 @@
+import { useEffect, useState } from 'react';
+import { FormProvider, useForm, useWatch } from 'react-hook-form';
+import { useTranslation } from 'react-i18next';
+import { useRouter } from 'next/router';
+import { yupResolver } from '@hookform/resolvers/yup';
+
+import { useNotificationContext } from '@app/components/context/Notifications/NotificationProvider';
+import NavHeader from '@app/components/navigation/NavHeader';
+import {
+  Button,
+  Modal,
+  ModalContent,
+  TableContainer,
+  Tooltip
+} from '@app/components/v2';
+import { useWorkspace } from '@app/context';
+import { usePopUp } from '@app/hooks';
+import {
+  useCreateWsTag,
+  useGetProjectSecrets,
+  useGetUserWsEnvironments,
+  useGetUserWsKey,
+} from '@app/hooks/api';
+import { WorkspaceEnv } from '@app/hooks/api/types';
+
+import { CreateTagModal } from './components/CreateTagModal';
+import { EnvComparisonRow } from './components/EnvComparisonRow';
+import {
+  FormData,
+  schema
+} from './DashboardPage.utils';
+
+
+export const DashboardEnvOverview = () => {
+  const { t } = useTranslation();
+  const router = useRouter();
+  const { createNotification } = useNotificationContext();
+
+  const { popUp
+    // , handlePopUpOpen
+    , handlePopUpToggle, handlePopUpClose } = usePopUp([
+    'secretDetails',
+    'addTag',
+    'secretSnapshots',
+    'uploadedSecOpts',
+    'compareSecrets'
+  ] as const);
+  const [selectedEnv, setSelectedEnv] = useState<WorkspaceEnv | null>(null);
+
+  const { currentWorkspace, isLoading } = useWorkspace();
+  const workspaceId = currentWorkspace?._id as string;
+  const { data: latestFileKey } = useGetUserWsKey(workspaceId);
+
+  useEffect(() => {
+    if (!isLoading && !workspaceId && router.isReady) {
+      router.push('/noprojects');
+    }
+  }, [isLoading, workspaceId, router.isReady]);
+
+  const { data: wsEnv, isLoading: isEnvListLoading } = useGetUserWsEnvironments({
+    workspaceId,
+    onSuccess: (data) => {
+      // get an env with one of the access available
+      const env = data.find(({ isReadDenied }) => !isReadDenied);
+      if (env) {
+        setSelectedEnv(env);
+      }
+    }
+  });
+
+  const userAvailableEnvs = wsEnv?.filter(
+    ({ isReadDenied }) => !isReadDenied
+  );
+  
+  const { data: secrets, isLoading: isSecretsLoading } = useGetProjectSecrets({
+    workspaceId,
+    env: userAvailableEnvs?.map(env => env.slug) ?? [],
+    decryptFileKey: latestFileKey!,
+    isPaused: false
+  });
+
+  // mutation calls
+  const { mutateAsync: createWsTag } = useCreateWsTag();
+
+  const method = useForm<FormData>({
+    // why any: well yup inferred ts expects other keys to defined as undefined
+    defaultValues: secrets as any,
+    values: secrets as any,
+    mode: 'onBlur',
+    resolver: yupResolver(schema)
+  });
+
+  const {
+    control,
+    // handleSubmit,
+    // getValues,
+    // setValue,
+    // formState: { isSubmitting, dirtyFields },
+    // reset
+  } = method;
+  const formSecrets = useWatch({ control, name: 'secrets' });
+
+  const isReadOnly = selectedEnv?.isWriteDenied;
+
+  const onCreateWsTag = async (tagName: string) => {
+    try {
+      await createWsTag({
+        workspaceID: workspaceId,
+        tagName,
+        tagSlug: tagName.replace(' ', '_')
+      });
+      handlePopUpClose('addTag');
+      createNotification({
+        text: 'Successfully created a tag',
+        type: 'success'
+      });
+    } catch (error) {
+      console.error(error);
+      createNotification({
+        text: 'Failed to create a tag',
+        type: 'error'
+      });
+    }
+  };
+
+  if (isSecretsLoading || isEnvListLoading) {
+    return (
+      <div className="container mx-auto flex h-full w-full items-center justify-center px-8 text-mineshaft-50 dark:[color-scheme:dark]">
+        <img src="/images/loading/loading.gif" height={70} width={120} alt="loading animation" />
+      </div>
+    );
+  }
+
+  // when secrets is not loading and secrets list is empty
+  const isDashboardSecretEmpty = !isSecretsLoading && !formSecrets?.length;
+
+  const numSecretsMissingPerEnv = userAvailableEnvs?.map(envir => ({[envir.slug]: [... new Set(secrets?.secrets.map((secret: any) => secret.key))].length - [... new Set(secrets?.secrets.filter(s => s.env === envir.slug).map((secret: any) => secret.key))].length})).reduce((acc, cur) => ({ ...acc, ...cur }), {})
+
+  return (
+    <div className="container mx-auto max-w-full px-6 text-mineshaft-50 dark:[color-scheme:dark]">
+      <FormProvider {...method}>
+        <form autoComplete="off">
+          {/* breadcrumb row */}
+          <div className="relative right-5">
+            <NavHeader pageName={t('dashboard:title')} isProjectRelated />
+          </div>
+          <div className="mt-6 ml-1">
+            <p className="text-3xl font-semibold text-bunker-100">Secrets Overview</p>
+            <p className="text-md text-bunker-300">Inject your secrets using 
+              <a 
+                className="text-primary/80 hover:text-primary mx-1" 
+                href="https://infisical.com/docs/cli/overview" 
+                target="_blank"
+                rel="noopener noreferrer"
+              >
+                Infisical CLI
+              </a> 
+              or 
+              <a 
+                className="text-primary/80 hover:text-primary mx-1" 
+                href="https://infisical.com/docs/sdks/overview" 
+                target="_blank"
+                rel="noopener noreferrer"
+              >
+                Infisical SDKs
+              </a> </p>
+          </div>
+          <div className="overflow-y-auto">
+            <div className="sticky top-0 absolute flex flex-row h-10 bg-mineshaft-800 border border-mineshaft-600 rounded-md mt-8 min-w-[60.3rem]">
+              <div className="sticky top-0 w-10 px-4 flex items-center justify-center border-none">
+                <div className='text-center w-10 text-xs text-transparent'>{0}</div>
+              </div>
+              <div className="sticky top-0 border-none">
+                <div className="min-w-[200px] lg:min-w-[220px] xl:min-w-[250px] relative flex items-center justify-start h-full w-full">
+                  <div className="text-sm font-medium ">Secret</div>
+                </div>
+              </div>
+              {numSecretsMissingPerEnv && userAvailableEnvs?.map(env => {
+                return <div key={`header-${env.slug}`} className="flex flex-row w-full bg-mineshaft-800 rounded-md items-center border-none min-w-[11rem]">
+                  <div className="text-sm font-medium w-full text-center text-bunker-200/[.99] flex flex-row justify-center">
+                    {env.name}
+                    {numSecretsMissingPerEnv[env.slug] > 0 && <div className="bg-red rounded-sm h-[1.1rem] w-[1.1rem] mt-0.5 text-bunker-100 ml-2.5 text-xs border border-red-400 flex items-center justify-center cursor-default">
+                      <Tooltip content={`${numSecretsMissingPerEnv[env.slug]} secrets missing compared to other environments`}><span className="text-bunker-100">{numSecretsMissingPerEnv[env.slug]}</span></Tooltip>
+                    </div>}
+                  </div>
+                </div>
+              })}
+            </div>
+            <div className={`${isDashboardSecretEmpty ? "" : ""} flex flex-row items-start justify-center mt-3 h-full max-h-[calc(100vh-370px)] min-w-[60.3rem] flex-grow w-full overflow-x-hidden no-scrollbar no-scrollbar::-webkit-scrollbar`}>
+              {!isDashboardSecretEmpty && (
+                <TableContainer className='border-none'>
+                  <table className="relative secret-table w-full relative bg-bunker-800">
+                    <tbody className="overflow-y-auto max-h-screen">
+                      {[... new Set(secrets?.secrets.map((secret: any) => secret.key))].map((key, index) => (
+                        <EnvComparisonRow
+                          key={`row-${key}`}
+                          secrets={secrets?.secrets.filter(secret => secret.key === key)}
+                          isReadOnly={isReadOnly}
+                          index={index}
+                          isSecretValueHidden
+                          userAvailableEnvs={userAvailableEnvs}
+                        />
+                      ))}
+                    </tbody>
+                  </table>
+                </TableContainer>
+              )}
+              {isDashboardSecretEmpty &&
+                <div className='flex flex-row h-40 rounded-md mt-1 w-full'>
+                  <div className="sticky top-0 w-10 px-4 flex items-center justify-center border-none">
+                    <div className='text-center w-10 text-xs text-transparent'>{0}</div>
+                  </div>
+                  <div className="sticky top-0 border-none">
+                    <div className="min-w-[200px] lg:min-w-[220px] xl:min-w-[250px] relative flex items-center justify-start h-full w-full">
+                      <div className="text-sm font-medium text-transparent">Secret</div>
+                    </div>
+                  </div>
+                  <div className="flex flex-col w-full bg-mineshaft-800 text-bunker-300 rounded-md items-center justify-center border-none mx-2 min-w-[11rem]">
+                    <span className="mb-1">No secrets are available in this project yet.</span>
+                    <span>You can go into any environment to add secrets there.</span>
+                  </div>
+                </div>}
+                {/* In future, we should add an option to add environments here
+                <div className="ml-10 h-full flex items-start justify-center">
+                  <Button
+                    leftIcon={<FontAwesomeIcon icon={faPlus}/>}
+                    onClick={() => prepend(DEFAULT_SECRET_VALUE, { shouldFocus: false })}
+                    variant="outline_bg"
+                    colorSchema="primary"
+                    isFullWidth
+                    className="h-10"
+                  >
+                    Add Environment
+                  </Button>
+                </div> */}
+            </div>
+            <div className="group min-w-full flex flex-row items-center mt-4">
+              <div className="w-10 h-10 px-4 flex items-center justify-center border-none"><div className='text-center w-10 text-xs text-transparent'>0</div></div>
+              <div className="flex flex-row justify-between items-center min-w-[200px] lg:min-w-[220px] xl:min-w-[250px]">
+                <span className="text-transparent">0</span>
+                <button type="button" className='mr-2 text-transparent'>1</button>
+              </div>
+              {userAvailableEnvs?.map(env => {
+                return <div key={`button-${env.slug}`} className="flex flex-row w-full justify-center h-10 items-center border-none mb-1 mx-2 min-w-[10rem]">
+                    <Button
+                      onClick={() => router.push(`${router.asPath  }?env=${env.slug}`)}
+                      variant="outline_bg"
+                      colorSchema="primary"
+                      isFullWidth
+                      className="h-10"
+                    >
+                      Explore {env.name}
+                    </Button>
+                  </div>
+              })}
+            </div>  
+          </div>
+        </form>
+        <Modal
+          isOpen={popUp?.addTag?.isOpen}
+          onOpenChange={(open) => {
+            handlePopUpToggle('addTag', open);
+          }}
+        >
+          <ModalContent
+            title="Create tag"
+            subTitle="Specify your tag name, and the slug will be created automatically."
+          >
+            <CreateTagModal onCreateTag={onCreateWsTag} />
+          </ModalContent>
+        </Modal>
+      </FormProvider>
+    </div>
+  );
+};
@@ -28,8 +28,6 @@ import {
  Popover,
  PopoverContent,
  PopoverTrigger,
-  Select,
-  SelectItem,
  TableContainer,
  Tag,
  Tooltip
@@ -86,7 +84,7 @@ const USER_ACTION_PUSH = 'first_time_secrets_pushed';
 * Instead when user delete we raise a flag so if user decides to go back to toggle personal before saving
 * They will get it back
 */
-export const DashboardPage = () => {
+export const DashboardPage = ({ envFromTop }: { envFromTop: string }) => {
  const { t } = useTranslation();
  const router = useRouter();
  const { createNotification } = useNotificationContext();
@@ -126,8 +124,8 @@ export const DashboardPage = () => {
    onSuccess: (data) => {
      // get an env with one of the access available
      const env = data.find(({ isReadDenied, isWriteDenied }) => !isWriteDenied || !isReadDenied);
-      if (env) {
-        setSelectedEnv(env);
+      if (env && data?.map(wsenv => wsenv.slug).includes(envFromTop)) {
+        setSelectedEnv(data?.filter(dp => dp.slug === envFromTop)[0]);
      }
    }
  });
@@ -357,6 +355,7 @@ export const DashboardPage = () => {
    }
    const env = wsEnv?.find((el) => el.slug === slug);
    if (env) setSelectedEnv(env);
+    router.push(`${router.asPath.split("?")[0]}?env=${slug}`)
  };

  // record all deleted ids
@@ -417,7 +416,13 @@ export const DashboardPage = () => {
        <form autoComplete="off">
          {/* breadcrumb row */}
          <div className="relative right-5">
-            <NavHeader pageName={t('dashboard:title')} isProjectRelated />
+            <NavHeader 
+              pageName={t('dashboard:title')} 
+              currentEnv={userAvailableEnvs?.filter(envir => envir.slug === envFromTop)[0].name || ''} 
+              isProjectRelated 
+              userAvailableEnvs={userAvailableEnvs}
+              onEnvChange={onEnvChange}
+            />
          </div>
          {/* Secrets, commit and save button section */}
          <div className="mt-6 flex items-center justify-between">
@@ -468,23 +473,6 @@ export const DashboardPage = () => {
          </div>
          {/* Environment, search and other action row */}
          <div className="mt-4 flex items-center space-x-2">
-            <div>
-              <Tooltip content="Select environment">
-                <Select
-                  value={selectedEnv?.slug}
-                  onValueChange={onEnvChange}
-                  position="popper"
-                  className="min-w-[180px] bg-mineshaft-600 h-10 font-medium"
-                  dropdownContainerClassName="text-bunker-200 bg-mineshaft-800 border border-mineshaft-600 drop-shadow-2xl"
-                >
-                  {userAvailableEnvs?.map(({ name, slug }) => (
-                    <SelectItem value={slug} key={slug}>
-                      {name}
-                    </SelectItem>
-                  ))}
-                </Select>
-              </Tooltip>
-            </div>
            <div className="flex-grow">
              <Input
                className="bg-mineshaft-600 h-[2.3rem] placeholder-mineshaft-50"
@@ -0,0 +1,131 @@
+/* eslint-disable react/jsx-no-useless-fragment */
+import { SyntheticEvent, useRef, useState } from 'react';
+import { useFormContext, useWatch } from 'react-hook-form';
+import { faCircle, faEye, faEyeSlash } from '@fortawesome/free-solid-svg-icons';
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
+
+import guidGenerator from '@app/components/utilities/randomId';
+
+import { FormData } from '../../DashboardPage.utils';
+
+type Props = {
+  index: number;
+  secrets: any[] | undefined;
+  // permission and external state's that decided to hide or show
+  isReadOnly?: boolean;
+  isSecretValueHidden: boolean;
+  userAvailableEnvs?: any[];
+};
+
+const REGEX = /([$]{.*?})/g;
+
+const DashboardInput = ({ isOverridden, isSecretValueHidden, isReadOnly, secret, index }: { isOverridden: boolean, isSecretValueHidden: boolean, isReadOnly?: boolean, secret: any, index: number } ): JSX.Element => {
+  const ref = useRef<HTMLDivElement | null>(null);
+  const syncScroll = (e: SyntheticEvent<HTMLDivElement>) => {
+    if (ref.current === null) return;
+
+    ref.current.scrollTop = e.currentTarget.scrollTop;
+    ref.current.scrollLeft = e.currentTarget.scrollLeft;
+  };
+
+  return <td key={`row-${secret?.key || ''}--`} className={`flex flex-row w-full min-w-[11rem] justify-center h-10 items-center ${!(secret?.value || secret?.value === '') ? "bg-red-400/10" : "bg-mineshaft-900/30"}`}>
+    <div className="group relative whitespace-pre	flex flex-col justify-center w-full">
+      <input
+        // {...register(`secrets.${index}.valueOverride`)}
+        defaultValue={(isOverridden ? secret.valueOverride : secret?.value || '')}
+        onScroll={syncScroll}
+        readOnly={isReadOnly}
+        className={`${
+          isSecretValueHidden
+            ? 'text-transparent focus:text-transparent active:text-transparent'
+            : ''
+        } z-10 peer font-mono ph-no-capture bg-transparent caret-transparent text-transparent text-sm px-2 py-2 w-full outline-none duration-200 no-scrollbar no-scrollbar::-webkit-scrollbar`}
+        spellCheck="false"
+      />
+      <div
+        ref={ref}
+        className={`${
+          isSecretValueHidden && !isOverridden && secret?.value
+            ? 'text-bunker-800 group-hover:text-gray-400 peer-focus:text-gray-100 peer-active:text-gray-400 duration-200'
+            : ''
+        } ${!secret?.value && "text-bunker-400 justify-center"}
+        absolute flex flex-row whitespace-pre font-mono z-0 ${isSecretValueHidden && secret?.value ? 'invisible' : 'visible'} peer-focus:visible mt-0.5 ph-no-capture overflow-x-scroll bg-transparent h-10 text-sm px-2 py-2 w-full min-w-16 outline-none duration-100 no-scrollbar no-scrollbar::-webkit-scrollbar`}
+      >
+        {(secret?.value || secret?.value === '') && (isOverridden ? secret.valueOverride : secret?.value)?.split('').length === 0 && <span className='text-bunker-400/80 font-sans w-full'>EMPTY</span>}
+        {(secret?.value || secret?.value === '') && (isOverridden ? secret.valueOverride : secret?.value)?.split(REGEX).map((word: string) => {
+          if (word.match(REGEX) !== null) {
+            return (
+              <span className="ph-no-capture text-yellow" key={word}>
+                {word.slice(0, 2)}
+                <span className="ph-no-capture text-yellow-200/80">
+                  {word.slice(2, word.length - 1)}
+                </span>
+                {word.slice(word.length - 1, word.length) === '}' ? (
+                  <span className="ph-no-capture text-yellow">
+                    {word.slice(word.length - 1, word.length)}
+                  </span>
+                ) : (
+                  <span className="ph-no-capture text-yellow-400">
+                    {word.slice(word.length - 1, word.length)}
+                  </span>
+                )}
+              </span>
+            );
+          }
+          return (
+            <span key={`${word}_${index + 1}`} className="ph-no-capture">
+              {word}
+            </span>
+          );
+        })}
+        {!(secret?.value || secret?.value === '') && <span className='text-red-500/80 font-sans text-xs italic'>missing</span>}
+      </div>
+      {(isSecretValueHidden && secret?.value) && (
+        <div className='absolute flex flex-row justify-between items-center z-0 peer pr-2 peer-active:hidden peer-focus:hidden group-hover:bg-white/[0.00] duration-100 h-10 w-full text-bunker-400 text-clip'>
+          <div className="px-2 flex flex-row items-center overflow-x-scroll no-scrollbar no-scrollbar::-webkit-scrollbar">
+            {(isOverridden ? secret.valueOverride : secret?.value || '')?.split('').map(() => (
+              <FontAwesomeIcon
+                key={guidGenerator()}
+                className="text-xxs mr-0.5"
+                icon={faCircle}
+              />
+            ))}
+            {(isOverridden ? secret.valueOverride : secret?.value || '')?.split('').length === 0 && <span className='text-bunker-400/80 text-sm'>EMPTY</span>}
+          </div>
+        </div>
+      )}
+    </div>
+  </td>
+}
+
+export const EnvComparisonRow = ({
+  index,
+  secrets,
+  isSecretValueHidden,
+  isReadOnly,
+  userAvailableEnvs
+}: Props): JSX.Element => {
+  const { 
+    // register, setValue, 
+    control } = useFormContext<FormData>();
+
+  // to get details on a secret
+  const secret = useWatch({ name: `secrets.${index}`, control });
+
+  const [areValuesHiddenThisRow, setAreValuesHiddenThisRow] = useState(true);
+
+  return (
+    <tr className="group min-w-full flex flex-row items-center hover:bg-bunker-700">
+      <td className="w-10 h-10 px-4 flex items-center justify-center border-none"><div className='text-center w-10 text-xs text-bunker-400'>{index + 1}</div></td>
+      <td className="flex flex-row justify-between items-center h-full min-w-[200px] lg:min-w-[220px] xl:min-w-[250px]">
+        <div className="flex flex-row items-center h-8">{secret?.key || ''}</div>
+        <button type="button" className='mr-2 text-bunker-400 hover:text-bunker-300 invisible group-hover:visible' onClick={() => setAreValuesHiddenThisRow(!areValuesHiddenThisRow)}>
+          <FontAwesomeIcon icon={areValuesHiddenThisRow ? faEye : faEyeSlash} />
+        </button>
+      </td>
+      {userAvailableEnvs?.map(env => {
+        return <DashboardInput key={`row-${secret?.key || ''}-${env.slug}`} isOverridden={false} isSecretValueHidden={areValuesHiddenThisRow && isSecretValueHidden} isReadOnly={isReadOnly} secret={secrets?.filter(sec => sec.env === env.slug)[0]} index={index} />
+      })}
+    </tr>
+  );
+};
@@ -0,0 +1 @@
+export { EnvComparisonRow } from './EnvComparisonRow';
@@ -156,7 +156,7 @@ export const SecretInputRow = ({
  }

  return (
-    <tr className="group min-w-full flex flex-row items-center">
+    <tr className="group min-w-full flex flex-row items-center" key={index}>
      <td className="w-10 h-10 px-4 flex items-center justify-center"><div className='text-center w-10 text-xs text-bunker-400'>{index + 1}</div></td>
      <Controller
        control={control}
@@ -279,7 +279,7 @@ export const SecretInputRow = ({
            {(isOverridden ? secret.valueOverride : secret.value)?.split(REGEX).map((word) => {
              if (word.match(REGEX) !== null) {
                return (
-                  <span className="ph-no-capture text-yellow" key={index}>
+                  <span className="ph-no-capture text-yellow" key={guidGenerator()}>
                    {word.slice(0, 2)}
                    <span className="ph-no-capture text-yellow-200/80">
                      {word.slice(2, word.length - 1)}
@@ -64,7 +64,6 @@ export const SecretTagsSection = ({
  });

  const onFormSubmit = async (data: CreateWsTag) => {
-    console.log(19191, data);
    await onCreateTag(data);
    handlePopUpClose('CreateSecretTag');
  };
@@ -37,13 +37,14 @@ const apiTokenExpiry = [
  { label: '7 Days', value: 604800 },
  { label: '1 Month', value: 2592000 },
  { label: '6 months', value: 15552000 },
-  { label: '12 months', value: 31104000 }
+  { label: '12 months', value: 31104000 },
+  { label: 'Never', value: null },
 ];

 const createServiceTokenSchema = yup.object({
  name: yup.string().required().label('Service Token Name'),
  environment: yup.string().required().label('Environment'),
-  expiresIn: yup.string().required().label('Service Token Expiration'),
+  expiresIn: yup.string().optional().label('Service Token Expiration'),
  permissions: yup.object().shape({
    read: yup.boolean().required(),
    write: yup.boolean().required()
@@ -213,7 +214,7 @@ export const ServiceTokenSection = ({
                          className="w-full"
                        >
                          {apiTokenExpiry.map(({ label, value }) => (
-                            <SelectItem value={String(value)} key={label}>
+                            <SelectItem value={String(value || '')} key={label}>
                              {label}
                            </SelectItem>
                          ))}
@@ -332,7 +333,7 @@ export const ServiceTokenSection = ({
                <Tr key={row._id}>
                  <Td>{row.name}</Td>
                  <Td>{row.environment}</Td>
-                  <Td>{new Date(row.expiresAt).toUTCString()}</Td>
+                  <Td>{row.expiresAt && new Date(row.expiresAt).toUTCString()}</Td>
                  <Td className="flex items-center justify-end">
                    <IconButton
                      onClick={() =>
				`@@ -0,0 +1 @@`
				`export { EnvComparisonRow } from './EnvComparisonRow';`