Add Okta SCIM integration (#361)

* Add Okta integration (wip)

* Update okta setup dialog

* Add okta integration images

* Add error handling for 500 status codes

* Add okta integration

* Fix lint warnings

* Update azures last sync time

* Remove 'on' from step, disable copy for HTTP Header

* Update text for custom IDP

Author: heisbrot

src/assets/integrations/okta.png

@@ -5,7 +5,9 @@ import * as React from "react";
 type Props = {
   data: {
     label: string;
-    value: string;
+    value: string | React.ReactNode;
+    noCopy?: boolean;
+    tooltip?: boolean;
   }[];
   className?: string;
 };
@@ -16,10 +18,11 @@ export const MinimalList = ({ data, className }: Props) => {
         {data.map((item, index) => {
           return (
             <Card.ListItem
-              copy
+              copy={!item.noCopy}
               label={item.label}
               value={item.value}
               key={index}
+              tooltip={item.tooltip !== false}
             />
           );
         })}

src/components/ui/MinimalList.tsx

@@ -17,6 +17,14 @@ export interface AzureADIntegration {
   user_group_prefixes: string[];
 }
 
+export interface OktaIntegration {
+  id: string;
+  enabled: boolean;
+  group_prefixes: string[];
+  user_group_prefixes: string[];
+  auth_token: string;
+}
+
 export interface IdentityProviderLog {
   id: number;
   level: string;

src/interfaces/IdentityProvider.ts

@@ -10,6 +10,7 @@ import IntegrationIcon from "@/assets/icons/IntegrationIcon";
 import { useAccount } from "@/modules/account/useAccount";
 import { AzureAD } from "@/modules/integrations/idp-sync/azure-ad/AzureAD";
 import { GoogleWorkspace } from "@/modules/integrations/idp-sync/google-workspace/GoogleWorkspace";
+import { Okta } from "@/modules/integrations/idp-sync/okta-scim/Okta";
 import { useIntegrations } from "@/modules/integrations/idp-sync/useIntegrations";
 
 export default function IdentityProviderTab() {
@@ -40,7 +41,10 @@ export default function IdentityProviderTab() {
         </Paragraph>
         <Paragraph>
           Learn more about{" "}
-          <InlineLink href={"#"} target={"_blank"}>
+          <InlineLink
+            href={"https://docs.netbird.io/how-to/idp-sync"}
+            target={"_blank"}
+          >
             Identity Provider
             <ExternalLinkIcon size={12} />
           </InlineLink>
@@ -51,23 +55,24 @@ export default function IdentityProviderTab() {
             <>
               <SkeletonIntegration loadingHeight={196} />
               <SkeletonIntegration loadingHeight={196} />
+              <SkeletonIntegration loadingHeight={196} />
             </>
           ) : (
             <>
               <GoogleWorkspace />
               <AzureAD />
+              <Okta />
             </>
           )}
         </div>
-        <div className={"flex flex-col gap-6 max-w-md mt-10"}>
+        <div className={"flex flex-col gap-6 max-w-lg mt-10"}>
           <div
             className={
               "bg-netbird-950 px-6 py-4 rounded-md border border-netbird-500 "
             }
           >
             <Label className={"!text-netbird-100 text-md"}>
-              Looking to enable a custom Identity Provider like Okta or
-              Jumpcloud?
+              Looking to enable a custom IDP like Jumpcloud?
             </Label>
             <p className={"!text-netbird-200 mt-2"}>
               Please contact us at{" "}

src/modules/integrations/idp-sync/IdentityProviderTab.tsx

@@ -4,9 +4,10 @@ import { notify } from "@components/Notification";
 import { SkeletonIntegration } from "@components/skeletons/SkeletonIntegration";
 import useFetchApi, { useApiCall } from "@utils/api";
 import dayjs from "dayjs";
+import { isEmpty } from "lodash";
 import { RefreshCw, Settings } from "lucide-react";
 import * as React from "react";
-import { useEffect, useState } from "react";
+import { useEffect, useMemo, useState } from "react";
 import { useSWRConfig } from "swr";
 import integrationImage from "@/assets/integrations/entra-id.png";
 import {
@@ -116,6 +117,11 @@ const ConfigurationButton = ({ config }: ConfigurationProps) => {
     });
   };
 
+  const lastSync = useMemo(() => {
+    if (isEmpty(logs)) return "Not synchronized";
+    return "Synced " + dayjs().to(logs?.[0]?.timestamp);
+  }, [logs]);
+
   return (
     <>
       <div className={"flex gap-2"}>
@@ -137,7 +143,7 @@ const ConfigurationButton = ({ config }: ConfigurationProps) => {
             disabled={!config.enabled}
           >
             <RefreshCw size={14} />
-            Synced {dayjs().to(logs?.[0]?.timestamp)}
+            {lastSync}
           </Button>
         </FullTooltip>
 

src/modules/integrations/idp-sync/azure-ad/AzureAD.tsx

@@ -0,0 +1,131 @@
+import Button from "@components/Button";
+import { notify } from "@components/Notification";
+import { SkeletonIntegration } from "@components/skeletons/SkeletonIntegration";
+import useFetchApi, { useApiCall } from "@utils/api";
+import dayjs from "dayjs";
+import { RefreshCw, Settings } from "lucide-react";
+import * as React from "react";
+import { useEffect, useState } from "react";
+import { useSWRConfig } from "swr";
+import integrationImage from "@/assets/integrations/okta.png";
+import {
+  IdentityProviderLog,
+  OktaIntegration,
+} from "@/interfaces/IdentityProvider";
+import OktaConfiguration from "@/modules/integrations/idp-sync/okta-scim/OktaConfiguration";
+import OktaSetup from "@/modules/integrations/idp-sync/okta-scim/OktaSetup";
+import { useIntegrations } from "@/modules/integrations/idp-sync/useIntegrations";
+import { IntegrationCard } from "@/modules/integrations/IntegrationCard";
+
+export const Okta = () => {
+  const { mutate } = useSWRConfig();
+  const [setupModal, setSetupModal] = useState(false);
+
+  const {
+    okta: integration,
+    isAnyIntegrationEnabled,
+    isOktaLoading,
+  } = useIntegrations();
+  const oktaRequest = useApiCall<OktaIntegration>(
+    "/integrations/okta-scim-idp",
+  );
+
+  const [enabled, setEnabled] = useState(
+    integration ? integration.enabled : false,
+  );
+
+  useEffect(() => {
+    setEnabled(integration?.enabled ?? false);
+  }, [integration]);
+
+  const toggleSwitch = async (state: boolean) => {
+    if (!integration) return setSetupModal(true);
+
+    notify({
+      title: "Okta Integration",
+      description: `Okta was successfully ${state ? "enabled" : "disabled"}`,
+      promise: oktaRequest
+        .put(
+          {
+            enabled: state,
+          },
+          "/" + integration.id,
+        )
+        .then(() => {
+          mutate("/integrations/okta-scim-idp");
+          setEnabled(state);
+        }),
+      loadingMessage: "Updating integration...",
+    });
+  };
+
+  return isOktaLoading ? (
+    <SkeletonIntegration loadingHeight={197} />
+  ) : (
+    <>
+      <IntegrationCard
+        name="Okta"
+        description="Okta is a platform to provision and manage user accounts in cloud-based applications."
+        url={{
+          title: "okta.com",
+          href: "https://www.okta.com/",
+        }}
+        image={integrationImage}
+        data={integration}
+        disabled={enabled ? false : isAnyIntegrationEnabled}
+        switchState={enabled}
+        onEnabledChange={toggleSwitch}
+        onSetup={() => setSetupModal(true)}
+      >
+        {integration && <ConfigurationButton config={integration} />}
+      </IntegrationCard>
+      <OktaSetup
+        open={setupModal}
+        onOpenChange={setSetupModal}
+        onSuccess={() => {
+          setEnabled(true);
+          mutate("/integrations/okta-scim-idp");
+        }}
+      />
+    </>
+  );
+};
+
+type ConfigurationProps = {
+  config: OktaIntegration;
+};
+const ConfigurationButton = ({ config }: ConfigurationProps) => {
+  const { data: logs } = useFetchApi<IdentityProviderLog[]>(
+    `/integrations/okta-scim-idp/${config.id}/logs`,
+  );
+
+  const [configModal, setConfigModal] = useState(false);
+
+  return (
+    <>
+      <div className={"flex gap-2"}>
+        <Button
+          variant={"default-outline"}
+          size={"xs"}
+          className={"w-full items-center pointer-events-none"}
+          disabled={!config.enabled}
+        >
+          <RefreshCw size={14} />
+          Synced {dayjs().to(logs?.[0]?.timestamp)}
+        </Button>
+
+        <Button
+          variant={"secondary"}
+          size={"xs"}
+          className={"items-center"}
+          onClick={() => {
+            setConfigModal(true);
+          }}
+        >
+          <Settings size={14} />
+        </Button>
+      </div>
+      <OktaConfiguration open={configModal} onOpenChange={setConfigModal} />
+    </>
+  );
+};