feat(secret-import): implemented ui for secret import

2026-10-17 02:47:35 +00:00 · 2023-07-17 23:08:57 +05:30
parent 202900a7a3
commit 45584e0c1a
18 changed files with 1022 additions and 58 deletions
@@ -67,7 +67,7 @@ export const FolderSection = ({
                      ariaLabel="delete"
                      onClick={() => handleFolderDelete(id, name)}
                    >
-                      <FontAwesomeIcon icon={faXmark} />
+                      <FontAwesomeIcon icon={faXmark} size="lg" />
                    </IconButton>
                  </Tooltip>
                </div>
@@ -0,0 +1,86 @@
+import { Controller, useForm } from "react-hook-form";
+import { yupResolver } from "@hookform/resolvers/yup";
+import * as yup from "yup";
+
+import { Button, FormControl, Input, ModalClose, Select, SelectItem } from "@app/components/v2";
+
+type Props = {
+  onCreate: (environment: string, secretPath: string) => Promise<void>;
+  environments?: Array<{ slug: string; name: string }>;
+};
+
+const formSchema = yup.object({
+  environment: yup.string().required().label("Environment").trim(),
+  secretPath: yup
+    .string()
+    .required()
+    .label("Secret Path")
+    .trim()
+    .transform((val) =>
+      typeof val === "string" && val.at(-1) === "/" && val.length > 1 ? val.slice(0, -1) : val
+    )
+});
+
+type TFormData = yup.InferType<typeof formSchema>;
+
+export const SecretImportForm = ({ onCreate, environments = [] }: Props): JSX.Element => {
+  const {
+    control,
+    reset,
+    formState: { isSubmitting },
+    handleSubmit
+  } = useForm<TFormData>({
+    resolver: yupResolver(formSchema)
+  });
+
+  const onSubmit = async ({ environment, secretPath }: TFormData) => {
+    await onCreate(environment, secretPath);
+    reset();
+  };
+
+  return (
+    <form onSubmit={handleSubmit(onSubmit)}>
+      <Controller
+        control={control}
+        name="environment"
+        defaultValue={environments?.[0]?.slug}
+        render={({ field: { onChange, ...field }, fieldState: { error } }) => (
+          <FormControl label="Environment" errorText={error?.message} isError={Boolean(error)}>
+            <Select
+              defaultValue={field.value}
+              {...field}
+              onValueChange={(e) => onChange(e)}
+              className="w-full"
+            >
+              {environments.map(({ name, slug }) => (
+                <SelectItem value={slug} key={slug}>
+                  {name}
+                </SelectItem>
+              ))}
+            </Select>
+          </FormControl>
+        )}
+      />
+      <Controller
+        control={control}
+        name="secretPath"
+        defaultValue="/"
+        render={({ field, fieldState: { error } }) => (
+          <FormControl label="Secret Path" isError={Boolean(error)} errorText={error?.message}>
+            <Input {...field} />
+          </FormControl>
+        )}
+      />
+      <div className="mt-8 flex items-center">
+        <Button className="mr-4" type="submit" isDisabled={isSubmitting} isLoading={isSubmitting}>
+          Create
+        </Button>
+        <ModalClose asChild>
+          <Button variant="plain" colorSchema="secondary">
+            Cancel
+          </Button>
+        </ModalClose>
+      </div>
+    </form>
+  );
+};
@@ -0,0 +1 @@
+export { SecretImportForm } from "./SecretImportForm";
@@ -0,0 +1,144 @@
+import { useEffect } from "react";
+import { useSortable } from "@dnd-kit/sortable";
+import { faFileImport, faFolder, faUpDown, faXmark } from "@fortawesome/free-solid-svg-icons";
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+
+import { IconButton, TableContainer, Tooltip } from "@app/components/v2";
+import { useWorkspace } from "@app/context";
+import { useToggle } from "@app/hooks/useToggle";
+
+type Props = {
+  onDelete: (environment: string, secretPath: string) => void;
+  importedEnv: string;
+  importedSecPath: string;
+  importedSecrets: { key: string; value: string; overriden: { env: string; secretPath: string } }[];
+};
+
+// to show the environment and folder icon
+export const EnvFolderIcon = ({ env, secretPath }: { env: string; secretPath: string }) => (
+  <div className="inline-flex items-center space-x-2">
+    <div style={{ minWidth: "96px" }}>{env || "-"}</div>
+    {secretPath && (
+      <div className="inline-flex items-center space-x-2 border-l border-mineshaft-600 pl-2">
+        <FontAwesomeIcon icon={faFolder} size="lg" className="text-primary-700" />
+        <span>{secretPath}</span>
+      </div>
+    )}
+  </div>
+);
+
+export const SecretImportItem = ({
+  importedEnv,
+  importedSecPath,
+  onDelete,
+  importedSecrets = []
+}: Props) => {
+  const [isExpanded, setIsExpanded] = useToggle();
+  const { attributes, listeners, transform, transition, setNodeRef, isDragging } = useSortable({
+    id: `${importedEnv}-${importedSecPath}`
+  });
+  const { currentWorkspace } = useWorkspace();
+  const rowEnv = currentWorkspace?.environments?.find(({ slug }) => slug === importedEnv);
+
+  useEffect(() => {
+    if (isDragging) {
+      setIsExpanded.off();
+    }
+  }, [isDragging]);
+
+  const style = {
+    transform: transform ? `translateY(${transform.y ? Math.round(transform.y) : 0}px)` : "",
+    transition
+  };
+
+  return (
+    <>
+      <tr
+        ref={setNodeRef}
+        style={style}
+        className="group flex cursor-default flex-row items-center hover:bg-mineshaft-700"
+        onClick={() => setIsExpanded.toggle()}
+      >
+        <td className="ml-0.5 flex h-10 w-10 items-center justify-center border-none px-4">
+          <FontAwesomeIcon icon={faFileImport} className="text-primary-700" />
+        </td>
+        <td
+          colSpan={2}
+          className="relative flex w-full min-w-[220px] items-center justify-between overflow-hidden text-ellipsis lg:min-w-[240px] xl:min-w-[280px]"
+          style={{ paddingTop: "0", paddingBottom: "0" }}
+        >
+          <div className="flex-grow p-2">
+            <EnvFolderIcon env={rowEnv?.name || ""} secretPath={importedSecPath} />
+          </div>
+          <div className="duration-0 flex h-10 w-16 items-center justify-end space-x-2.5 overflow-hidden border-l border-mineshaft-600 transition-all">
+            <div className="opacity-0 group-hover:opacity-100">
+              <Tooltip content="Change Order" className="capitalize">
+                <IconButton
+                  size="md"
+                  colorSchema="primary"
+                  variant="plain"
+                  ariaLabel="expand"
+                  {...attributes}
+                  {...listeners}
+                >
+                  <FontAwesomeIcon icon={faUpDown} size="lg" />
+                </IconButton>
+              </Tooltip>
+            </div>
+            <div className="opacity-0 group-hover:opacity-100">
+              <Tooltip content="Delete" className="capitalize">
+                <IconButton
+                  size="md"
+                  variant="plain"
+                  colorSchema="danger"
+                  ariaLabel="delete"
+                  onClick={(evt) => {
+                    evt.stopPropagation();
+                    onDelete(importedEnv, importedSecPath);
+                  }}
+                >
+                  <FontAwesomeIcon icon={faXmark} size="lg" />
+                </IconButton>
+              </Tooltip>
+            </div>
+          </div>
+        </td>
+      </tr>
+      <tr>
+        {isExpanded && !isDragging && (
+          <td colSpan={3}>
+            <div className="rounded-md bg-bunker-700 p-4 pb-6">
+              <div className="mb-2 text-lg font-medium">Secrets Imported</div>
+              <TableContainer>
+                <table className="secret-table">
+                  <thead>
+                    <tr>
+                      <td style={{ padding: "0.25rem 1rem" }}>Key</td>
+                      <td style={{ padding: "0.25rem 1rem" }}>Value</td>
+                      <td style={{ padding: "0.25rem 1rem" }}>Override</td>
+                    </tr>
+                  </thead>
+                  <tbody>
+                    {importedSecrets.map(({ key, value, overriden }, index) => (
+                      <tr key={`${importedEnv}-${importedSecPath}-${key}-${index + 1}`}>
+                        <td className="h-10" style={{ padding: "0.25rem 1rem" }}>
+                          {key}
+                        </td>
+                        <td className="h-10" style={{ padding: "0.25rem 1rem" }}>
+                          {value}
+                        </td>
+                        <td className="h-10" style={{ padding: "0.25rem 1rem" }}>
+                          <EnvFolderIcon env={overriden?.env} secretPath={overriden?.secretPath} />
+                        </td>
+                      </tr>
+                    ))}
+                  </tbody>
+                </table>
+              </TableContainer>
+            </div>
+          </td>
+        )}
+      </tr>
+    </>
+  );
+};
@@ -0,0 +1,93 @@
+import { SortableContext, verticalListSortingStrategy } from "@dnd-kit/sortable";
+
+import { useWorkspace } from "@app/context";
+import { DecryptedSecret } from "@app/hooks/api/secrets/types";
+
+import { SecretImportItem } from "./SecretImportItem";
+
+type TImportedSecrets = Array<{
+  environment: string;
+  secretPath: string;
+  folderId: string;
+  secrets: DecryptedSecret[];
+}>;
+
+const SECRET_IN_DASHBOARD = "Present In Dashboard";
+
+export const computeImportedSecretRows = (
+  importedSecEnv: string,
+  importedSecPath: string,
+  importSecrets: TImportedSecrets = [],
+  secrets: DecryptedSecret[] = [],
+  environments: { name: string; slug: string }[] = []
+) => {
+  const importedSecIndex = importSecrets.findIndex(
+    ({ secretPath, environment }) =>
+      secretPath === importedSecPath && importedSecEnv === environment
+  );
+  if (importedSecIndex === -1) return [];
+
+  const importedSec = importSecrets[importedSecIndex];
+
+  const overridenSec: Record<string, { env: string; secretPath: string }> = {};
+  const envSlug2Name: Record<string, string> = {};
+  environments.forEach((el) => {
+    envSlug2Name[el.slug] = el.name;
+  });
+
+  for (let i = importedSecIndex + 1; i < importSecrets.length; i += 1) {
+    importSecrets[i].secrets.forEach((el) => {
+      overridenSec[el.key] = {
+        env: envSlug2Name?.[importSecrets[i].environment] || "unknown",
+        secretPath: importSecrets[i].secretPath
+      };
+    });
+  }
+
+  secrets.forEach((el) => {
+    overridenSec[el.key] = { env: SECRET_IN_DASHBOARD, secretPath: "" };
+  });
+
+  return importedSec.secrets.map(({ key, value }) => ({
+    key,
+    value,
+    overriden: overridenSec?.[key]
+  }));
+};
+
+type Props = {
+  secrets?: DecryptedSecret[];
+  importedSecrets?: TImportedSecrets;
+  onSecretImportDelete: (env: string, secPath: string) => void;
+  items: { id: string; environment: string; secretPath: string }[];
+};
+
+export const SecretImportSection = ({
+  secrets = [],
+  importedSecrets = [],
+  onSecretImportDelete,
+  items = []
+}: Props) => {
+  const { currentWorkspace } = useWorkspace();
+  const environments = currentWorkspace?.environments || [];
+
+  return (
+    <SortableContext items={items} strategy={verticalListSortingStrategy}>
+      {items.map(({ secretPath: impSecPath, environment: importSecEnv, id }) => (
+        <SecretImportItem
+          key={id}
+          importedEnv={importSecEnv}
+          importedSecrets={computeImportedSecretRows(
+            importSecEnv,
+            impSecPath,
+            importedSecrets,
+            secrets,
+            environments
+          )}
+          onDelete={onSecretImportDelete}
+          importedSecPath={impSecPath}
+        />
+      ))}
+    </SortableContext>
+  );
+};
@@ -0,0 +1 @@
+export { SecretImportSection } from "./SecretImportSection";
@@ -407,7 +407,7 @@ export const SecretInputRow = memo(
              <div className="opacity-0 group-hover:opacity-100">
                <Tooltip content="Delete">
                  <IconButton
-                    size="md"
+                    size="lg"
                    variant="plain"
                    colorSchema="danger"
                    ariaLabel="delete"
				`@@ -0,0 +1 @@`
				`export { SecretImportForm } from "./SecretImportForm";`
				`@@ -0,0 +1 @@`
				`export { SecretImportSection } from "./SecretImportSection";`