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,9 +81,13 @@ 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="flex justify-between">
+              <p className="ml-px mb-0.5 text-sm font-semibold text-mineshaft-300">Auth Method</p>
+            </div>
+            <div className="flex items-center gap-2">
               <div className="w-full">
                 <Select
                   className="w-full"
@@ -116,16 +120,7 @@ export const IdentityAuthenticationSection = ({
                   </IconButton>
                 </Tooltip>{" "}
               </div>
-          </>
-        )}
             </div>
-      <div className="py-4">
-        <div className="flex justify-between">
-          <p className="text-sm font-semibold text-mineshaft-300">Auth Method</p>
-        </div>
-        <p className="text-sm text-mineshaft-300">
-          {selectedAuthMethod ? identityAuthToNameMap[selectedAuthMethod] : "Not configured"}
-        </p>
           </div>
           {selectedAuthMethod === IdentityAuthMethod.UNIVERSAL_AUTH && (
             <IdentityClientSecrets identityId={identityId} handlePopUpOpen={handlePopUpOpen} />
@@ -133,6 +128,28 @@ export const IdentityAuthenticationSection = ({
           {selectedAuthMethod === IdentityAuthMethod.TOKEN_AUTH && (
             <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>
+      )}
     </div>
   ) : (
     <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>