From 46ccc69ff60d9ee1accfd64132f9a585d3c9ebf9 Mon Sep 17 00:00:00 2001
From: Aswin V <vaswin91@gmail.com>
Date: Thu, 4 Apr 2024 00:03:34 +0530
Subject: [PATCH] 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                 |  1 +
 internal-ui/package.json                      |  1 +
 internal-ui/src/federated-saml/Edit.tsx       | 12 +--
 .../federated-saml/EditFederatedSAMLApp.tsx   |  9 ++-
 .../federated-saml/NewFederatedSAMLApp.tsx    | 12 +--
 internal-ui/src/shared/ItemList.tsx           | 73 -------------------
 internal-ui/vite.config.ts                    |  1 +
 lib/env.ts                                    |  2 +-
 lib/utils.ts                                  |  2 +-
 locales/en/common.json                        |  1 -
 package-lock.json                             |  9 ++-
 package.json                                  |  2 +-
 styles/sdk-override.module.css                |  2 +-
 13 files changed, 33 insertions(+), 94 deletions(-)
 delete mode 100644 internal-ui/src/shared/ItemList.tsx

diff --git a/internal-ui/package-lock.json b/internal-ui/package-lock.json
index cbc2a1ccb..04d901172 100644
--- a/internal-ui/package-lock.json
+++ b/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",
diff --git a/internal-ui/package.json b/internal-ui/package.json
index d9d6ecdd2..3efe628b8 100644
--- a/internal-ui/package.json
+++ b/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",
diff --git a/internal-ui/src/federated-saml/Edit.tsx b/internal-ui/src/federated-saml/Edit.tsx
index a7d5d6caf..447e67525 100644
--- a/internal-ui/src/federated-saml/Edit.tsx
+++ b/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'>
diff --git a/internal-ui/src/federated-saml/EditFederatedSAMLApp.tsx b/internal-ui/src/federated-saml/EditFederatedSAMLApp.tsx
index 55af560af..af7dfaa57 100644
--- a/internal-ui/src/federated-saml/EditFederatedSAMLApp.tsx
+++ b/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;
   }
 
diff --git a/internal-ui/src/federated-saml/NewFederatedSAMLApp.tsx b/internal-ui/src/federated-saml/NewFederatedSAMLApp.tsx
index 154926588..a05f6f7e7 100644
--- a/internal-ui/src/federated-saml/NewFederatedSAMLApp.tsx
+++ b/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 && (
diff --git a/internal-ui/src/shared/ItemList.tsx b/internal-ui/src/shared/ItemList.tsx
deleted file mode 100644
index 6f4dd349f..000000000
--- a/internal-ui/src/shared/ItemList.tsx
+++ /dev/null
@@ -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>
-  );
-};
diff --git a/internal-ui/vite.config.ts b/internal-ui/vite.config.ts
index fcdcc6ff7..9cb6bd6e2 100644
--- a/internal-ui/vite.config.ts
+++ b/internal-ui/vite.config.ts
@@ -24,6 +24,7 @@ export default defineConfig({
         'formik',
         'react-daisyui',
         'react-tagsinput',
+        '@boxyhq/react-ui',
       ],
     },
   },
diff --git a/lib/env.ts b/lib/env.ts
index b345c7ba6..80aa50aec 100644
--- a/lib/env.ts
+++ b/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`,
 };
 
diff --git a/lib/utils.ts b/lib/utils.ts
index 8a1e07e37..a1e4ab7db 100644
--- a/lib/utils.ts
+++ b/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;
 };
diff --git a/locales/en/common.json b/locales/en/common.json
index 06cac8308..ee286c708 100644
--- a/locales/en/common.json
+++ b/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",
diff --git a/package-lock.json b/package-lock.json
index 8d544f423..e24caa428 100644
--- a/package-lock.json
+++ b/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",
diff --git a/package.json b/package.json
index ece4d8ef5..d3b2bebcf 100644
--- a/package.json
+++ b/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",
diff --git a/styles/sdk-override.module.css b/styles/sdk-override.module.css
index e05e85ed4..bd9f3ac87 100644
--- a/styles/sdk-override.module.css
+++ b/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;
 }