feat(folder-scoped-st): implemented frontend ui for folder scoped service token

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/Settings/ProjectSettingsPage/ProjectSettingsPage.tsx

@@ -219,7 +219,8 @@ export const ProjectSettingsPage = () => {
     environment,
     expiresIn,
     name,
-    permissions
+    permissions,
+    secretPath
   }: CreateServiceToken) => {
     // type guard
     if (!latestFileKey) return '';
@@ -243,6 +244,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()
@@ -201,6 +202,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"
@@ -329,6 +346,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>
@@ -340,6 +358,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