Make progress on SCIM

frontend/src/views/Settings/OrgSettingsPage/components/OrgAuthTab/OrgAuthTab.tsx

@@ -1,15 +1,17 @@
 import { OrgPermissionActions, OrgPermissionSubjects } from "@app/context";
 import { withPermission } from "@app/hoc";
 
-import { OrgSCIMSection } from "./OrgSCIMSection";
+import { OrgScimSection } from "./OrgScimSection";
+import { OrgGeneralAuthSection } from "./OrgGeneralAuthSection";
 import { OrgSSOSection } from "./OrgSSOSection";
 
 export const OrgAuthTab = withPermission(
   () => {
     return (
       <div>
+        <OrgGeneralAuthSection />
         <OrgSSOSection />
-        <OrgSCIMSection />
+        <OrgScimSection />
       </div>
     );
   },

frontend/src/views/Settings/OrgSettingsPage/components/OrgAuthTab/OrgGeneralAuthSection.tsx

@@ -0,0 +1,65 @@
+import { useNotificationContext } from "@app/components/context/Notifications/NotificationProvider";
+import { OrgPermissionCan } from "@app/components/permissions";
+import { Switch } from "@app/components/v2";
+import {
+    OrgPermissionActions,
+    OrgPermissionSubjects,
+    useOrganization 
+} from "@app/context";
+import { useLogoutUser,useUpdateOrg } from "@app/hooks/api";
+
+export const OrgGeneralAuthSection = () => {
+    const { createNotification } = useNotificationContext();
+    const { currentOrg } = useOrganization();
+    
+    const { mutateAsync } = useUpdateOrg();
+    
+    const logout = useLogoutUser();
+    
+    const handleEnforceOrgAuthToggle = async (value: boolean) => {
+        try {
+            if (!currentOrg?.id) return;
+            
+            await mutateAsync({ 
+                orgId: currentOrg?.id, 
+                authEnforced: value 
+            });
+            
+            createNotification({
+                text: `Successfully ${value ? "enforced" : "un-enforced"} org-level auth`,
+                type: "success"
+            });
+            
+            if (value) {
+                await logout.mutateAsync();
+                window.open(`/api/v1/sso/redirect/saml2/organizations/${currentOrg.slug}`);
+                window.close();
+            }
+            
+        } catch (err) {
+            console.error(err);
+            createNotification({
+                text: `Failed to ${value ? "enforce" : "un-enforce"} org-level auth`,
+                type: "error"
+            });
+        }
+    }
+
+    return (
+        <div className="mb-6 rounded-lg border border-mineshaft-600 bg-mineshaft-900 p-4">
+            <h2 className="flex-1 text-xl font-semibold text-white mb-8">Settings</h2>
+            <OrgPermissionCan I={OrgPermissionActions.Edit} a={OrgPermissionSubjects.Sso}>
+                {(isAllowed) => (
+                    <Switch
+                        id="enforce-org-auth"
+                        onCheckedChange={(value) => handleEnforceOrgAuthToggle(value)}
+                        isChecked={currentOrg?.authEnforced ?? false}
+                        isDisabled={!isAllowed}
+                    >
+                        Enforce SAML SSO
+                    </Switch>
+                )}
+            </OrgPermissionCan>
+        </div>
+    );
+}

frontend/src/views/Settings/OrgSettingsPage/components/OrgAuthTab/OrgSCIMSection.tsx

@@ -1,11 +1,11 @@
 import { useState } from "react";
-import { faCheck, faCopy } from "@fortawesome/free-solid-svg-icons";
+import { faPlus, faCheck, faCopy } from "@fortawesome/free-solid-svg-icons";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 
 // import { useNotificationContext } from "@app/components/context/Notifications/NotificationProvider";
 // import { OrgPermissionCan } from "@app/components/permissions";
 import { 
-    // Button,
+    Button,
     IconButton,
     Switch
 } from "@app/components/v2";
@@ -21,7 +21,7 @@ import { useGetScimToken } from "@app/hooks/api";
 
 // TODO: add permissioning for enteprise SCIM
 
-export const OrgSCIMSection = () => {
+export const OrgScimSection = () => {
     const { currentOrg } = useOrganization();
     // const { createNotification } = useNotificationContext();
     // const { subscription } = useSubscription();
@@ -36,6 +36,10 @@ export const OrgSCIMSection = () => {
     
     // TODO: get SCIM stuf
     
+    const addScimTokenBtnClick = () => {
+
+    }
+    
     const handleSCIMToggle = (value: boolean) => {
         // TODO
         try {
@@ -52,7 +56,17 @@ export const OrgSCIMSection = () => {
     
     return (
         <div className="mb-6 rounded-lg border border-mineshaft-600 bg-mineshaft-900 p-4">
-            <h2 className="flex-1 text-xl font-semibold text-white mb-8">SCIM Configuration</h2>
+            <div className="mb-8 flex items-center">
+                <h2 className="flex-1 text-xl font-semibold text-white">SCIM Configuration</h2>
+                <Button
+                    onClick={addScimTokenBtnClick}
+                    colorSchema="secondary"
+                    // isDisabled={!isAllowed}
+                    leftIcon={<FontAwesomeIcon icon={faPlus} />}
+                >
+                    Add SCIM Token
+                </Button>
+            </div>
             <Switch
                 id="enable-scim"
                 onCheckedChange={(value) => handleSCIMToggle(value)}

frontend/src/views/Settings/OrgSettingsPage/components/OrgAuthTab/OrgSSOSection.tsx

@@ -1,5 +1,6 @@
 import { faPlus } from "@fortawesome/free-solid-svg-icons";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import { format } from "date-fns";
 
 import { useNotificationContext } from "@app/components/context/Notifications/NotificationProvider";
 import { OrgPermissionCan } from "@app/components/permissions";
@@ -136,6 +137,10 @@ export const OrgSSOSection = (): JSX.Element => {
         <h3 className="text-sm text-mineshaft-400">Issuer</h3>
         <p className="text-md text-gray-400">{data && data.issuer !== "" ? data.issuer : "-"}</p>
       </div>
+      <div className="mb-4">
+        <h3 className="text-sm text-mineshaft-400">Last Logged In</h3>
+        <p className="text-md text-gray-400">{data?.lastUsed ? format(new Date(data?.lastUsed), "yyyy-MM-dd HH:mm:ss") : "-"}</p>
+      </div>
       <SSOModal
         popUp={popUp}
         handlePopUpClose={handlePopUpClose}

frontend/src/views/Settings/OrgSettingsPage/components/OrgGeneralTab/OrgGeneralTab.tsx

@@ -3,6 +3,7 @@ import { useOrgPermission } from "@app/context";
 import { OrgDeleteSection } from "../OrgDeleteSection";
 import { OrgIncidentContactsSection } from "../OrgIncidentContactsSection";
 import { OrgNameChangeSection } from "../OrgNameChangeSection";
+import { OrgSlugChangeSection } from "../OrgSlugChangeSection";
 
 export const OrgGeneralTab = () => {
   const { membership } = useOrgPermission();
@@ -10,8 +11,9 @@ export const OrgGeneralTab = () => {
   return (
     <div>
       <OrgNameChangeSection />
+      <OrgSlugChangeSection />
       <OrgIncidentContactsSection />
       {membership && membership.role === "admin" && <OrgDeleteSection />}
     </div>
   );
-};
+};

frontend/src/views/Settings/OrgSettingsPage/components/OrgNameChangeSection/OrgNameChangeSection.tsx

@@ -7,7 +7,7 @@ import { useNotificationContext } from "@app/components/context/Notifications/No
 import { OrgPermissionCan } from "@app/components/permissions";
 import { Button, FormControl, Input } from "@app/components/v2";
 import { OrgPermissionActions, OrgPermissionSubjects, useOrganization } from "@app/context";
-import { useRenameOrg } from "@app/hooks/api";
+import { useUpdateOrg } from "@app/hooks/api";
 
 const formSchema = yup.object({
   name: yup.string().required().label("Project Name")
@@ -21,7 +21,7 @@ export const OrgNameChangeSection = (): JSX.Element => {
   const { handleSubmit, control, reset } = useForm<FormData>({
     resolver: yupResolver(formSchema)
   });
-  const { mutateAsync, isLoading } = useRenameOrg();
+  const { mutateAsync, isLoading } = useUpdateOrg();
 
   useEffect(() => {
     if (currentOrg) {
@@ -34,7 +34,7 @@ export const OrgNameChangeSection = (): JSX.Element => {
       if (!currentOrg?.id) return;
       if (name === "") return;
 
-      await mutateAsync({ orgId: currentOrg?.id, newOrgName: name });
+      await mutateAsync({ orgId: currentOrg?.id, name });
       createNotification({
         text: "Successfully renamed organization",
         type: "success"
@@ -53,7 +53,7 @@ export const OrgNameChangeSection = (): JSX.Element => {
       onSubmit={handleSubmit(onFormSubmit)}
       className="mb-6 rounded-lg border border-mineshaft-600 bg-mineshaft-900 p-4"
     >
-      <p className="mb-4 text-xl font-semibold text-mineshaft-100">Name</p>
+      <p className="mb-4 text-xl font-semibold text-mineshaft-100">Organization Name</p>
       <div className="mb-2 max-w-md">
         <Controller
           defaultValue=""

frontend/src/views/Settings/OrgSettingsPage/components/OrgSlugChangeSection/OrgSlugChangeSection.tsx

@@ -0,0 +1,88 @@
+import { useEffect } from "react";
+import { Controller, useForm } from "react-hook-form";
+import { yupResolver } from "@hookform/resolvers/yup";
+import * as yup from "yup";
+
+import { useNotificationContext } from "@app/components/context/Notifications/NotificationProvider";
+import { OrgPermissionCan } from "@app/components/permissions";
+import { Button, FormControl, Input } from "@app/components/v2";
+import { OrgPermissionActions, OrgPermissionSubjects, useOrganization } from "@app/context";
+import { useUpdateOrg } from "@app/hooks/api";
+
+const formSchema = yup.object({
+    slug: yup
+        .string()
+        .matches(/^[a-zA-Z0-9-]+$/, "Name must only contain alphanumeric characters or hyphens")
+        .required()
+        .label("Project Slug")
+});
+
+type FormData = yup.InferType<typeof formSchema>;
+
+export const OrgSlugChangeSection = (): JSX.Element => {
+    const { currentOrg } = useOrganization();
+    const { createNotification } = useNotificationContext();
+    const { handleSubmit, control, reset } = useForm<FormData>({
+        resolver: yupResolver(formSchema)
+    });
+    const { mutateAsync, isLoading } = useUpdateOrg();
+
+    useEffect(() => {
+        if (currentOrg) {
+            reset({ slug: currentOrg.slug });
+        }
+    }, [currentOrg]);
+
+    const onFormSubmit = async ({ slug }: FormData) => {
+        try {
+            if (!currentOrg?.id) return;
+            if (slug === "") return;
+
+            await mutateAsync({ orgId: currentOrg?.id, slug });
+            createNotification({
+                text: "Successfully updated organization slug",
+                type: "success"
+            });
+        } catch (error) {
+            console.error(error);
+            createNotification({
+                text: "Failed to update organization slug",
+                type: "error"
+            });
+        }
+    };
+    
+    return (
+        <form
+            onSubmit={handleSubmit(onFormSubmit)}
+            className="mb-6 rounded-lg border border-mineshaft-600 bg-mineshaft-900 p-4"
+        >
+            <p className="mb-4 text-xl font-semibold text-mineshaft-100">Organization Slug</p>
+            <div className="mb-2 max-w-md">
+                <Controller
+                    defaultValue=""
+                    render={({ field, fieldState: { error } }) => (
+                        <FormControl isError={Boolean(error)} errorText={error?.message}>
+                            <Input placeholder="acme" {...field} />
+                        </FormControl>
+                    )}
+                    control={control}
+                    name="slug"
+                />
+            </div>
+            <OrgPermissionCan I={OrgPermissionActions.Edit} a={OrgPermissionSubjects.Settings}>
+                {(isAllowed) => (
+                    <Button
+                        isLoading={isLoading}
+                        isDisabled={!isAllowed}
+                        colorSchema="primary"
+                        variant="outline_bg"
+                        type="submit"
+                    >
+                        Save
+                    </Button>
+                )}
+            </OrgPermissionCan>
+        </form>
+    );
+}

frontend/src/views/Settings/OrgSettingsPage/components/OrgSlugChangeSection/index.tsx

@@ -0,0 +1 @@
+export { OrgSlugChangeSection } from "./OrgSlugChangeSection";

frontend/src/views/Settings/PersonalSettingsPage/AuthMethodSection/AuthMethodSection.tsx

@@ -25,8 +25,6 @@ const authMethodOpts: AuthMethodOption[] = [
   { label: "GitLab", value: AuthMethod.GITLAB, icon: faGitlab }
 ];
 
-const samlProviders = [AuthMethod.OKTA_SAML, AuthMethod.JUMPCLOUD_SAML, AuthMethod.AZURE_SAML];
-
 const schema = yup.object({
   authMethods: yup.array().required("Auth method is required")
 });
@@ -56,17 +54,6 @@ export const AuthMethodSection = () => {
   }, [user]);
 
   const onAuthMethodToggle = async (value: boolean, authMethodOpt: AuthMethodOption) => {
-    const hasSamlEnabled = user.authMethods.some((authMethod: AuthMethod) =>
-      samlProviders.includes(authMethod)
-    );
-
-    if (hasSamlEnabled) {
-      createNotification({
-        text: "SAML authentication can only be configured in your organization settings",
-        type: "error"
-      });
-    }
-
     const newAuthMethods = value
       ? [...authMethods, authMethodOpt.value]
       : authMethods.filter((auth) => auth !== authMethodOpt.value);