From 1470c726fb20a8d5006ebdb8e8fd8b86087a7083 Mon Sep 17 00:00:00 2001
From: Guillaume Paris <guillaume.paris@filigran.io>
Date: Wed, 11 Sep 2024 09:47:31 +0200
Subject: [PATCH] [frontend] align style with octi

---
 .../assets/asset_groups/AssetGroups.tsx       | 36 +++++++++----------
 .../common/queryable/filter/FilterChip.tsx    | 20 +++++++----
 .../queryable/filter/FilterChipPopover.tsx    |  3 +-
 .../common/queryable/filter/FilterUtils.tsx   | 12 +++----
 4 files changed, 39 insertions(+), 32 deletions(-)

diff --git a/openbas-front/src/admin/components/assets/asset_groups/AssetGroups.tsx b/openbas-front/src/admin/components/assets/asset_groups/AssetGroups.tsx
index e4423254a1..41f27b533a 100644
--- a/openbas-front/src/admin/components/assets/asset_groups/AssetGroups.tsx
+++ b/openbas-front/src/admin/components/assets/asset_groups/AssetGroups.tsx
@@ -119,14 +119,14 @@ const AssetGroups = () => {
 
   return (
     <>
-      <Breadcrumbs variant="list" elements={[{ label: t('Assets') }, { label: t('Asset groups'), current: true }]}/>
+      <Breadcrumbs variant="list" elements={[{ label: t('Assets') }, { label: t('Asset groups'), current: true }]} />
       <PaginationComponent
         fetch={searchAssetGroups}
         searchPaginationInput={searchPaginationInput}
         setContent={setAssetGroups}
         exportProps={exportProps}
       />
-      <div className="clearfix"/>
+      <div className="clearfix" />
       <List>
         <ListItem
           classes={{ root: classes.itemHead }}
@@ -152,7 +152,7 @@ const AssetGroups = () => {
                 searchPaginationInput={searchPaginationInput}
                 setSearchPaginationInput={setSearchPaginationInput}
               />
-          }
+            }
           />
           <ListItemSecondaryAction> &nbsp; </ListItemSecondaryAction>
         </ListItem>
@@ -165,7 +165,7 @@ const AssetGroups = () => {
             onClick={() => setSelectedAssetGroupId(assetGroup.asset_group_id)}
           >
             <ListItemIcon>
-              <SelectGroup color="primary"/>
+              <SelectGroup color="primary" />
             </ListItemIcon>
             <ListItemText
               primary={
@@ -181,7 +181,7 @@ const AssetGroups = () => {
                       ? assetGroup.asset_group_dynamic_filter?.filters.map((filter, index) => (
                         <>
                           {
-                              index !== 0 && <span style={{ marginRight: 10 }}>
+                            index !== 0 && <span style={{ marginRight: 10 }}>
                                 {t(assetGroup.asset_group_dynamic_filter?.mode?.toUpperCase())}
                               </span>
                           }
@@ -189,17 +189,17 @@ const AssetGroups = () => {
                             size="small"
                             style={index !== assetGroup.asset_group_dynamic_filter?.filters?.length ? { marginRight: 10 } : {}}
                             key={filter.key}
-                            label={<><strong>{t(filter.key)}</strong> {convertOperatorToIcon(t, filter.operator)} {filter.values?.join(', ')}</>}
+                            label={<><strong>{t(filter.key)}</strong> {convertOperatorToIcon(t, filter.operator)}{' '}{filter.values?.join(', ')}</>}
                           />
                         </>))
                       : ''}
                     {assetGroup.asset_group_assets?.length ? `${assetGroup.asset_group_dynamic_filter?.filters?.length ? t('and') : ''} ${assetGroup.asset_group_assets?.length} ${t('managed assets')}` : ''}
                   </div>
                   <div className={classes.bodyItem} style={inlineStyles.asset_group_tags}>
-                    <ItemTags variant="list" tags={assetGroup.asset_group_tags}/>
+                    <ItemTags variant="list" tags={assetGroup.asset_group_tags} />
                   </div>
                 </div>
-            }
+              }
             />
             <ListItemSecondaryAction>
               <AssetGroupPopover
@@ -216,7 +216,7 @@ const AssetGroups = () => {
           </ListItem>
         ))}
       </List>
-      {userAdmin && <AssetGroupCreation onCreate={(result) => setAssetGroups([result, ...assetGroups])}/>}
+      {userAdmin && <AssetGroupCreation onCreate={(result) => setAssetGroups([result, ...assetGroups])} />}
       <MuiDrawer
         open={selectedAssetGroupId !== undefined}
         keepMounted={false}
