chore: requested changes

frontend/src/components/v2/Badge/Badge.tsx

@@ -15,8 +15,7 @@ const badgeVariants = cva(
       variant: {
         primary: "bg-yellow/20 text-yellow",
         danger: "bg-red/20 text-red",
-        success: "bg-green/20 text-green",
+        success: "bg-green/20 text-green"
-        info: "bg-blue-500/20 text-blue-500"
       }
     }
   }

frontend/src/views/Org/IdentityPage/components/IdentityAuthenticationSection/IdentityAuthenticationSection.tsx

@@ -3,7 +3,7 @@ import { faPencil, faPlus } from "@fortawesome/free-solid-svg-icons";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 
 import { OrgPermissionCan } from "@app/components/permissions";
-import { IconButton, Select, SelectItem, Tooltip } from "@app/components/v2";
+import { Button, IconButton, Select, SelectItem, Tooltip } from "@app/components/v2";
 import { OrgPermissionActions, OrgPermissionSubjects } from "@app/context";
 import { useGetIdentityById } from "@app/hooks/api";
 import { IdentityAuthMethod, identityAuthToNameMap } from "@app/hooks/api/identities";
@@ -81,57 +81,74 @@ export const IdentityAuthenticationSection = ({
           }}
         </OrgPermissionCan>
       </div>
-      <div className="flex w-full items-center gap-2 pt-2">
+      {data.identity.authMethods.length > 0 ? (
-        {data.identity.authMethods.length > 0 && (
+        <>
-          <>
+          <div className="py-4">
-            <div className="w-full">
+            <div className="flex justify-between">
-              <Select
+              <p className="ml-px mb-0.5 text-sm font-semibold text-mineshaft-300">Auth Method</p>
-                className="w-full"
-                value={selectedAuthMethod as string}
-                onValueChange={(value) => setSelectedAuthMethod(value as IdentityAuthMethod)}
-              >
-                {(data.identity?.authMethods || []).map((authMethod) => (
-                  <SelectItem key={authMethod || authMethod} value={authMethod}>
-                    {identityAuthToNameMap[authMethod]}
-                  </SelectItem>
-                ))}
-              </Select>
             </div>
-            <div>
+            <div className="flex items-center gap-2">
-              <Tooltip content="Edit auth method">
+              <div className="w-full">
-                <IconButton
+                <Select
-                  onClick={() => {
+                  className="w-full"
-                    handlePopUpOpen("identityAuthMethod", {
+                  value={selectedAuthMethod as string}
-                      identityId,
+                  onValueChange={(value) => setSelectedAuthMethod(value as IdentityAuthMethod)}
-                      name: data.identity.name,
-                      authMethod: selectedAuthMethod,
-                      allAuthMethods: data.identity.authMethods
-                    });
-                  }}
-                  ariaLabel="copy icon"
-                  variant="plain"
-                  className="group relative"
                 >
-                  <FontAwesomeIcon icon={faPencil} />
+                  {(data.identity?.authMethods || []).map((authMethod) => (
-                </IconButton>
+                    <SelectItem key={authMethod || authMethod} value={authMethod}>
-              </Tooltip>{" "}
+                      {identityAuthToNameMap[authMethod]}
+                    </SelectItem>
+                  ))}
+                </Select>
+              </div>
+              <div>
+                <Tooltip content="Edit auth method">
+                  <IconButton
+                    onClick={() => {
+                      handlePopUpOpen("identityAuthMethod", {
+                        identityId,
+                        name: data.identity.name,
+                        authMethod: selectedAuthMethod,
+                        allAuthMethods: data.identity.authMethods
+                      });
+                    }}
+                    ariaLabel="copy icon"
+                    variant="plain"
+                    className="group relative"
+                  >
+                    <FontAwesomeIcon icon={faPencil} />
+                  </IconButton>
+                </Tooltip>{" "}
+              </div>
             </div>
-          </>
+          </div>
-        )}
+          {selectedAuthMethod === IdentityAuthMethod.UNIVERSAL_AUTH && (
-      </div>
+            <IdentityClientSecrets identityId={identityId} handlePopUpOpen={handlePopUpOpen} />
-      <div className="py-4">
+          )}
-        <div className="flex justify-between">
+          {selectedAuthMethod === IdentityAuthMethod.TOKEN_AUTH && (
-          <p className="text-sm font-semibold text-mineshaft-300">Auth Method</p>
+            <IdentityTokens identityId={identityId} handlePopUpOpen={handlePopUpOpen} />
+          )}
+        </>
+      ) : (
+        <div className="w-full space-y-2 pt-2">
+          <p className="text-sm text-mineshaft-300">
+            No authentication methods configured. Get started by creating a new auth method.
+          </p>
+          <Button
+            onClick={() => {
+              handlePopUpOpen("identityAuthMethod", {
+                identityId,
+                name: data.identity.name,
+                allAuthMethods: data.identity.authMethods
+              });
+            }}
+            variant="outline_bg"
+            className="w-full"
+            size="xs"
+          >
+            Create new auth method
+          </Button>
         </div>
-        <p className="text-sm text-mineshaft-300">
-          {selectedAuthMethod ? identityAuthToNameMap[selectedAuthMethod] : "Not configured"}
-        </p>
-      </div>
-      {selectedAuthMethod === IdentityAuthMethod.UNIVERSAL_AUTH && (
-        <IdentityClientSecrets identityId={identityId} handlePopUpOpen={handlePopUpOpen} />
-      )}
-      {selectedAuthMethod === IdentityAuthMethod.TOKEN_AUTH && (
-        <IdentityTokens identityId={identityId} handlePopUpOpen={handlePopUpOpen} />
       )}
     </div>
   ) : (

frontend/src/views/Org/MembersPage/components/OrgIdentityTab/components/IdentitySection/IdentityAuthMethodModal.tsx

@@ -265,7 +265,7 @@ export const IdentityAuthMethodModal = ({ popUp, handlePopUpOpen, handlePopUpTog
                       >
                         {label}{" "}
                         {alreadyConfigured && !isSelectedAuthAlreadyConfigured && (
-                          <Badge variant="info">Configured</Badge>
+                          <Badge>Configured</Badge>
                         )}
                       </SelectItem>
                     </Tooltip>