feat: revamp token creation flow

src/components/Tokens/Add/CreateTokenForm.tsx

@@ -12,13 +12,13 @@ import { Button } from "../../../ui/Buttons/Button";
 import { Modal } from "../../../ui/Modal";
 import FormikTextInput from "../../Forms/Formik/FormikTextInput";
 import FormikSelectDropdown from "../../Forms/Formik/FormikSelectDropdown";
-import FormikCheckbox from "../../Forms/Formik/FormikCheckbox";
 import { toastError, toastSuccess } from "../../Toast/toast";
 import {
   OBJECTS,
   getActionsForObject,
   getAllObjectActions
 } from "../tokenUtils";
+import TokenScopeFieldsGroup from "./TokenScopeFieldsGroup";
 
 export type TokenFormValues = CreateTokenRequest & {
   objectActions: Record<string, boolean>;
@@ -60,21 +60,36 @@ export default function CreateTokenForm({
     );
 
     if (isMcpSetup) {
+      // For MCP setup, pre-select mcp:* (will be shown in Custom mode)
       allObjectActions
         .filter((objAction) => objAction.startsWith("mcp:"))
         .forEach((mcpAction) => {
           initialActions[mcpAction] = true;
         });
+    } else {
+      // For regular token creation, apply "Read" preset by default
+      // This matches the default selected scope in TokenScopeFieldsGroup
+      OBJECTS.forEach((object) => {
+        const actions = getActionsForObject(object);
+        if (actions.includes("read")) {
+          initialActions[`${object}:read`] = true;
+        } else if (object === "mcp" && actions.includes("*")) {
+          initialActions[`${object}:*`] = true;
+        }
+      });
     }
 
     return initialActions;
   };
 
-  const handleSubmit = (values: TokenFormValues) => {
+  const handleFormSubmit = (values: TokenFormValues) => {
     const selectedScopes: Permission[] = Object.entries(values.objectActions)
-      .filter(([_, isChecked]) => isChecked)
+      .filter(([_, isChecked]) => isChecked === true)
       .map(([scopeId]) => {
-        const [object, action] = scopeId.split(":");
+        // Split by first colon only to handle cases like "playbooks:playbook:run"
+        const colonIndex = scopeId.indexOf(":");
+        const object = scopeId.substring(0, colonIndex);
+        const action = scopeId.substring(colonIndex + 1);
         return {
           subject: "", // subject is handled at server
           object,
@@ -109,7 +124,7 @@ export default function CreateTokenForm({
           objectActions: getInitialObjectActions()
         }}
         enableReinitialize
-        onSubmit={handleSubmit}
+        onSubmit={handleFormSubmit}
         validate={(values) => {
           const errors: any = {};
           if (!values.name.trim()) {
@@ -139,37 +154,7 @@ export default function CreateTokenForm({
                     hint="When this token should expire"
                   />
 
-                  <div className="space-y-3">
-                    <div className="text-sm font-medium text-gray-700">
-                      Scopes
-                      <p className="mt-1 text-xs text-gray-500">
-                        Select the permissions to grant to this token
-                      </p>
-                    </div>
-                    <div className="max-h-64 space-y-4 overflow-y-auto rounded-md border bg-gray-50 p-4">
-                      {OBJECTS.map((object) => (
-                        <div key={object} className="space-y-2">
-                          <div className="text-sm font-medium text-gray-800">
-                            {object}
-                          </div>
-                          <div className="grid grid-cols-4 gap-2 pl-4">
-                            {getActionsForObject(object).map((action) => {
-                              const scopeKey = `${object}:${action}`;
-                              return (
-                                <FormikCheckbox
-                                  key={scopeKey}
-                                  name={`objectActions.${scopeKey}`}
-                                  label={action}
-                                  labelClassName="text-sm font-normal text-gray-600"
-                                  inline={true}
-                                />
-                              );
-                            })}
-                          </div>
-                        </div>
-                      ))}
-                    </div>
-                  </div>
+                  <TokenScopeFieldsGroup isMcpSetup={isMcpSetup} />
                 </div>
               </div>
             </div>