From b24c18f3079eaf787996e2f1b683a766139b6043 Mon Sep 17 00:00:00 2001
From: Cathia Archidoit <cathia.archidoit@filigran.io>
Date: Wed, 8 Jan 2025 11:49:36 +0100
Subject: [PATCH] [frontend] sort group in user creation form (#9273)

---
 .../components/common/form/GroupField.tsx     | 42 ++++++++-----------
 1 file changed, 18 insertions(+), 24 deletions(-)

diff --git a/opencti-platform/opencti-front/src/private/components/common/form/GroupField.tsx b/opencti-platform/opencti-front/src/private/components/common/form/GroupField.tsx
index 2c68d4ca1690..c7a6cb3f3758 100644
--- a/opencti-platform/opencti-front/src/private/components/common/form/GroupField.tsx
+++ b/opencti-platform/opencti-front/src/private/components/common/form/GroupField.tsx
@@ -25,25 +25,17 @@ const useStyles = makeStyles({
   },
 });
 
-export const searchGroupFieldQuery = graphql`
-  query GroupFieldSearchQuery($search: String) {
-    groups(orderBy: name, search: $search) {
-      edges {
-        node {
-          id
-          name
-          group_confidence_level {
-            max_confidence
-          }
-        }
-      }
-    }
-  }
-`;
-
 export const groupsQuery = graphql`
-  query GroupFieldQuery {
-    groups {
+  query GroupFieldQuery(
+      $orderMode: OrderingMode
+      $orderBy: GroupsOrdering
+      $filters: FilterGroup
+      ) {
+    groups(
+      orderMode: $orderMode
+      orderBy: $orderBy
+      filters: $filters
+    ) {
       edges {
         node {
           id
@@ -95,7 +87,7 @@ const GroupField: React.FC<GroupFieldProps> = (props) => {
     if (predefinedGroups) {
       setGroups(predefinedGroups);
     } else {
-      fetchQuery(groupsQuery)
+      fetchQuery(groupsQuery, { orderBy: 'name', orderMode: 'asc' })
         .toPromise()
         .then((data) => {
           const dataGroups = (data as GroupFieldQuery$data).groups?.edges ?? [];
@@ -103,11 +95,13 @@ const GroupField: React.FC<GroupFieldProps> = (props) => {
             const max_confidence = n?.node.group_confidence_level
               ? `${t_i18n('Max Confidence Level:')} ${n.node.group_confidence_level.max_confidence}`
               : t_i18n('No Max Confidence Level');
-            const newLabel = showConfidence
+            const groupLabel = n?.node.name ?? '';
+            const groupLabelInList = showConfidence
               ? `${n?.node.name} (${max_confidence})`
               : n?.node.name ?? '';
             return {
-              label: newLabel,
+              label: groupLabel,
+              labelInList: groupLabelInList,
               value: n?.node.id ?? '',
             };
           });
@@ -133,12 +127,12 @@ const GroupField: React.FC<GroupFieldProps> = (props) => {
       options={groups}
       onInputChange={searchGroups}
       onChange={typeof onChange === 'function' ? onChange : null}
-      renderOption={(renderProps: React.HTMLAttributes<HTMLLIElement>, option: { color: string; label: string }) => (
+      renderOption={(renderProps: React.HTMLAttributes<HTMLLIElement>, option: { color: string; label: string, labelInList?: string }) => (
         <li {...renderProps}>
           <div className={classes.icon} style={{ color: option.color }}>
-            <ItemIcon type="Group" />
+            <ItemIcon type="Group"/>
           </div>
-          <div className={classes.text}>{option.label}</div>
+          <div className={classes.text}>{option.labelInList ?? option.label}</div>
         </li>
       )}
       classes={{ clearIndicator: classes.autoCompleteIndicator }}