Merge pull request #633 from akhilmhdh/feat/folders-service-token

Folder scoped service token

frontend/src/components/navigation/NavHeader.tsx

@@ -121,7 +121,7 @@ export default function NavHeader({
                 <span className="text-sm font-semibold text-bunker-300">{name}</span>
               ) : (
                 <Link passHref legacyBehavior href={{ pathname: '/dashboard/[id]', query }}>
-                  <a className="text-sm font-semibold capitalize text-primary/80 hover:text-primary">
+                  <a className="text-sm font-semibold text-primary/80 hover:text-primary">
                     {name === 'root' ? selectedEnv?.name : name}
                   </a>
                 </Link>

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

@@ -3,6 +3,7 @@ export type ServiceToken = {
   name: string;
   workspace: string;
   environment: string;
+  secretPath: string;
   user: string;
   expiresAt: string;
   createdAt: string;
@@ -15,6 +16,7 @@ export type CreateServiceTokenDTO = {
   workspaceId: string;
   environment: string;
   expiresIn: number;
+  secretPath: string;
   encryptedKey: string;
   iv: string;
   tag: string;

frontend/src/views/DashboardPage/components/FolderSection/FolderSection.tsx

@@ -23,17 +23,20 @@ export const FolderSection = ({
       {folders
         .filter(({ name }) => name.toLowerCase().includes(search.toLowerCase()))
         .map(({ id, name }) => (
-          <tr key={id} className="group flex flex-row items-center hover:bg-mineshaft-700 cursor-default">
-            <td className="flex h-10 w-10 items-center justify-center border-none px-4 ml-0.5">
+          <tr
+            key={id}
+            className="group flex cursor-default flex-row items-center hover:bg-mineshaft-700"
+          >
+            <td className="ml-0.5 flex h-10 w-10 items-center justify-center border-none px-4">
               <FontAwesomeIcon icon={faFolder} className="text-primary-700" />
             </td>
             <td
               colSpan={2}
-              className="relative flex w-full min-w-[220px] items-center justify-between overflow-hidden text-ellipsis uppercase lg:min-w-[240px] xl:min-w-[280px]"
+              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 cursor-default"
+                className="flex-grow cursor-default p-2"
                 onKeyDown={() => null}
                 tabIndex={0}
                 role="button"

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

@@ -217,7 +217,8 @@ export const ProjectSettingsPage = () => {
     environment,
     expiresIn,
     name,
-    permissions
+    permissions,
+    secretPath
   }: CreateServiceToken) => {
     // type guard
     if (!latestFileKey) return '';
@@ -241,6 +242,7 @@ export const ProjectSettingsPage = () => {
         iv,
         tag,
         environment,
+        secretPath,
         expiresIn: Number(expiresIn),
         name,
         workspaceId: workspaceID,

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

@@ -42,8 +42,9 @@ const apiTokenExpiry = [
 ];
 
 const createServiceTokenSchema = yup.object({
-  name: yup.string().required().label('Service Token Name'),
-  environment: yup.string().required().label('Environment'),
+  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'),
   expiresIn: yup.string().optional().label('Service Token Expiration'),
   permissions: yup
     .object()
@@ -189,6 +190,22 @@ export const ServiceTokenSection = ({
                       </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"
@@ -317,6 +334,7 @@ export const ServiceTokenSection = ({
             <Tr>
               <Th>Token Name</Th>
               <Th>Environment</Th>
+              <Th>Secret Path</Th>
               <Th>Valid Until</Th>
               <Th aria-label="button" />
             </Tr>
@@ -328,6 +346,7 @@ export const ServiceTokenSection = ({
                 <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