Minor changes to oidc claims and mappings

- Made the claims expanded by default (it looked off when they were closed)
- Moved claims from advanced to geneal tab and kept the mapping in the advanced tab
- Added better description for the tooltip

question: i feel like it would be better to access metadata like: `{{identity.auth.oidc.claim.<...>}}` instead of like how it is now: `{{identity.metadata.auth.oidc.claim.<...>}}`? What do you think

.env.migration.example

@@ -1,2 +0,0 @@
-DB_CONNECTION_URI=
-AUDIT_LOGS_DB_CONNECTION_URI=

frontend/src/pages/organization/AccessManagementPage/components/OrgIdentityTab/components/IdentitySection/IdentityOidcAuthForm.tsx

@@ -51,7 +51,7 @@ const schema = z.object({
       key: z.string(),
       value: z.string()
     })
-  ),
+  ).default([{ key: "", value: "" }]),
   claimMetadataMapping: z
     .array(
       z.object({
@@ -59,8 +59,7 @@ const schema = z.object({
         value: z.string()
       })
     )
-    .optional()
+    .default([{ key: "", value: "" }]),
-    .nullable(),
   boundSubject: z.string().optional().default("")
 });
 
@@ -105,7 +104,9 @@ export const IdentityOidcAuthForm = ({
       accessTokenTTL: "2592000",
       accessTokenMaxTTL: "2592000",
       accessTokenNumUsesLimit: "0",
-      accessTokenTrustedIps: [{ ipAddress: "0.0.0.0/0" }, { ipAddress: "::/0" }]
+      accessTokenTrustedIps: [{ ipAddress: "0.0.0.0/0" }, { ipAddress: "::/0" }],
+      boundClaims: [{ key: "", value: "" }],
+      claimMetadataMapping: [{ key: "", value: "" }]
     }
   });
   const {
@@ -167,7 +168,7 @@ export const IdentityOidcAuthForm = ({
         caCert: "",
         boundIssuer: "",
         boundAudiences: "",
-        boundClaims: [],
+        boundClaims: [{ key: "", value: "" }],
         boundSubject: "",
         accessTokenTTL: "2592000",
         accessTokenMaxTTL: "2592000",
@@ -253,7 +254,7 @@ export const IdentityOidcAuthForm = ({
     <form
       onSubmit={handleSubmit(onFormSubmit, (fields) => {
         setTabValue(
-          ["accessTokenTrustedIps", "caCert", "boundClaims"].includes(Object.keys(fields)[0])
+          ["accessTokenTrustedIps", "caCert", "claimMetadataMapping"].includes(Object.keys(fields)[0])
             ? IdentityFormTab.Advanced
             : IdentityFormTab.Configuration
         );
@@ -343,63 +344,6 @@ export const IdentityOidcAuthForm = ({
               </FormControl>
             )}
           />
-          <Controller
-            control={control}
-            defaultValue="2592000"
-            name="accessTokenTTL"
-            render={({ field, fieldState: { error } }) => (
-              <FormControl
-                label="Access Token TTL (seconds)"
-                isError={Boolean(error)}
-                errorText={error?.message}
-              >
-                <Input {...field} placeholder="2592000" type="number" min="0" step="1" />
-              </FormControl>
-            )}
-          />
-          <Controller
-            control={control}
-            defaultValue="2592000"
-            name="accessTokenMaxTTL"
-            render={({ field, fieldState: { error } }) => (
-              <FormControl
-                label="Access Token Max TTL (seconds)"
-                isError={Boolean(error)}
-                errorText={error?.message}
-              >
-                <Input {...field} placeholder="2592000" type="number" min="0" step="1" />
-              </FormControl>
-            )}
-          />
-          <Controller
-            control={control}
-            defaultValue="0"
-            name="accessTokenNumUsesLimit"
-            render={({ field, fieldState: { error } }) => (
-              <FormControl
-                label="Access Token Max Number of Uses"
-                isError={Boolean(error)}
-                errorText={error?.message}
-              >
-                <Input {...field} placeholder="0" type="number" min="0" step="1" />
-              </FormControl>
-            )}
-          />
-        </TabPanel>
-        <TabPanel value={IdentityFormTab.Advanced}>
-          <Controller
-            control={control}
-            name="caCert"
-            render={({ field, fieldState: { error } }) => (
-              <FormControl
-                label="CA Certificate"
-                errorText={error?.message}
-                isError={Boolean(error)}
-              >
-                <TextArea {...field} placeholder="-----BEGIN CERTIFICATE----- ..." />
-              </FormControl>
-            )}
-          />
           {boundClaimsFields.map(({ id }, index) => (
             <div className="mb-3 flex items-end space-x-2" key={id}>
               <Controller
@@ -479,6 +423,65 @@ export const IdentityOidcAuthForm = ({
               Add Claims
             </Button>
           </div>
+
+          <Controller
+            control={control}
+            defaultValue="2592000"
+            name="accessTokenTTL"
+            render={({ field, fieldState: { error } }) => (
+              <FormControl
+                label="Access Token TTL (seconds)"
+                isError={Boolean(error)}
+                errorText={error?.message}
+              >
+                <Input {...field} placeholder="2592000" type="number" min="0" step="1" />
+              </FormControl>
+            )}
+          />
+          <Controller
+            control={control}
+            defaultValue="2592000"
+            name="accessTokenMaxTTL"
+            render={({ field, fieldState: { error } }) => (
+              <FormControl
+                label="Access Token Max TTL (seconds)"
+                isError={Boolean(error)}
+                errorText={error?.message}
+              >
+                <Input {...field} placeholder="2592000" type="number" min="0" step="1" />
+              </FormControl>
+            )}
+          />
+          <Controller
+            control={control}
+            defaultValue="0"
+            name="accessTokenNumUsesLimit"
+            render={({ field, fieldState: { error } }) => (
+              <FormControl
+                label="Access Token Max Number of Uses"
+                isError={Boolean(error)}
+                errorText={error?.message}
+              >
+                <Input {...field} placeholder="0" type="number" min="0" step="1" />
+              </FormControl>
+            )}
+          />
+        </TabPanel>
+        <TabPanel value={IdentityFormTab.Advanced}>
+          <Controller
+            control={control}
+            name="caCert"
+            render={({ field, fieldState: { error } }) => (
+              <FormControl
+                label="CA Certificate"
+                errorText={error?.message}
+                isError={Boolean(error)}
+              >
+                <TextArea {...field} placeholder="-----BEGIN CERTIFICATE----- ..." />
+              </FormControl>
+            )}
+          />
+
           {claimMetadataMappingFields.map(({ id }, index) => (
             <div className="mb-3 flex items-end space-x-2" key={id}>
               <Controller
@@ -488,12 +491,19 @@ export const IdentityOidcAuthForm = ({
                   return (
                     <FormControl
                       className="mb-0 flex-grow"
-                      label={index === 0 ? "Claim Metadata Mapping" : undefined}
+                      label={index === 0 ? "Token Claim Mapping" : undefined}
                       icon={
                         index === 0 ? (
                           <Tooltip
                             className="text-center"
-                            content="Map token claims to metadata. This can later be accessed in attribute based permission as identity.metadata.oidc.claims.<>."
+                            content={
+                              <div className="w-[180px]">
+                                <p>Map OIDC token claims to metadata fields</p>
+                                <p className="text-sm mt-2">Example:</p>
+                                <p className="text-sm mt-1">'role' → 'token.groups'</p>
+                                <p className="text-xs text-gray-400 mt-1">Becomes: identity.metadata.oidc.claims.role</p>
+                              </div>
+                            }
                           >
                             <FontAwesomeIcon icon={faQuestionCircle} size="sm" />
                           </Tooltip>
@@ -505,7 +515,7 @@ export const IdentityOidcAuthForm = ({
                       <Input
                         value={field.value}
                         onChange={(e) => field.onChange(e)}
-                        placeholder="property"
+                        placeholder="Field name"
                       />
                     </FormControl>
                   );
@@ -524,7 +534,7 @@ export const IdentityOidcAuthForm = ({
                       <Input
                         value={field.value}
                         onChange={(e) => field.onChange(e)}
-                        placeholder="key1.nested-key2"
+                        placeholder="Token claim"
                       />
                     </FormControl>
                   );
@@ -554,9 +564,10 @@ export const IdentityOidcAuthForm = ({
               leftIcon={<FontAwesomeIcon icon={faPlus} />}
               size="xs"
             >
-              Add Mapping
+              Add Token Mapping
             </Button>
           </div>
+
           {accessTokenTrustedIpsFields.map(({ id }, index) => (
             <div className="mb-3 flex items-end space-x-2" key={id}>
               <Controller
@@ -627,24 +638,21 @@ export const IdentityOidcAuthForm = ({
           </div>
         </TabPanel>
       </Tabs>
-      <div className="flex items-center">
-        <Button
-          className="mr-4"
-          size="sm"
-          type="submit"
-          isLoading={isSubmitting}
-          isDisabled={isSubmitting}
-        >
-          {isUpdate ? "Update" : "Add"}
-        </Button>
 
-        <Button
+      <div className="mt-8 flex justify-between">
-          colorSchema="secondary"
+        <div className="flex items-center">
-          variant="plain"
+          <Button
-          onClick={() => handlePopUpToggle("identityAuthMethod", false)}
+            onClick={() => handlePopUpToggle("identityAuthMethod", false)}
-        >
+            variant="outline_bg"
-          Cancel
+            className="mr-4"
-        </Button>
+            isDisabled={isSubmitting}
+          >
+            Cancel
+          </Button>
+          <Button type="submit" isLoading={isSubmitting}>
+            {isUpdate ? "Update" : "Add"} Auth Method
+          </Button>
+        </div>
       </div>
     </form>
   );