boxyhq · niwsa · Mar 26, 2024 · Mar 21, 2024 · Mar 21, 2024 · Mar 21, 2024
diff --git a/src/dsync/CreateDirectory/index.lite.tsx b/src/dsync/CreateDirectory/index.lite.tsx
@@ -27,7 +27,6 @@ const DEFAULT_DIRECTORY_VALUES: UnSavedDirectory = {
 };
 
 type Keys = keyof typeof DEFAULT_DIRECTORY_VALUES;
-type Values = (typeof DEFAULT_DIRECTORY_VALUES)[Keys];
 
 export default function CreateDirectory(props: CreateDirectoryProps) {
   const state = useStore({
@@ -118,6 +117,7 @@ export default function CreateDirectory(props: CreateDirectoryProps) {
       tenant: props.tenant ?? state.directory.tenant,
       product: props.product ?? state.directory.product,
       webhook_url: props.defaultWebhookEndpoint ?? state.directory.webhook_url,
+      webhook_secret: props.defaultWebhookSecret ?? state.directory.webhook_secret,
     });
   }, [props.tenant, props.product, props.defaultWebhookEndpoint]);
 
@@ -229,7 +229,13 @@ export default function CreateDirectory(props: CreateDirectoryProps) {
         </Show>
         <div class={defaultClasses.formAction}>
           <Show when={typeof props.cancelCallback === 'function'}>
-            <Button type='button' name='Cancel' handleClick={props.cancelCallback} variant='outline' />
+            <Button
+              type='button'
+              name='Cancel'
+              handleClick={props.cancelCallback}
+              variant='outline'
+              classNames={props.classNames?.button?.cancel}
+            />
           </Show>
           <Button
             variant='primary'

diff --git a/src/dsync/DirectoriesWrapper/index.lite.tsx b/src/dsync/DirectoriesWrapper/index.lite.tsx
@@ -97,7 +97,7 @@ export default function DirectoriesWrapper(props: DirectoriesWrapperProps) {
       </Show>
       <Show when={state.view === 'EDIT'}>
         <div class={styles.header}>
-          <h5 class={styles.h5}>Edit Dsync Connection</h5>
+          <h5 class={styles.h5}>Edit DSync Connection</h5>
         </div>
         <EditDirectory
           {...props.componentProps?.editDirectory}
@@ -115,7 +115,7 @@ export default function DirectoriesWrapper(props: DirectoriesWrapperProps) {
       </Show>
       <Show when={state.view === 'CREATE'}>
         <div class={styles.header}>
-          <h5 class={styles.h5}>Create Dsync Connection</h5>
+          <h5 class={styles.h5}>Create DSync Connection</h5>
         </div>
         <Spacer y={5} />
         <CreateDirectory

diff --git a/src/dsync/EditDirectory/index.lite.tsx b/src/dsync/EditDirectory/index.lite.tsx
@@ -15,7 +15,12 @@ import { sendHTTPRequest } from '../../shared/http';
 
 type FormState = Pick<
   UnSavedDirectory,
-  'name' | 'log_webhook_events' | 'webhook_url' | 'webhook_secret' | 'google_domain'
+  | 'name'
+  | 'log_webhook_events'
+  | 'webhook_url'
+  | 'webhook_secret'
+  | 'google_domain'
+  | 'google_authorization_url'
 >;
 
 const DEFAULT_FORM_STATE: FormState = {
@@ -24,6 +29,7 @@ const DEFAULT_FORM_STATE: FormState = {
   webhook_url: '',
   webhook_secret: '',
   google_domain: '',
+  google_authorization_url: '',
 };
 
 export default function EditDirectory(props: EditDirectoryProps) {
@@ -134,8 +140,9 @@ export default function EditDirectory(props: EditDirectoryProps) {
             ...directoryData,
             name: directoryData.name,
             log_webhook_events: directoryData.log_webhook_events,
-            webhook_url: directoryData.webhook.endpoint || '',
-            webhook_secret: directoryData.webhook.secret || '',
+            webhook_url: directoryData.webhook?.endpoint || '',
+            webhook_secret: directoryData.webhook?.secret || '',
+            google_authorization_url: directoryData.google_authorization_url || '',
             google_domain: directoryData.google_domain || '',
             deactivated: directoryData.deactivated,
           };
@@ -200,7 +207,7 @@ export default function EditDirectory(props: EditDirectoryProps) {
           />
           <Spacer y={6} />
         </Show>
-        <Show when={state.directoryUpdated?.type === 'google'}>
+        <Show when={!state.isExcluded('google_domain') && state.directoryUpdated?.type === 'google'}>
           <InputField
             label='Directory domain'
             id='google_domain'
@@ -210,7 +217,12 @@ export default function EditDirectory(props: EditDirectoryProps) {
           />
           <Spacer y={6} />
         </Show>
-        <Show when={state.directoryUpdated?.type === 'google' && state.googleSCIMAuthzURL}>
+        <Show
+          when={
+            !state.isExcluded('google_authorization_url') &&
+            state.directoryUpdated?.type === 'google' &&
+            state.googleSCIMAuthzURL
+          }>
           <InputWithCopyButton
             label='Google SCIM Authorization url'
             text={state.googleSCIMAuthzURL}
@@ -258,15 +270,23 @@ export default function EditDirectory(props: EditDirectoryProps) {
         </Show>
         <div class={defaultClasses.formAction}>
           <Show when={typeof props.cancelCallback === 'function'}>
-            <Button type='button' name='Cancel' handleClick={props.cancelCallback} variant='outline' />
+            <Button
+              type='button'
+              name='Cancel'
+              handleClick={props.cancelCallback}
+              variant='outline'
+              classNames={props.classNames?.button?.cancel}
+            />
+          </Show>
+          <Show when={!props.hideSave}>
+            <Button
+              type='submit'
+              name='Save'
+              variant='primary'
+              classNames={props.classNames?.button?.ctoa}
+              isLoading={state.isSaving}
+            />
           </Show>
-          <Button
-            type='submit'
-            name='Save'
-            variant='primary'
-            classNames={props.classNames?.button?.ctoa}
-            isLoading={state.isSaving}
-          />
         </div>
       </form>
       <section class={state.classes.section}>
@@ -278,7 +298,7 @@ export default function EditDirectory(props: EditDirectoryProps) {
           <Button
             name='Delete'
             handleClick={state.toggleDelConfirmation}
-            variant='outline'
+            variant='destructive'
             type='button'
             classNames={props.classNames?.button?.destructive}
           />

diff --git a/src/dsync/types.ts b/src/dsync/types.ts
@@ -5,7 +5,8 @@ export interface CreateDirectoryProps {
   urls: {
     post: string;
   };
-  defaultWebhookEndpoint?: string | undefined;
+  defaultWebhookEndpoint?: string;
+  defaultWebhookSecret?: string;
   successCallback?: (info: { operation: 'CREATE'; connection?: Directory }) => void;
   errorCallback?: (errMsg: string) => void;
   // To handle cancel button click
@@ -15,7 +16,7 @@ export interface CreateDirectoryProps {
     input?: string;
     select?: string;
     label?: string;
-    button?: { ctoa?: string };
+    button?: { ctoa?: string; cancel?: string };
   };
   /** Use this boolean to toggle the header display on/off. Useful when using the create component standalone */
   displayHeader?: boolean;
@@ -64,7 +65,7 @@ export interface EditDirectoryProps {
   successCallback?: (info: { operation: 'UPDATE' | 'DELETE' | 'COPY'; connection?: Directory }) => void;
   cancelCallback?: () => void;
   classNames?: {
-    button?: { ctoa?: string; destructive?: string };
+    button?: { ctoa?: string; destructive?: string; cancel?: string };
     confirmationPrompt?: ConfirmationPromptProps['classNames'];
     fieldContainer?: string;
     label?: string;
@@ -74,6 +75,8 @@ export interface EditDirectoryProps {
   excludeFields?: Array<keyof (UnSavedDirectory & { scim_endpoint: string; scim_token: string })>;
   /** Use this boolean to toggle the header display on/off. Useful when using the edit component standalone */
   displayHeader?: boolean;
+  /** Use this boolean to toggle the save button display on/off. Useful when using the edit component in setup links */
+  hideSave?: boolean;
 }
 
 export interface ToggleDirectoryStatusProps {
@@ -91,7 +94,7 @@ export interface ToggleDirectoryStatusProps {
 
 export interface DirectoriesWrapperProps {
   classNames?: {
-    button?: { ctoa?: string; destructive?: string };
+    button?: { ctoa?: string; destructive?: string; cancel?: string };
     input?: string;
     textarea?: string;
     select?: string;
@@ -160,6 +163,7 @@ export type Directory = {
   google_domain?: string;
   google_access_token?: string;
   google_refresh_token?: string;
+  google_authorization_url?: string;
 };
 
 export type UnSavedDirectory = Omit<Directory, 'id' | 'scim' | 'deactivated' | 'webhook'> & {

diff --git a/src/shared/Button/index.module.css b/src/shared/Button/index.module.css
@@ -27,20 +27,15 @@
 }
 
 .btn:focus-visible {
-  --ring-offset-shadow: 0 0 0 var(--ring-offset-width) var(--ring-offset-color);
-  --ring-shadow: 0 0 0 calc(2px + var(--ring-offset-width)) var(--ring-color);
-  box-shadow:
-    var(--ring-offset-shadow),
-    var(--ring-shadow),
-    0 0 0 #0000;
-  outline: 2px solid transparent;
-  outline-offset: 2px;
+  outline: solid var(--ring-offset-color) var(--ring-offset-width);
+  outline-offset: var(--ring-offset);
 }
 
 .primary:active:not(:disabled) {
   background: var(--primary-active);
   transform: scale(0.99);
 }
+
 .btn:disabled {
   opacity: 50%;
   cursor: not-allowed;

diff --git a/src/sso/connections/CreateConnection/oidc/index.lite.tsx b/src/sso/connections/CreateConnection/oidc/index.lite.tsx
@@ -408,7 +408,13 @@ export default function CreateOIDCConnection(props: CreateConnectionProps) {
         {/* TODO: bring translation support */}
         <div class={defaultClasses.formAction}>
           <Show when={typeof props.cancelCallback === 'function'}>
-            <Button type='button' name='Cancel' handleClick={props.cancelCallback} variant='outline' />
+            <Button
+              type='button'
+              name='Cancel'
+              handleClick={props.cancelCallback}
+              variant='outline'
+              classNames={props.classNames?.button?.cancel}
+            />
           </Show>
           <Button
             type='submit'

diff --git a/src/sso/connections/CreateConnection/saml/index.lite.tsx b/src/sso/connections/CreateConnection/saml/index.lite.tsx
@@ -338,7 +338,13 @@ export default function CreateSAMLConnection(props: CreateConnectionProps) {
         {/* TODO: bring translation support */}
         <div class={defaultClasses.formAction}>
           <Show when={typeof props.cancelCallback === 'function'}>
-            <Button type='button' name='Cancel' handleClick={props.cancelCallback} variant='outline' />
+            <Button
+              type='button'
+              name='Cancel'
+              handleClick={props.cancelCallback}
+              variant='outline'
+              classNames={props.classNames?.button?.cancel}
+            />
           </Show>
           <Button
             type='submit'

diff --git a/src/sso/connections/EditConnection/oidc/index.lite.tsx b/src/sso/connections/EditConnection/oidc/index.lite.tsx
@@ -51,7 +51,6 @@ export default function EditOIDCConnection(props: EditOIDCConnectionProps) {
     toggleDelConfirmation() {
       state.showDelConfirmation = !state.showDelConfirmation;
     },
-    hasDiscoveryUrl: true,
     get formVariant() {
       return props.variant || 'basic';
     },
@@ -75,9 +74,6 @@ export default function EditOIDCConnection(props: EditOIDCConnectionProps) {
     isExcluded(fieldName: keyof OIDCSSOConnection) {
       return !!(props.excludeFields as (keyof OIDCSSOConnection)[])?.includes(fieldName);
     },
-    toggleHasDiscoveryUrl() {
-      state.hasDiscoveryUrl = !state.hasDiscoveryUrl;
-    },
     updateConnection(key: Keys, newValue: Values) {
       return { ...state.oidcConnection, [key]: newValue };
     },
@@ -88,6 +84,17 @@ export default function EditOIDCConnection(props: EditOIDCConnectionProps) {
 
       state.oidcConnection = state.updateConnection(id, targetValue);
     },
+    resetOIDCMetadataFields() {
+      const currentVal = state.oidcConnection;
+      state.oidcConnection = {
+        ...currentVal,
+        'oidcMetadata.issuer': '',
+        'oidcMetadata.authorization_endpoint': '',
+        'oidcMetadata.token_endpoint': '',
+        'oidcMetadata.jwks_uri': '',
+        'oidcMetadata.userinfo_endpoint': '',
+      };
+    },
     saveSSOConnection(event: Event) {
       event.preventDefault();
 
@@ -116,6 +123,9 @@ export default function EditOIDCConnection(props: EditOIDCConnectionProps) {
           if (data && 'error' in data) {
             typeof props.errorCallback === 'function' && props.errorCallback(data.error.message);
           } else {
+            if (state.oidcConnection.oidcDiscoveryUrl) {
+              state.resetOIDCMetadataFields();
+            }
             typeof props.successCallback === 'function' &&
               props.successCallback({ operation: 'UPDATE', connection: formObj, connectionIsOIDC: true });
           }
@@ -175,7 +185,7 @@ export default function EditOIDCConnection(props: EditOIDCConnectionProps) {
               tenant: _connection.tenant || '',
               product: _connection.product || '',
               description: _connection.description || '',
-              redirectUrl: _connection.redirectUrl.join(`\r\n`),
+              redirectUrl: _connection.redirectUrl?.join(`\r\n`),
               defaultRedirectUrl: _connection.defaultRedirectUrl,
               oidcClientId: _connection.oidcProvider.clientId || '',
               oidcClientSecret: _connection.oidcProvider.clientSecret || '',
@@ -189,7 +199,6 @@ export default function EditOIDCConnection(props: EditOIDCConnectionProps) {
               sortOrder: _connection.sortOrder ?? '',
             };
           }
-          state.hasDiscoveryUrl = _connection.oidcProvider.discoveryUrl ? true : false;
         }
       }
     }
@@ -394,7 +403,13 @@ export default function EditOIDCConnection(props: EditOIDCConnectionProps) {
             </Show>
             <div class={defaultClasses.formAction}>
               <Show when={typeof props.cancelCallback === 'function'}>
-                <Button type='button' name='Cancel' handleClick={props.cancelCallback} variant='outline' />
+                <Button
+                  type='button'
+                  name='Cancel'
+                  handleClick={props.cancelCallback}
+                  variant='outline'
+                  classNames={props.classNames?.button?.cancel}
+                />
               </Show>
               <Button
                 type='submit'
@@ -477,7 +492,7 @@ export default function EditOIDCConnection(props: EditOIDCConnectionProps) {
                   <Button
                     name='Delete'
                     handleClick={state.toggleDelConfirmation}
-                    variant='outline'
+                    variant='destructive'
                     type='button'
                     classNames={props.classNames?.button?.destructive}
                   />

diff --git a/src/sso/connections/EditConnection/saml/index.lite.tsx b/src/sso/connections/EditConnection/saml/index.lite.tsx
@@ -160,7 +160,7 @@ export default function EditSAMLConnection(props: EditSAMLConnectionProps) {
               clientID: _connection.clientID,
               clientSecret: _connection.clientSecret,
               description: _connection.description || '',
-              redirectUrl: _connection.redirectUrl.join(`\r\n`),
+              redirectUrl: _connection.redirectUrl?.join(`\r\n`),
               defaultRedirectUrl: _connection.defaultRedirectUrl,
               rawMetadata: _connection.rawMetadata || '',
               metadataUrl: _connection.metadataUrl || '',
@@ -334,7 +334,13 @@ export default function EditSAMLConnection(props: EditSAMLConnectionProps) {
             </Show>
             <div class={defaultClasses.formAction}>
               <Show when={typeof props.cancelCallback === 'function'}>
-                <Button type='button' name='Cancel' handleClick={props.cancelCallback} variant='outline' />
+                <Button
+                  type='button'
+                  name='Cancel'
+                  handleClick={props.cancelCallback}
+                  variant='outline'
+                  classNames={props.classNames?.button?.cancel}
+                />
               </Show>
               <Button
                 type='submit'
@@ -422,7 +428,7 @@ export default function EditSAMLConnection(props: EditSAMLConnectionProps) {
                   <Button
                     name='Delete'
                     handleClick={state.toggleDelConfirmation}
-                    variant='outline'
+                    variant='destructive'
                     type='button'
                     classNames={props.classNames?.button?.destructive}
                   />