Adjusted caret

CMS-Enterprise · Sep 4, 2024 · 695bce6 · 695bce6
1 parent 3e79ea8
commit 695bce6
Show file tree

Hide file tree

Showing 3 changed files with 21 additions and 13 deletions.
diff --git a/src/components/shared/CollapsableLink/index.tsx b/src/components/shared/CollapsableLink/index.tsx
@@ -22,6 +22,7 @@ type CollapsableLinkProps = {
   labelPosition?: 'top' | 'bottom';
   expandOnExport?: boolean;
   setParentOpen?: (isOpen: boolean) => void;
+  horizontalCaret?: boolean;
 };
 
 const CollapsableLink = ({
@@ -39,7 +40,8 @@ const CollapsableLink = ({
   showDescription,
   labelPosition = 'top',
   expandOnExport = false,
-  setParentOpen
+  setParentOpen,
+  horizontalCaret = false
 }: CollapsableLinkProps) => {
   // TODO: should this state instead be held in the parent and passed in as prop?
   // Followup: if the state should remain here, how do we test the component when it's open?
@@ -69,12 +71,20 @@ const CollapsableLink = ({
     );
   };
 
+  const OpenCaret = horizontalCaret ? (
+    <Icon.NavigateNext className="top-05 margin-right-05" />
+  ) : (
+    <Icon.ExpandMore className="top-05 margin-right-05" />
+  );
+
+  const DownCaret = horizontalCaret ? (
+    <Icon.ExpandMore className="top-05 margin-right-05" />
+  ) : (
+    <Icon.ExpandLess className="top-05 margin-right-05" />
+  );
+
   const renderCaret = () => {
-    return isOpen ? (
-      <Icon.ExpandLess className="top-05 margin-right-05" />
-    ) : (
-      <Icon.ExpandMore className="top-05 margin-right-05" />
-    );
+    return isOpen ? DownCaret : OpenCaret;
   };
 
   const expandIcon = eyeIcon ? renderEyeIcon() : renderCaret();

diff --git a/src/views/ModelPlan/Collaborators/_components/RoleInfo/index.tsx b/src/views/ModelPlan/Collaborators/_components/RoleInfo/index.tsx
@@ -23,6 +23,7 @@ const RoleInfo = ({ className }: RoleInfoProps) => {
         className
       )}
       label={collaboratorsMiscT('rolesInfo.label')}
+      horizontalCaret
     >
       <ul className="margin-y-0 padding-left-4">
         {roleInfoConfig.baseRoles.map((role: string, index: number) => (

diff --git a/src/views/ModelPlan/Collaborators/table.tsx b/src/views/ModelPlan/Collaborators/table.tsx
@@ -77,14 +77,11 @@ const CollaboratorsTable = ({
         Header: collaboratorsMiscT('table.role'),
         accessor: 'teamRoles',
 
-        Cell: ({ teamRoles }: CollaboratorType) => {
+        Cell: (row: any) => {
+          const roles = row.value as CollaboratorType['teamRoles'];
           const modelLeadFirst = [
-            ...teamRoles.filter(
-              (role: TeamRole) => role === TeamRole.MODEL_LEAD
-            ),
-            ...teamRoles.filter(
-              (role: TeamRole) => role !== TeamRole.MODEL_LEAD
-            )
+            ...roles.filter((role: TeamRole) => role === TeamRole.MODEL_LEAD),
+            ...roles.filter((role: TeamRole) => role !== TeamRole.MODEL_LEAD)
           ];
           return modelLeadFirst
             .map((role: TeamRole) => {