Use itemlist component from UI SDK (#2513)

* Fix outline style

* Fix types

* Use `ItemList` from UI SDK

* Cleanup locale

* Externalize UI SDK

* Add UI SDK to peer dependency

* Package lock changes

* updated react-ui

* reverse accidental commit

* call toast inside useEffect

* Update dependency array

---------

Co-authored-by: Deepak Prabhakara <deepak@boxyhq.com>

internal-ui/package-lock.json

@@ -29,6 +29,7 @@
         "@rollup/rollup-linux-x64-gnu": "4.13.2"
       },
       "peerDependencies": {
+        "@boxyhq/react-ui": ">=3.3.42",
         "@heroicons/react": ">=2.1.1",
         "classnames": ">=2.5.1",
         "formik": ">=2.4.5",

internal-ui/package.json

@@ -43,6 +43,7 @@
     "@rollup/rollup-linux-x64-gnu": "4.13.2"
   },
   "peerDependencies": {
+    "@boxyhq/react-ui": ">=3.3.42",
     "@heroicons/react": ">=2.1.1",
     "classnames": ">=2.5.1",
     "formik": ">=2.4.5",

internal-ui/src/federated-saml/Edit.tsx

@@ -9,7 +9,7 @@ import EyeSlashIcon from '@heroicons/react/24/outline/EyeSlashIcon';
 
 import { Card } from '../shared';
 import { defaultHeaders } from '../utils';
-import { ItemList } from '../shared/ItemList';
+import { ItemList } from '@boxyhq/react-ui/shared';
 import { CopyToClipboardButton } from '../shared/InputWithCopyButton';
 import { IconButton } from '../shared/IconButton';
 
@@ -179,12 +179,14 @@ export const Edit = ({
                 )}
                 {connectionIsOIDC && (
                   <label className='form-control w-full'>
-                    <div className='label'>
-                      <span className='label-text'>{t('bui-sl-allowed-redirect-urls-new')}</span>
-                    </div>
                     <ItemList
+                      classNames={{ label: 'label', input: 'input input-bordered input-sm w-full' }}
+                      label={t('bui-sl-allowed-redirect-urls-new')}
+                      inputType={'url'}
                       currentlist={formik.values.redirectUrl || ['']}
-                      onItemListChange={(newList) => formik.setFieldValue('redirectUrl', newList)}></ItemList>
+                      fieldName='redirectUrl'
+                      handleItemListUpdate={(fieldName, newList) => formik.setFieldValue(fieldName, newList)}
+                    />
                   </label>
                 )}
                 <label className='form-control w-full'>

internal-ui/src/federated-saml/EditFederatedSAMLApp.tsx

@@ -5,7 +5,7 @@ import { Edit } from './Edit';
 import { EditAttributesMapping } from './EditAttributesMapping';
 import { DeleteCard, Loading, ConfirmationModal } from '../shared';
 import { useTranslation } from 'next-i18next';
-import { useState } from 'react';
+import { useEffect, useState } from 'react';
 import { defaultHeaders, fetcher } from '../utils';
 import { PageHeader } from '../shared';
 
@@ -27,12 +27,17 @@ export const EditFederatedSAMLApp = ({
 
   const { data, isLoading, error, mutate } = useSWR<{ data: SAMLFederationApp }>(urls.getApp, fetcher);
 
+  useEffect(() => {
+    if (error) {
+      onError?.(error);
+    }
+  }, [error, onError]);
+
   if (isLoading) {
     return <Loading />;
   }
 
   if (error) {
-    onError?.(error);
     return;
   }
 

internal-ui/src/federated-saml/NewFederatedSAMLApp.tsx

@@ -7,7 +7,7 @@ import QuestionMarkCircleIcon from '@heroicons/react/24/outline/QuestionMarkCirc
 import { defaultHeaders } from '../utils';
 import { AttributesMapping } from './AttributesMapping';
 import { PageHeader } from '../shared';
-import { ItemList } from '../shared/ItemList';
+import { ItemList } from '@boxyhq/react-ui/shared';
 
 type NewSAMLFederationApp = Pick<
   SAMLFederationApp,
@@ -177,12 +177,14 @@ export const NewFederatedSAMLApp = ({
           )}
           {connectionIsOIDC && (
             <label className='form-control w-full'>
-              <div className='label'>
-                <span className='label-text'>{t('bui-sl-allowed-redirect-urls-new')}</span>
-              </div>
               <ItemList
+                classNames={{ label: 'label', input: 'input input-bordered input-sm w-full' }}
+                label={t('bui-sl-allowed-redirect-urls-new')}
+                inputType={'url'}
                 currentlist={formik.values.redirectUrl || ['']}
-                onItemListChange={(newList) => formik.setFieldValue('redirectUrl', newList)}></ItemList>
+                fieldName='redirectUrl'
+                handleItemListUpdate={(fieldName, newList) => formik.setFieldValue(fieldName, newList)}
+              />
             </label>
           )}
           {connectionIsSAML && (

internal-ui/src/shared/ItemList.tsx

@@ -1,73 +0,0 @@
-import { useTranslation } from 'next-i18next';
-import XMarkIcon from '@heroicons/react/24/outline/XMarkIcon';
-
-export const ItemList = ({
-  currentlist,
-  onItemListChange,
-}: {
-  currentlist: string | string[];
-  onItemListChange: (list: string[]) => void;
-}) => {
-  const { t } = useTranslation('common');
-
-  const list = Array.isArray(currentlist) ? currentlist : [currentlist];
-
-  const addAnother = () => {
-    onItemListChange([...list, '']);
-  };
-
-  return (
-    <div>
-      <div className='flex flex-col gap-4'>
-        {list.map((item, index) => (
-          <div key={index}>
-            <ItemRow
-              item={item}
-              onItemChange={(newItem) => {
-                const newList = [...list];
-                newList[index] = newItem;
-                onItemListChange(newList);
-              }}
-              onItemDelete={() => {
-                onItemListChange(list.filter((_, i) => i !== index));
-              }}
-            />
-          </div>
-        ))}
-        <div>
-          <button className='btn btn-primary btn-sm btn-outline' type='button' onClick={addAnother}>
-            {t('bui-fs-add')}
-          </button>
-        </div>
-      </div>
-    </div>
-  );
-};
-
-const ItemRow = ({
-  item,
-  onItemChange,
-  onItemDelete,
-}: {
-  item: string;
-  onItemChange: (newItem: string) => void;
-  onItemDelete: () => void;
-}) => {
-  return (
-    <div className='flex space-x-3 items-center'>
-      <input
-        type='text'
-        className='input input-bordered input-sm w-full'
-        name='item'
-        value={item}
-        onChange={(e) => {
-          onItemChange(e.target.value);
-        }}
-        required
-      />
-      <button type='button' onClick={onItemDelete}>
-        <XMarkIcon className='h-5 w-5 text-red-500' />
-      </button>
-    </div>
-  );
-};

internal-ui/vite.config.ts

@@ -24,6 +24,7 @@ export default defineConfig({
         'formik',
         'react-daisyui',
         'react-tagsinput',
+        '@boxyhq/react-ui',
       ],
     },
   },

lib/env.ts

@@ -120,7 +120,7 @@ const jacksonOptions: JacksonOption = {
 const adminPortalSSODefaults = {
   tenant: process.env.ADMIN_PORTAL_SSO_TENANT || '_jackson_boxyhq',
   product: process.env.ADMIN_PORTAL_SSO_PRODUCT || '_jackson_admin_portal',
-  redirectUrl: externalUrl,
+  redirectUrl: [externalUrl],
   defaultRedirectUrl: `${externalUrl}/admin/auth/idp-login`,
 };
 

lib/utils.ts

@@ -104,6 +104,6 @@ export const parsePaginateApiParams = (params: NextApiRequest['query']): Paginat
 export type AdminPortalSSODefaults = {
   tenant: string;
   product: string;
-  redirectUrl: string;
+  redirectUrl: string[];
   defaultRedirectUrl: string;
 };

locales/en/common.json

@@ -185,7 +185,6 @@
   "bui-fs-idp-attribute": "IdP Attribute",
   "bui-fs-add-mapping": "Add Mapping",
   "bui-fs-add-another": "Add another",
-  "bui-fs-add": "Add",
   "bui-fs-no-apps": "No Identity Federation Apps found.",
   "bui-fs-no-apps-desc": "Create a new App to configure Identity Federation.",
   "bui-fs-entity-id": "Entity ID / Audience URI / Audience Restriction",

package-lock.json

@@ -12,7 +12,7 @@
       "dependencies": {
         "@boxyhq/internal-ui": "file:internal-ui",
         "@boxyhq/metrics": "0.2.6",
-        "@boxyhq/react-ui": "3.3.41",
+        "@boxyhq/react-ui": "3.3.42",
         "@boxyhq/saml-jackson": "file:npm",
         "@heroicons/react": "2.1.3",
         "@retracedhq/logs-viewer": "2.7.1",
@@ -100,6 +100,7 @@
         "@rollup/rollup-linux-x64-gnu": "4.13.2"
       },
       "peerDependencies": {
+        "@boxyhq/react-ui": ">=3.3.42",
         "@heroicons/react": ">=2.1.1",
         "classnames": ">=2.5.1",
         "formik": ">=2.4.5",
@@ -2052,9 +2053,9 @@
       }
     },
     "node_modules/@boxyhq/react-ui": {
-      "version": "3.3.41",
-      "resolved": "https://registry.npmjs.org/@boxyhq/react-ui/-/react-ui-3.3.41.tgz",
-      "integrity": "sha512-j0c4VVNoqx73i3gkQQx16KOhfK7PRdUO6wvgxGwhaRC7cqf+NoSSqZuyazYu1PyDCTeiQv6vv/07yIuAQuP+ZA==",
+      "version": "3.3.42",
+      "resolved": "https://registry.npmjs.org/@boxyhq/react-ui/-/react-ui-3.3.42.tgz",
+      "integrity": "sha512-JTzCeELT3tMFrWCRjg2HjIks4TTme7i5XbiS1jymtUODk3crMsH9TGpeeNGYeCoHGtIBDnRv7F3MW2wgdZ1FrQ==",
       "dependencies": {
         "react": "^16.8.0 || ^17.0.0 || ^18.0.0",
         "react-dom": "^16.8.0 || ^17.0.0 || ^18.0.0",

package.json

@@ -63,7 +63,7 @@
   "dependencies": {
     "@boxyhq/internal-ui": "file:internal-ui",
     "@boxyhq/metrics": "0.2.6",
-    "@boxyhq/react-ui": "3.3.41",
+    "@boxyhq/react-ui": "3.3.42",
     "@boxyhq/saml-jackson": "file:npm",
     "@heroicons/react": "2.1.3",
     "@retracedhq/logs-viewer": "2.7.1",

styles/sdk-override.module.css

@@ -2,6 +2,6 @@
 .sdk-input:focus,
 .sdk-select:focus-visible + span {
   /* Below styles copied from the tailwindcss/forms plugin */
-  outline: 2px solid hsla(var(--bc) / 0.2);
+  outline: 2px solid oklch(var(--bc) / 0.2);
   outline-offset: 2px;
 }