feat(secret-ref): implemented ui for service token changes

frontend/src/hooks/api/serviceTokens/types.ts

@@ -1,9 +1,13 @@
+export type ServiceTokenScope = {
+  environment: string;
+  secretPath: string;
+};
+
 export type ServiceToken = {
   _id: string;
   name: string;
   workspace: string;
-  environment: string;
-  secretPath: string;
+  scopes: ServiceTokenScope[];
   user: string;
   expiresAt: string;
   createdAt: string;
@@ -14,9 +18,8 @@ export type ServiceToken = {
 export type CreateServiceTokenDTO = {
   name: string;
   workspaceId: string;
-  environment: string;
+  scopes: ServiceTokenScope[];
   expiresIn: number;
-  secretPath: string;
   encryptedKey: string;
   iv: string;
   tag: string;

frontend/src/views/Settings/ProjectSettingsPage/components/ServiceTokenSection/AddServiceTokenModal.tsx

@@ -1,9 +1,9 @@
 import crypto from "crypto";
 
 import { useEffect, useState } from "react";
-import { Controller, useForm } from "react-hook-form";
+import { Controller, useFieldArray, useForm } from "react-hook-form";
 import { useTranslation } from "react-i18next";
-import { faCheck, faCopy } from "@fortawesome/free-solid-svg-icons";
+import { faCheck, faCopy, faPlus, faTrashCan } from "@fortawesome/free-solid-svg-icons";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import { yupResolver } from "@hookform/resolvers/yup";
 import * as yup from "yup";
@@ -27,10 +27,7 @@ import {
 } from "@app/components/v2";
 import { useWorkspace } from "@app/context";
 import { useToggle } from "@app/hooks";
-import {
-    useCreateServiceToken,
-    useGetUserWsKey
-} from "@app/hooks/api";
+import { useCreateServiceToken, useGetUserWsKey } from "@app/hooks/api";
 import { UsePopUpState } from "@app/hooks/usePopUp";
 
 const apiTokenExpiry = [
@@ -44,8 +41,16 @@ const apiTokenExpiry = [
 
 const schema = yup.object({
   name: yup.string().max(100).required().label("Service Token Name"),
-  environment: yup.string().max(50).required().label("Environment"),
-  secretPath: yup.string().required().default("/").label("Secret Path"),
+  scopes: yup
+    .array(
+      yup.object({
+        environment: yup.string().max(50).required().label("Environment"),
+        secretPath: yup.string().required().default("/").label("Secret Path")
+      })
+    )
+    .min(1)
+    .required()
+    .label("Scope"),
   expiresIn: yup.string().optional().label("Service Token Expiration"),
   permissions: yup
     .object()
@@ -60,284 +65,301 @@ const schema = yup.object({
 export type FormData = yup.InferType<typeof schema>;
 
 type Props = {
-    popUp: UsePopUpState<["createAPIToken"]>;
-    handlePopUpToggle: (popUpName: keyof UsePopUpState<["createAPIToken"]>, state?: boolean) => void;
+  popUp: UsePopUpState<["createAPIToken"]>;
+  handlePopUpToggle: (popUpName: keyof UsePopUpState<["createAPIToken"]>, state?: boolean) => void;
 };
 
-export const AddServiceTokenModal = ({
-    popUp,
-    handlePopUpToggle
-}: Props) => {
-    const { t } = useTranslation();
-    const { createNotification } = useNotificationContext();
-    const { currentWorkspace } = useWorkspace();
-    const {
-        control,
-        reset,
-        handleSubmit,
-        formState: { isSubmitting }
-    } = useForm<FormData>({
-        resolver: yupResolver(schema)
-    });
+export const AddServiceTokenModal = ({ popUp, handlePopUpToggle }: Props) => {
+  const { t } = useTranslation();
+  const { createNotification } = useNotificationContext();
+  const { currentWorkspace } = useWorkspace();
+  const {
+    control,
+    reset,
+    handleSubmit,
+    formState: { isSubmitting }
+  } = useForm<FormData>({
+    resolver: yupResolver(schema),
+    defaultValues: {
+      scopes: [{ secretPath: "/", environment: currentWorkspace?.environments?.[0]?.slug }]
+    }
+  });
 
-    const [newToken, setToken] = useState("");
-    const [isTokenCopied, setIsTokenCopied] = useToggle(false);
+  const { fields: tokenScopes, append, remove } = useFieldArray({ control, name: "scopes" });
 
-    const { data: latestFileKey } = useGetUserWsKey(currentWorkspace?._id ?? "");
-    const createServiceToken = useCreateServiceToken();
-    const hasServiceToken = Boolean(newToken);
+  const [newToken, setToken] = useState("");
+  const [isTokenCopied, setIsTokenCopied] = useToggle(false);
 
-    useEffect(() => {
-        let timer: NodeJS.Timeout;
-        if (isTokenCopied) {
-            timer = setTimeout(() => setIsTokenCopied.off(), 2000);
-        }
+  const { data: latestFileKey } = useGetUserWsKey(currentWorkspace?._id ?? "");
+  const createServiceToken = useCreateServiceToken();
+  const hasServiceToken = Boolean(newToken);
 
-        return () => clearTimeout(timer);
-    }, [isTokenCopied]);
+  useEffect(() => {
+    let timer: NodeJS.Timeout;
+    if (isTokenCopied) {
+      timer = setTimeout(() => setIsTokenCopied.off(), 2000);
+    }
 
-    const copyTokenToClipboard = () => {
-        navigator.clipboard.writeText(newToken);
-        setIsTokenCopied.on();
-    };
+    return () => clearTimeout(timer);
+  }, [isTokenCopied]);
 
-    const onFormSubmit = async ({
+  const copyTokenToClipboard = () => {
+    navigator.clipboard.writeText(newToken);
+    setIsTokenCopied.on();
+  };
+
+  const onFormSubmit = async ({ name, scopes, expiresIn, permissions }: FormData) => {
+    try {
+      if (!currentWorkspace?._id) return;
+      if (!latestFileKey) return;
+
+      const key = decryptAssymmetric({
+        ciphertext: latestFileKey.encryptedKey,
+        nonce: latestFileKey.nonce,
+        publicKey: latestFileKey.sender.publicKey,
+        privateKey: localStorage.getItem("PRIVATE_KEY") as string
+      });
+
+      const randomBytes = crypto.randomBytes(16).toString("hex");
+
+      const { ciphertext, iv, tag } = encryptSymmetric({
+        plaintext: key,
+        key: randomBytes
+      });
+
+      const { serviceToken } = await createServiceToken.mutateAsync({
+        encryptedKey: ciphertext,
+        iv,
+        tag,
+        scopes,
+        expiresIn: Number(expiresIn),
         name,
-        environment,
-        secretPath,
-        expiresIn,
-        permissions
-    }: FormData) => {
-        try {
-            if (!currentWorkspace?._id) return;
-            if (!latestFileKey) return;
+        workspaceId: currentWorkspace._id,
+        randomBytes,
+        permissions: Object.entries(permissions)
+          .filter(([, permissionsValue]) => permissionsValue)
+          .map(([permissionsKey]) => permissionsKey)
+      });
 
-            const key = decryptAssymmetric({
-                ciphertext: latestFileKey.encryptedKey,
-                nonce: latestFileKey.nonce,
-                publicKey: latestFileKey.sender.publicKey,
-                privateKey: localStorage.getItem("PRIVATE_KEY") as string
-            });
+      setToken(serviceToken);
+      createNotification({
+        text: "Successfully created a service token",
+        type: "success"
+      });
+    } catch (err) {
+      console.error(err);
+      createNotification({
+        text: "Failed to create a service token",
+        type: "error"
+      });
+    }
+  };
 
-            const randomBytes = crypto.randomBytes(16).toString("hex");
-
-            const { ciphertext, iv, tag } = encryptSymmetric({
-                plaintext: key,
-                key: randomBytes
-            });
-
-            const { serviceToken } = await createServiceToken.mutateAsync({
-                encryptedKey: ciphertext,
-                iv,
-                tag,
-                environment,
-                secretPath,
-                expiresIn: Number(expiresIn),
-                name,
-                workspaceId: currentWorkspace._id,
-                randomBytes,
-                permissions: Object.entries(permissions)
-                .filter(([, permissionsValue]) => permissionsValue)
-                .map(([permissionsKey]) => permissionsKey)
-            });
-            
-            setToken(serviceToken);
-
-            createNotification({
-                text: "Successfully created a service token",
-                type: "success"
-            });
-        
-        } catch (err) {
-            console.error(err);
-            createNotification({
-                text: "Failed to create a service token",
-                type: "error"
-            });
+  return (
+    <Modal
+      isOpen={popUp?.createAPIToken?.isOpen}
+      onOpenChange={(open) => {
+        handlePopUpToggle("createAPIToken", open);
+        reset();
+        setToken("");
+      }}
+    >
+      <ModalContent
+        title={
+          t("section.token.add-dialog.title", {
+            target: currentWorkspace?.name
+          }) as string
         }
-    };
-
-    return (
-        <Modal
-            isOpen={popUp?.createAPIToken?.isOpen}
-            onOpenChange={(open) => {
-                handlePopUpToggle("createAPIToken", open);
-                reset();
-                setToken("");
-            }}
-        >
-            <ModalContent
-                title={
-                    t("section.token.add-dialog.title", {
-                    target: currentWorkspace?.name
-                    }) as string
-                }
-                subTitle={t("section.token.add-dialog.description") as string}
-            >
-                {!hasServiceToken ? (
-                    <form onSubmit={handleSubmit(onFormSubmit)}>
-                        <Controller
-                            control={control}
-                            name="name"
-                            defaultValue=""
-                            render={({ field, fieldState: { error } }) => (
-                            <FormControl
-                                label={t("section.token.add-dialog.name")}
-                                isError={Boolean(error)}
-                                errorText={error?.message}
-                            >
-                                <Input {...field} placeholder="Type your token name" />
-                            </FormControl>
-                            )}
-                        />
-                        <Controller
-                            control={control}
-                            name="environment"
-                            defaultValue={currentWorkspace?.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"
-                                    >
-                                        {currentWorkspace?.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="Secrets Path"
-                                isError={Boolean(error)}
-                                helperText="Tokens can be scoped to a folder path. Default path is /"
-                                errorText={error?.message}
-                            >
-                                <Input {...field} placeholder="Provide a path, default is /" />
-                            </FormControl>
-                            )}
-                        />
-                        <Controller
-                            control={control}
-                            name="expiresIn"
-                            defaultValue={String(apiTokenExpiry?.[0]?.value)}
-                            render={({ field: { onChange, ...field }, fieldState: { error } }) => (
-                                <FormControl
-                                    label="Expiration"
-                                    errorText={error?.message}
-                                    isError={Boolean(error)}
-                                >
-                                    <Select
-                                        defaultValue={field.value}
-                                        {...field}
-                                        onValueChange={(e) => onChange(e)}
-                                        className="w-full"
-                                    >
-                                        {apiTokenExpiry.map(({ label, value }) => (
-                                            <SelectItem value={String(value || "")} key={label}>
-                                                {label}
-                                            </SelectItem>
-                                        ))}
-                                    </Select>
-                                </FormControl>
-                            )}
-                        />
-                        <Controller
-                            control={control}
-                            name="permissions"
-                            defaultValue={{
-                                read: true,
-                                write: false
-                            }}
-                            render={({ field: { onChange, value }, fieldState: { error } }) => {
-                                const options = [
-                                    {
-                                        label: "Read (default)",
-                                        value: "read"
-                                    },
-                                    {
-                                        label: "Write (optional)",
-                                        value: "write"
-                                    }
-                                ];
-
-                                return (
-                                    <FormControl
-                                        label="Permissions"
-                                        errorText={error?.message}
-                                        isError={Boolean(error)}
-                                    >
-                                        <>
-                                            {options.map(({ label, value: optionValue }) => {
-                                            return (
-                                                <Checkbox
-                                                    id={value[optionValue]}
-                                                    key={optionValue}
-                                                    className="data-[state=checked]:bg-primary"
-                                                    isChecked={value[optionValue]}
-                                                    isDisabled={optionValue === "read"}
-                                                    onCheckedChange={(state) => {
-                                                        onChange({
-                                                            ...value,
-                                                            [optionValue]: state
-                                                        });
-                                                    }}
-                                                >
-                                                    {label}
-                                                </Checkbox>
-                                            );
-                                            })}
-                                        </>
-                                    </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>
-                ) : (
-                    <div className="mt-2 mb-3 mr-2 flex items-center justify-end rounded-md bg-white/[0.07] p-2 text-base text-gray-400">
-                        <p className="mr-4 break-all">{newToken}</p>
-                        <IconButton
-                            ariaLabel="copy icon"
-                            colorSchema="secondary"
-                            className="group relative"
-                            onClick={copyTokenToClipboard}
-                        >
-                            <FontAwesomeIcon icon={isTokenCopied ? faCheck : faCopy} />
-                            <span className="absolute -left-8 -top-20 hidden w-28 translate-y-full rounded-md bg-bunker-800 py-2 pl-3 text-center text-sm text-gray-400 group-hover:flex group-hover:animate-fadeIn">
-                                {t("common.click-to-copy")}
-                            </span>
-                        </IconButton>
-                    </div>
+        subTitle={t("section.token.add-dialog.description") as string}
+      >
+        {!hasServiceToken ? (
+          <form onSubmit={handleSubmit(onFormSubmit)}>
+            <Controller
+              control={control}
+              name="name"
+              defaultValue=""
+              render={({ field, fieldState: { error } }) => (
+                <FormControl
+                  label={t("section.token.add-dialog.name")}
+                  isError={Boolean(error)}
+                  errorText={error?.message}
+                >
+                  <Input {...field} placeholder="Type your token name" />
+                </FormControl>
               )}
-            </ModalContent>
-        </Modal> 
-    );
-}
+            />
+            {tokenScopes.map(({ id }, index) => (
+              <div className="mb-3 flex items-end space-x-2" key={id}>
+                <Controller
+                  control={control}
+                  name={`scopes.${index}.environment`}
+                  defaultValue={currentWorkspace?.environments?.[0]?.slug}
+                  render={({ field: { onChange, ...field }, fieldState: { error } }) => (
+                    <FormControl
+                      className="mb-0"
+                      label={index === 0 ? "Environment" : undefined}
+                      errorText={error?.message}
+                      isError={Boolean(error)}
+                    >
+                      <Select
+                        defaultValue={field.value}
+                        {...field}
+                        onValueChange={(e) => onChange(e)}
+                        className="w-full"
+                      >
+                        {currentWorkspace?.environments.map(({ name, slug }) => (
+                          <SelectItem value={slug} key={slug}>
+                            {name}
+                          </SelectItem>
+                        ))}
+                      </Select>
+                    </FormControl>
+                  )}
+                />
+                <Controller
+                  control={control}
+                  name={`scopes.${index}.secretPath`}
+                  defaultValue="/"
+                  render={({ field, fieldState: { error } }) => (
+                    <FormControl
+                      className="mb-0 flex-grow"
+                      label={index === 0 ? "Secrets Path" : undefined}
+                      isError={Boolean(error)}
+                      errorText={error?.message}
+                    >
+                      <Input {...field} placeholder="can be /, /nested/**, /**/deep" />
+                    </FormControl>
+                  )}
+                />
+                <IconButton
+                  className="p-3"
+                  ariaLabel="remove"
+                  colorSchema="danger"
+                  onClick={() => remove(index)}
+                >
+                  <FontAwesomeIcon icon={faTrashCan} size="sm" />
+                </IconButton>
+              </div>
+            ))}
+            <div className="my-4 ml-1">
+              <Button
+                variant="outline_bg"
+                onClick={() =>
+                  append({
+                    environment: currentWorkspace?.environments?.[0]?.slug || "",
+                    secretPath: ""
+                  })
+                }
+                leftIcon={<FontAwesomeIcon icon={faPlus} />}
+                size="xs"
+              >
+                Add Scope
+              </Button>
+            </div>
+            <Controller
+              control={control}
+              name="expiresIn"
+              defaultValue={String(apiTokenExpiry?.[0]?.value)}
+              render={({ field: { onChange, ...field }, fieldState: { error } }) => (
+                <FormControl label="Expiration" errorText={error?.message} isError={Boolean(error)}>
+                  <Select
+                    defaultValue={field.value}
+                    {...field}
+                    onValueChange={(e) => onChange(e)}
+                    className="w-full"
+                  >
+                    {apiTokenExpiry.map(({ label, value }) => (
+                      <SelectItem value={String(value || "")} key={label}>
+                        {label}
+                      </SelectItem>
+                    ))}
+                  </Select>
+                </FormControl>
+              )}
+            />
+            <Controller
+              control={control}
+              name="permissions"
+              defaultValue={{
+                read: true,
+                write: false
+              }}
+              render={({ field: { onChange, value }, fieldState: { error } }) => {
+                const options = [
+                  {
+                    label: "Read (default)",
+                    value: "read"
+                  },
+                  {
+                    label: "Write (optional)",
+                    value: "write"
+                  }
+                ];
+
+                return (
+                  <FormControl
+                    label="Permissions"
+                    errorText={error?.message}
+                    isError={Boolean(error)}
+                  >
+                    <>
+                      {options.map(({ label, value: optionValue }) => {
+                        return (
+                          <Checkbox
+                            id={value[optionValue]}
+                            key={optionValue}
+                            className="data-[state=checked]:bg-primary"
+                            isChecked={value[optionValue]}
+                            isDisabled={optionValue === "read"}
+                            onCheckedChange={(state) => {
+                              onChange({
+                                ...value,
+                                [optionValue]: state
+                              });
+                            }}
+                          >
+                            {label}
+                          </Checkbox>
+                        );
+                      })}
+                    </>
+                  </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>
+        ) : (
+          <div className="mt-2 mb-3 mr-2 flex items-center justify-end rounded-md bg-white/[0.07] p-2 text-base text-gray-400">
+            <p className="mr-4 break-all">{newToken}</p>
+            <IconButton
+              ariaLabel="copy icon"
+              colorSchema="secondary"
+              className="group relative"
+              onClick={copyTokenToClipboard}
+            >
+              <FontAwesomeIcon icon={isTokenCopied ? faCheck : faCopy} />
+              <span className="absolute -left-8 -top-20 hidden w-28 translate-y-full rounded-md bg-bunker-800 py-2 pl-3 text-center text-sm text-gray-400 group-hover:flex group-hover:animate-fadeIn">
+                {t("common.click-to-copy")}
+              </span>
+            </IconButton>
+          </div>
+        )}
+      </ModalContent>
+    </Modal>
+  );
+};

frontend/src/views/Settings/ProjectSettingsPage/components/ServiceTokenSection/ServiceTokenSection.tsx

@@ -3,14 +3,9 @@ import { faPlus } from "@fortawesome/free-solid-svg-icons";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 
 import { useNotificationContext } from "@app/components/context/Notifications/NotificationProvider";
-import {
-  Button,
-  DeleteActionModal,
-} from "@app/components/v2";
+import { Button, DeleteActionModal } from "@app/components/v2";
 import { usePopUp } from "@app/hooks";
-import {
-  useDeleteServiceToken
-} from "@app/hooks/api";
+import { useDeleteServiceToken } from "@app/hooks/api";
 
 import { AddServiceTokenModal } from "./AddServiceTokenModal";
 import { ServiceTokenTable } from "./ServiceTokenTable";
@@ -29,7 +24,9 @@ export const ServiceTokenSection = () => {
 
   const onDeleteApproved = async () => {
     try {
-      deleteServiceToken.mutateAsync((popUp?.deleteAPITokenConfirmation?.data as DeleteModalData)?.id);
+      deleteServiceToken.mutateAsync(
+        (popUp?.deleteAPITokenConfirmation?.data as DeleteModalData)?.id
+      );
       createNotification({
         text: "Successfully deleted service token",
         type: "success"
@@ -46,32 +43,29 @@ export const ServiceTokenSection = () => {
   };
 
   return (
-    <div className="mb-6 p-4 bg-mineshaft-900 max-w-screen-lg rounded-lg border border-mineshaft-600">
-      <div className="flex justify-between mb-8">
-          <p className="text-xl font-semibold text-mineshaft-100">{t("section.token.service-tokens")}</p>
-          <Button 
-            colorSchema="secondary" 
-            leftIcon={<FontAwesomeIcon icon={faPlus} />}
-            onClick={() => {
-              handlePopUpOpen("createAPIToken");
-            }}
-          >
-            Create token
-          </Button>
+    <div className="mb-6 max-w-screen-lg rounded-lg border border-mineshaft-600 bg-mineshaft-900 p-4">
+      <div className="mb-2 flex justify-between">
+        <p className="text-xl font-semibold text-mineshaft-100">
+          {t("section.token.service-tokens")}
+        </p>
+        <Button
+          colorSchema="secondary"
+          leftIcon={<FontAwesomeIcon icon={faPlus} />}
+          onClick={() => {
+            handlePopUpOpen("createAPIToken");
+          }}
+        >
+          Create token
+        </Button>
       </div>
-      <p className="text-gray-400 mb-8">{t("section.token.service-tokens-description")}</p>
-      <ServiceTokenTable 
-        handlePopUpOpen={handlePopUpOpen}
-      />
-      <AddServiceTokenModal 
-        popUp={popUp}
-        handlePopUpToggle={handlePopUpToggle}
-      />  
+      <p className="mb-8 text-gray-400">{t("section.token.service-tokens-description")}</p>
+      <ServiceTokenTable handlePopUpOpen={handlePopUpOpen} />
+      <AddServiceTokenModal popUp={popUp} handlePopUpToggle={handlePopUpToggle} />
       <DeleteActionModal
         isOpen={popUp.deleteAPITokenConfirmation.isOpen}
-        title={
-          `Delete ${(popUp?.deleteAPITokenConfirmation?.data as DeleteModalData)?.name || " "} service token?`
-        }
+        title={`Delete ${
+          (popUp?.deleteAPITokenConfirmation?.data as DeleteModalData)?.name || " "
+        } service token?`}
         onChange={(isOpen) => handlePopUpToggle("deleteAPITokenConfirmation", isOpen)}
         deleteKey={(popUp?.deleteAPITokenConfirmation?.data as DeleteModalData)?.name}
         onClose={() => handlePopUpClose("deleteAPITokenConfirmation")}

frontend/src/views/Settings/ProjectSettingsPage/components/ServiceTokenSection/ServiceTokenTable.tsx

@@ -1,4 +1,4 @@
-import { faKey, faTrashCan } from "@fortawesome/free-solid-svg-icons";
+import { faFolder, faKey, faTrashCan } from "@fortawesome/free-solid-svg-icons";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 
 import {
@@ -18,71 +18,82 @@ import { useGetUserWsServiceTokens } from "@app/hooks/api";
 import { UsePopUpState } from "@app/hooks/usePopUp";
 
 type Props = {
-    handlePopUpOpen: (
-        popUpName: keyof UsePopUpState<["deleteAPITokenConfirmation"]>,
-        {
-            name,
-            id
-        }: {
-            name: string;
-            id: string;
-        }
-    ) => void;
+  handlePopUpOpen: (
+    popUpName: keyof UsePopUpState<["deleteAPITokenConfirmation"]>,
+    {
+      name,
+      id
+    }: {
+      name: string;
+      id: string;
+    }
+  ) => void;
 };
 
-export const ServiceTokenTable = ({
-    handlePopUpOpen
-}: Props) => {
-    const { currentWorkspace } = useWorkspace();
-    const { data, isLoading } = useGetUserWsServiceTokens({
-        workspaceID: currentWorkspace?._id || ""
-    });
+export const ServiceTokenTable = ({ handlePopUpOpen }: Props) => {
+  const { currentWorkspace } = useWorkspace();
+  const { data, isLoading } = useGetUserWsServiceTokens({
+    workspaceID: currentWorkspace?._id || ""
+  });
 
-    return (
-        <TableContainer>
-            <Table>
-                <THead>
-                    <Tr>
-                    <Th>Token Name</Th>
-                    <Th>Environment</Th>
-                    <Th>Secret Path</Th>
-                    <Th>Valid Until</Th>
-                    <Th aria-label="button" />
-                    </Tr>
-                </THead>
-                <TBody>
-                    {isLoading && <TableSkeleton columns={4} key="project-service-tokens" />}
-                    {!isLoading && data && data.map((row) => (
-                        <Tr key={row._id}>
-                            <Td>{row.name}</Td>
-                            <Td>{row.environment}</Td>
-                            <Td>{row.secretPath}</Td>
-                            <Td>{row.expiresAt && new Date(row.expiresAt).toUTCString()}</Td>
-                            <Td className="flex items-center justify-end">
-                                <IconButton
-                                onClick={() =>
-                                    handlePopUpOpen("deleteAPITokenConfirmation", {
-                                        name: row.name,
-                                        id: row._id
-                                    })
-                                }
-                                colorSchema="danger"
-                                ariaLabel="delete"
-                                >
-                                <FontAwesomeIcon icon={faTrashCan} />
-                                </IconButton>
-                            </Td>
-                        </Tr>
+  return (
+    <TableContainer>
+      <Table>
+        <THead>
+          <Tr>
+            <Th>Token Name</Th>
+            <Th>Envrionment - Secret Path</Th>
+            <Th>Valid Until</Th>
+            <Th aria-label="button" />
+          </Tr>
+        </THead>
+        <TBody>
+          {isLoading && <TableSkeleton columns={4} key="project-service-tokens" />}
+          {!isLoading &&
+            data &&
+            data.map((row) => (
+              <Tr key={row._id}>
+                <Td>{row.name}</Td>
+                <Td>
+                  <div className="mb-2 flex flex-col flex-wrap space-y-1">
+                    {row?.scopes.map(({ secretPath, environment }) => (
+                      <div
+                        key={`${row._id}-${environment}-${secretPath}`}
+                        className="inline-flex items-center space-x-1 rounded-md border border-mineshaft-600 p-1 px-2"
+                      >
+                        <div className="mr-2 border-r border-mineshaft-600 pr-2">{environment}</div>
+                        <FontAwesomeIcon icon={faFolder} size="sm" />
+                        <span className="pl-2">{secretPath}</span>
+                      </div>
                     ))}
-                    {!isLoading && data && data?.length === 0 && (
-                        <Tr>
-                            <Td colSpan={4} className="bg-mineshaft-800 text-center text-bunker-400">
-                            <EmptyState title="No service tokens found" icon={faKey} />
-                            </Td>
-                        </Tr>
-                    )}
-                </TBody>
-            </Table>
-        </TableContainer> 
-    );
-}
+                  </div>
+                </Td>
+                <Td>{row.expiresAt && new Date(row.expiresAt).toUTCString()}</Td>
+                <Td>
+                  <IconButton
+                    onClick={() =>
+                      handlePopUpOpen("deleteAPITokenConfirmation", {
+                        name: row.name,
+                        id: row._id
+                      })
+                    }
+                    colorSchema="danger"
+                    ariaLabel="delete"
+                  >
+                    <FontAwesomeIcon icon={faTrashCan} />
+                  </IconButton>
+                </Td>
+              </Tr>
+            ))}
+          {!isLoading && data && data?.length === 0 && (
+            <Tr>
+              <Td colSpan={4} className="bg-mineshaft-800 text-center text-bunker-400">
+                <EmptyState title="No service tokens found" icon={faKey} />
+              </Td>
+            </Tr>
+          )}
+        </TBody>
+      </Table>
+    </TableContainer>
+  );
+};