@@ -227,15 +227,15 @@ const AssetGroups = () => {
         elevation={1}
       >
         {selectedAssetGroupId !== undefined && (
-        <AssetGroupManagement
-          assetGroupId={selectedAssetGroupId}
-          handleClose={() => setSelectedAssetGroupId(undefined)}
-          onUpdate={(result) => setAssetGroups(assetGroups.map((ag) => (ag.asset_group_id !== result.asset_group_id ? ag : result)))}
-          onRemoveEndpointFromAssetGroup={(assetId) => setAssetGroups(assetGroups.map((ag) => (ag.asset_group_id !== selectedAssetGroupId ? ag : {
-            ...ag,
-            asset_group_assets: ag?.asset_group_assets?.toSpliced(ag?.asset_group_assets?.indexOf(assetId), 1),
-          })))}
-        />
+          <AssetGroupManagement
+            assetGroupId={selectedAssetGroupId}
+            handleClose={() => setSelectedAssetGroupId(undefined)}
+            onUpdate={(result) => setAssetGroups(assetGroups.map((ag) => (ag.asset_group_id !== result.asset_group_id ? ag : result)))}
+            onRemoveEndpointFromAssetGroup={(assetId) => setAssetGroups(assetGroups.map((ag) => (ag.asset_group_id !== selectedAssetGroupId ? ag : {
+              ...ag,
+              asset_group_assets: ag?.asset_group_assets?.toSpliced(ag?.asset_group_assets?.indexOf(assetId), 1),
+            })))}
+          />
         )}
       </MuiDrawer>
     </>
diff --git a/openbas-front/src/components/common/queryable/filter/FilterChip.tsx b/openbas-front/src/components/common/queryable/filter/FilterChip.tsx
index a50b54f81c..44f02cafb0 100644
--- a/openbas-front/src/components/common/queryable/filter/FilterChip.tsx
+++ b/openbas-front/src/components/common/queryable/filter/FilterChip.tsx
@@ -1,7 +1,6 @@
 import React, { FunctionComponent, useEffect, useRef, useState } from 'react';
 import { Chip, Tooltip } from '@mui/material';
 import { makeStyles } from '@mui/styles';
-import classNames from 'classnames';
 import { FilterHelpers } from './FilterHelpers';
 import FilterChipPopover from './FilterChipPopover';
 import type { Filter, PropertySchemaDTO } from '../../../../utils/api-types';
@@ -28,6 +27,10 @@ const useStyles = makeStyles((theme: Theme) => ({
     // display: 'flex',
     // alignItems: 'center',
   },
+  title: {
+    cursor: 'pointer',
+    '&:hover': { textDecorationLine: 'underline' },
+  },
 }));
 
 interface Props {
@@ -81,10 +84,14 @@ const FilterChip: FunctionComponent<Props> = ({
     });
   };
 
-  const title = (withStyle: boolean) => {
+  const title = (isTooltip: boolean) => {
+    if (isTooltip) {
+      return (<span><strong>{t(filter.key)}</strong>{' '}<span>{convertOperatorToIcon(t, filter.operator)} {toValues(options)}</span></span>);
+    }
     return (
-      <span className={classNames({ [classes.container]: withStyle })}>
-        <strong>{t(filter.key)}</strong> {convertOperatorToIcon(t, filter.operator)} {toValues(options)}
+      <span className={classes.container}>
+        <strong onClick={handleOpen} className={classes.title}>{t(filter.key)}</strong>{' '}
+        <span>{convertOperatorToIcon(t, filter.operator)} {toValues(options)}</span>
       </span>
     );
   };
@@ -92,11 +99,10 @@ const FilterChip: FunctionComponent<Props> = ({
   return (
     <>
       <Tooltip
-        title={title(false)}
+        title={title(true)}
       >
         <Chip
-          label={title(true)}
-          onClick={handleOpen}
+          label={title(false)}
           onDelete={handleRemoveFilter}
           component="div"
           ref={chipRef}
diff --git a/openbas-front/src/components/common/queryable/filter/FilterChipPopover.tsx b/openbas-front/src/components/common/queryable/filter/FilterChipPopover.tsx
index 873b679c07..b44b3ac554 100644
--- a/openbas-front/src/components/common/queryable/filter/FilterChipPopover.tsx
+++ b/openbas-front/src/components/common/queryable/filter/FilterChipPopover.tsx
@@ -34,7 +34,7 @@ const FilterChipPopover: FunctionComponent<Props> = ({
   const displayOperatorAndFilter = () => {
     // Specific field
     if (propertySchema.schema_property_name === 'scenario_recurrence') {
-      return (<ScenarioStatusFilter propertySchema={propertySchema} helpers={helpers}/>);
+      return (<ScenarioStatusFilter propertySchema={propertySchema} helpers={helpers} />);
     }
 
     const operators = availableOperators(propertySchema);
@@ -43,6 +43,7 @@ const FilterChipPopover: FunctionComponent<Props> = ({
         <Select
           value={filter.operator ?? operators[0]}
           label="Operator"
+          variant="standard"
           fullWidth
           onChange={handleChangeOperator}
           style={{ marginBottom: 15 }}
diff --git a/openbas-front/src/components/common/queryable/filter/FilterUtils.tsx b/openbas-front/src/components/common/queryable/filter/FilterUtils.tsx
index 596a0ef747..d5ec12b08f 100644
--- a/openbas-front/src/components/common/queryable/filter/FilterUtils.tsx
+++ b/openbas-front/src/components/common/queryable/filter/FilterUtils.tsx
@@ -41,9 +41,9 @@ export const isEmptyFilter = (filterGroup: FilterGroup, key: string) => {
 export const convertOperatorToIcon = (t: (text: string) => string, operator: Filter['operator']) => {
   switch (operator) {
     case 'eq':
-      return <>&nbsp;=</>;
+      return <>=</>;
     case 'not_eq':
-      return <>&nbsp;&#8800;</>;
+      return <>&#8800;</>;
     case 'not_contains':
       return t('not contains');
     case 'contains':
@@ -53,13 +53,13 @@ export const convertOperatorToIcon = (t: (text: string) => string, operator: Fil
     case 'not_starts_with':
       return t('not starts with');
     case 'gt':
-      return <>&nbsp;&#62;</>;
+      return <>&#62;</>;
     case 'gte':
-      return <>&nbsp;&#8805;</>;
+      return <>&#8805;</>;
     case 'lt':
-      return <>&nbsp;&#60;</>;
+      return <>&#60;</>;
     case 'lte':
-      return <>&nbsp;&#8804;</>;
+      return <>&#8804;</>;
     case 'empty':
       return t('is empty');
     case 'not_empty':