Merge pull request #590 from MAIF/selectgroup

Selectgroup
MAIF · Aug 29, 2023 · 7e854ef · 7e854ef
2 parents 6e07efa + 7874cb3
commit 7e854ef
Show file tree

Hide file tree

Showing 3 changed files with 48 additions and 15 deletions.
diff --git a/daikoku/javascript/src/components/backoffice/apis/TeamApiPricings.tsx b/daikoku/javascript/src/components/backoffice/apis/TeamApiPricings.tsx
@@ -169,6 +169,19 @@ const OtoroshiEntitiesSelector = ({
       onChange(value);
     }
   };
+
+  const groupedOptions = [
+    { label: 'Service groups', options: groups },
+    { label: 'Services', options: services },
+    { label: 'Routes', options: routes }
+  ];
+
+  const formatGroupLabel = (data) => (
+    <div className="groupStyles">
+      <span>{data.label}</span>
+      <span className="groupBadgeStyles">{data.options.length}</span>
+    </div>
+  )
 
   return (<div>
     <Select
@@ -179,39 +192,40 @@ const OtoroshiEntitiesSelector = ({
       isDisabled={disabled && !loading}
       placeholder={translate('Authorized.entities.placeholder')} //@ts-ignore //FIXME
       components={(props: any) => <components.Group {...props} />}
-      options={[
-        { label: 'Service groups', options: groups },
-        { label: 'Services', options: services },
-        { label: 'Routes', options: routes },
-      ]} value={value} onChange={onValueChange} classNamePrefix="reactSelect" className="reactSelect" />
-    <div className="col-12 d-flex flex-row mt-1">
+      formatGroupLabel={formatGroupLabel}
+      options={groupedOptions} 
+      value={value} 
+      onChange={onValueChange} 
+      classNamePrefix="reactSelect" 
+      className="reactSelect" />
+    <div className="col-12 d-flex flex-row mt-3">
       <div className="d-flex flex-column flex-grow-1">
-        <strong className="font-italic">
+        <strong className="reactSelect__group-heading">
           <Translation i18nkey="authorized.groups">Services Groups</Translation>
         </strong>
         {!!value &&
           value.filter((x: any) => x.type === 'group')
-            .map((g: any, idx: any) => (<span className="font-italic" key={idx}>
+            .map((g: any, idx: any) => (<span key={idx}>
               {g.label}
             </span>))}
       </div>
       <div className="d-flex flex-column flex-grow-1">
-        <strong className="font-italic">
+        <strong className="reactSelect__group-heading">
           <Translation i18nkey="authorized.services">Services</Translation>
         </strong>
         {!!value &&
           value.filter((x: any) => x.type === 'service')
-            .map((g: any, idx: any) => (<span className="font-italic" key={idx}>
+            .map((g: any, idx: any) => (<span key={idx}>
               {g.label}
             </span>))}
       </div>
       <div className="d-flex flex-column flex-grow-1">
-        <strong className="font-italic">
+        <strong className="reactSelect__group-heading">
           <Translation i18nkey="authorized.routes">Routes</Translation>
         </strong>
         {!!value &&
           value.filter((x: any) => x.type === 'route')
-            .map((g: any, idx: any) => (<span className="font-italic" key={idx}>
+            .map((g: any, idx: any) => (<span key={idx}>
               {g.label}
             </span>))}
       </div>

diff --git a/daikoku/javascript/src/style/components/discussion.scss b/daikoku/javascript/src/style/components/discussion.scss
@@ -62,7 +62,7 @@
     display: flex;
     flex-direction: row;
     padding: 10px;
-    background: #fff;
+    background: $section-bg-color;
     border-bottom-right-radius: 4px;
     border-bottom-left-radius: 4px;
     &__message{
@@ -89,7 +89,7 @@
       width: 70px;
       border: none;
       cursor: pointer;
-      background-color: #fff;
+      background-color:  $section-bg-color;
       color: $info-color;
       outline: none;
       &:hover {

diff --git a/daikoku/javascript/src/style/components/reactSelect.scss b/daikoku/javascript/src/style/components/reactSelect.scss
@@ -27,7 +27,26 @@
 }
 
 .reactSelect__group-heading{
-  color:$form-select-heading-color !important;
+  padding: 10px;
+  background-color: $menu-text-hover-bg-color;
+  color : $menu-text-hover-color !important;
+}
+.groupStyles {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+}
+
+.groupBadgeStyles{
+  background-color: #EBECF0;
+  border-radius: 2em;
+  color: #172B4D;
+  display: inline-block;
+  font-size: 12;
+  font-weight: normal;
+  line-height: 1;
+  min-width: 1;
+  padding: 0.16666666666667em 0.5em
 }
 
 .select-sm {