[RBLS-2837] UI improvements part 2 (#548)

Melidios · web-flow · commit a81f4d4c4d71 · 2025-10-01T14:42:10.000-04:00
Updated multiple UI components.
diff --git a/audiences-react/package.json b/audiences-react/package.json
@@ -1,6 +1,6 @@
 {
   "name": "audiences",
-  "version": "2.1.0",
+  "version": "2.2.0-alpha",
   "description": "Audiences SCIM client",
   "files": [
     "dist/*.*",
diff --git a/audiences-react/src/AudienceForm/CriteriaList.tsx b/audiences-react/src/AudienceForm/CriteriaList.tsx
@@ -9,9 +9,7 @@ export function CriteriaList({ onEditCriteria }: CriteriaListProps) {
   const { value: context, removeCriteria } = useAudiencesContext()
 
   const handleRemoveCriteria = (index: number) => {
-    if (confirm("Remove criteria?")) {
-      removeCriteria(index)
-    }
+    removeCriteria(index)
   }
 
   return (
diff --git a/audiences-react/src/AudienceForm/MembersModalButton/index.tsx b/audiences-react/src/AudienceForm/MembersModalButton/index.tsx
@@ -16,6 +16,13 @@ import type { GroupCriterion, ScimObject } from "../../types"
 import styles from "./style.module.css"
 import { useAudiencesContext } from "../../audiences"
 
+/**
+ * @description This has to be hardcoded because the API returns an object where the key for the user details
+ * can only be accessed using this SCIM_USER_KEY constant. We should update this later.
+ */
+const SCIM_USER_KEY =
+  "urn:ietf:params:scim:schemas:extension:authservice:2.0:User" as const
+
 type MembersModalButtonProps = any & {
   criterion?: GroupCriterion
   title: React.ReactNode
@@ -75,7 +82,6 @@ export function MembersModalButton({
             <Body color="light" text={title} />
           </Flex>
         </Dialog.Header>
-
         {current && (
           <Dialog.Body className="px-5">
             <Flex orientation="column" align="stretch">
@@ -85,16 +91,24 @@ export function MembersModalButton({
                 value={search}
               />
               <List className={styles.list}>
-                {current.users.map((user: ScimObject, index: number) => (
-                  <ListItem key={`users-${index}`} padding="xs">
-                    <User
-                      avatar
-                      avatarUrl={get(user, "photos.0.value")}
-                      margin="none"
-                      name={user.displayName}
-                    />
-                  </ListItem>
-                ))}
+                {current.users.map((user: ScimObject, index: number) => {
+                  const extension =
+                    user[SCIM_USER_KEY] ||
+                    ({} as ScimObject[typeof SCIM_USER_KEY])
+                  return (
+                    <ListItem key={`users-${index}`} padding="xs">
+                      <User
+                        avatar
+                        avatarUrl={get(user, "photos.0.value")}
+                        margin="none"
+                        name={user.displayName}
+                        orientation="horizontal"
+                        territory={extension?.territoryAbbr}
+                        title={user.title}
+                      />
+                    </ListItem>
+                  )
+                })}
                 <ListItem>
                   {current.users.length < current.count && (
                     <Button
diff --git a/audiences-react/src/AudienceForm/ScimResourceTypeahead.tsx b/audiences-react/src/AudienceForm/ScimResourceTypeahead.tsx
@@ -17,7 +17,6 @@ function playbookOptions(objects: ScimObject[]): PlaybookOption[] {
         ...object,
         value: parseInt(object.id),
         label: object.displayName,
-        imageUrl: get(object, "photos.0.value"),
       }))
     : []
 }
diff --git a/audiences-react/src/AudienceForm/UsersTypeahead.tsx b/audiences-react/src/AudienceForm/UsersTypeahead.tsx
@@ -4,6 +4,14 @@ import { useContext, useEffect, useRef } from "react"
 import { components, SingleValueProps, OptionProps } from "react-select"
 import Audiences from "../audiences"
 import { ScimObject } from "../types"
+import { CSSObject } from "@emotion/react"
+
+const customStyles = {
+  menuPortal: (base: CSSObject) => ({
+    ...base,
+    zIndex: 2000,
+  }),
+}
 
 /**
  * @description This has to be hardcoded because the API returns an object where the key for the user details
@@ -17,31 +25,34 @@ type PlaybookOption = ScimObject & {
   label: string
 }
 
-function playbookOptions(objects: ScimObject[]): PlaybookOption[] {
+function playbookOptions(
+  objects: ScimObject[],
+  isMobile?: boolean,
+): PlaybookOption[] {
   return objects
     ? objects.map((object: ScimObject) => ({
         ...object,
         value: parseInt(object.id),
         label: object.displayName,
-        imageUrl: get(object, "photos.0.value"),
+        imageUrl: !isMobile && get(object, "photos.0.value"),
       }))
     : []
 }
 
-type MobileTypeaheadProps = {
+type UsersTypeaheadProps = {
   label: string
   value: ScimObject[]
   onChange: (values: ScimObject[]) => void
   resourceId: string
   isMobile?: boolean
 }
-export function MobileTypeahead({
+export function UsersTypeahead({
   resourceId,
   onChange,
   value,
   isMobile,
   ...typeaheadProps
-}: MobileTypeaheadProps) {
+}: UsersTypeaheadProps) {
   const { query } = useContext(Audiences)!
 
   function handleChange(value: any, ...event: any[]) {
@@ -52,7 +63,7 @@ export function MobileTypeahead({
     debounce(
       async (search: string, callback: (options: PlaybookOption[]) => void) => {
         const options = await query(resourceId, search)
-        callback(playbookOptions(options))
+        callback(playbookOptions(options, isMobile))
       },
       600,
     ),
@@ -109,10 +120,13 @@ export function MobileTypeahead({
         loadOptions={loadOptions}
         placeholder=""
         {...typeaheadProps}
-        value={playbookOptions(value)}
+        value={playbookOptions(value, isMobile)}
         onChange={handleChange}
+        menuPortalTarget={document.body}
+        styles={customStyles}
       />
-      {value &&
+      {isMobile &&
+        value &&
         value.map((user: ScimObject) => {
           // NOTE: This is a workaround for the SCIM API's structure
           const extension =
diff --git a/audiences-react/src/AudienceForm/index.tsx b/audiences-react/src/AudienceForm/index.tsx
@@ -12,7 +12,7 @@ import { ScimObject } from "../types"
 import { toSentence } from "./toSentence"
 
 import { ScimResourceTypeahead } from "./ScimResourceTypeahead"
-import { MobileTypeahead } from "./MobileTypeahead"
+import { UsersTypeahead } from "./UsersTypeahead"
 import { CriteriaList } from "./CriteriaList"
 import { CriteriaForm } from "./CriteriaForm"
 import { ActionBar } from "./ActionBar"
@@ -25,6 +25,7 @@ type AudienceFormProps = {
   allowIndividuals: boolean
   allowMatchAll: boolean
   isMobile?: boolean
+  isPrivate?: boolean
   onSkip?: () => void
 }
 
@@ -34,11 +35,11 @@ export const AudienceForm = ({
   allowIndividuals = true,
   allowMatchAll = true,
   isMobile,
+  isPrivate,
   onSkip,
 }: AudienceFormProps) => {
   const [editing, setEditing] = useState<number>()
   const { error, value: context, change } = useAudiencesContext()
-
   if (isEmpty(context)) {
     return null
   }
@@ -73,38 +74,31 @@ export const AudienceForm = ({
           )}
           {!context.match_all && (
             <>
-              {allowIndividuals &&
-                (isMobile ? (
-                  <MobileTypeahead
-                    label="Add Individuals"
-                    value={context.extra_users || []}
-                    onChange={(users: ScimObject[]) =>
-                      change("extra_users", users)
-                    }
-                    resourceId={userResource}
-                  />
-                ) : (
-                  <ScimResourceTypeahead
-                    label="Add Individuals"
-                    value={context.extra_users || []}
-                    onChange={(users: ScimObject[]) =>
-                      change("extra_users", users)
-                    }
-                    resourceId={userResource}
-                  />
-                ))}
-              <CriteriaList onEditCriteria={setEditing} />
-              <FlexItem alignSelf="center">
-                <Button
-                  fixedWidth
-                  marginTop="md"
-                  paddingX={isMobile && "xs"}
-                  size={isMobile ? "sm" : "md"}
-                  onClick={() => setEditing(context.criteria.length)}
-                  text={`Add Members by ${toSentence(groupResources)}`}
-                  variant="link"
+              {allowIndividuals && (
+                <UsersTypeahead
+                  label="Add Individuals"
+                  value={context.extra_users || []}
+                  isMobile={isMobile}
+                  onChange={(users: ScimObject[]) =>
+                    change("extra_users", users)
+                  }
+                  resourceId={userResource}
                 />
-              </FlexItem>
+              )}
+              <CriteriaList onEditCriteria={setEditing} />
+              {isPrivate !== false && (
+                <FlexItem alignSelf="center">
+                  <Button
+                    fixedWidth
+                    marginTop="md"
+                    paddingX={isMobile && "xs"}
+                    size={isMobile ? "sm" : "md"}
+                    onClick={() => setEditing(context.criteria.length)}
+                    text={`Add Members by ${toSentence(groupResources)}`}
+                    variant="link"
+                  />
+                </FlexItem>
+              )}
             </>
           )}
         </Flex>
diff --git a/audiences-react/src/audiences.ts b/audiences-react/src/audiences.ts
@@ -69,13 +69,23 @@ export function useAudiences(
     search?: string,
     offset?: number,
   ) {
-    return get<{ count: number; users: ScimObject[] }>(
+    const result = await get<{ count: number; users: ScimObject[] }>(
       `${key}/users/${criterion?.id || ""}?offset=${offset}&search=${search}`,
     )
+    result.users = result.users.sort((a, b) =>
+      a.displayName.localeCompare(b.displayName),
+    )
+    return result
   }
 
   async function query(resourceId: string, displayName: string) {
-    return await get<ScimObject[]>(`scim/${resourceId}?query=${displayName}`)
+    const results = await get<ScimObject[]>(
+      `scim/${resourceId}?query=${displayName}`,
+    )
+    if (resourceId !== "Territories") {
+      return results.sort((a, b) => a.displayName.localeCompare(b.displayName))
+    }
+    return results
   }
 
   async function save() {
diff --git a/audiences-react/src/index.tsx b/audiences-react/src/index.tsx
@@ -19,6 +19,7 @@ type AudienceEditorProps = {
   allowMatchAll?: boolean
   fetchOptions?: Parameters<typeof useAudiences>[2]
   isMobile?: boolean
+  isPrivate?: boolean
   onSkip?: () => void
 }
 export function AudienceEditor({
@@ -28,6 +29,7 @@ export function AudienceEditor({
   allowMatchAll = true,
   fetchOptions = {},
   isMobile = false,
+  isPrivate,
   onSkip,
 }: AudienceEditorProps) {
   const audiencesUri = context ? uri : audiencesRoot(uri)
@@ -42,6 +44,7 @@ export function AudienceEditor({
         allowIndividuals={allowIndividuals}
         allowMatchAll={allowMatchAll}
         isMobile={isMobile}
+        isPrivate={isPrivate}
         onSkip={onSkip}
       />
     </Audiences.Provider>

Original file line number	Diff line number	Diff line change
`@@ -1,6 +1,6 @@`
`1`	`1`	`{`
`2`	`2`	`"name": "audiences",`
`3`		`- "version": "2.1.0",`
	`3`	`+ "version": "2.2.0-alpha",`
`4`	`4`	`"description": "Audiences SCIM client",`
`5`	`5`	`"files": [`
`6`	`6`	`"dist/.",`
Original file line number	Diff line number	Diff line change
`@@ -9,9 +9,7 @@ export function CriteriaList({ onEditCriteria }: CriteriaListProps) {`
`9`	`9`	`const { value: context, removeCriteria } = useAudiencesContext()`
`10`	`10`
`11`	`11`	`const handleRemoveCriteria = (index: number) => {`
`12`		`- if (confirm("Remove criteria?")) {`
`13`		`- removeCriteria(index)`
`14`		`- }`
	`12`	`+ removeCriteria(index)`
`15`	`13`	`}`
`16`	`14`
`17`	`15`	`return (`
Original file line number	Diff line number	Diff line change
`@@ -17,7 +17,6 @@ function playbookOptions(objects: ScimObject[]): PlaybookOption[] {`
`17`	`17`	`...object,`
`18`	`18`	`value: parseInt(object.id),`
`19`	`19`	`label: object.displayName,`
`20`		`- imageUrl: get(object, "photos.0.value"),`
`21`	`20`	`}))`
`22`	`21`	`: []`
`23`	`22`	`}`