[frontend] Fix: When opening a filter for the first time, focus is no…

…t taken (#5062) Co-authored-by: Samuel Hassine <samuel.hassine@filigran.io>
OpenCTI-Platform · Dec 4, 2023 · 4b54fdc · 4b54fdc
1 parent f9f55b9
commit 4b54fdc
Show file tree

Hide file tree

Showing 31 changed files with 101 additions and 122 deletions.
diff --git a/opencti-platform/opencti-front/src/components/FilterIconButton.tsx b/opencti-platform/opencti-front/src/components/FilterIconButton.tsx
@@ -1,4 +1,4 @@
-import React, { FunctionComponent } from 'react';
+import React, { FunctionComponent, useRef } from 'react';
 import { ChipOwnProps } from '@mui/material/Chip/Chip';
 import { DataColumns } from './list_lines';
 import {
@@ -41,6 +41,10 @@ const FilterIconButton: FunctionComponent<FilterIconButtonProps> = ({
   chipColor,
   helpers,
 }) => {
+  const hasRenderedRef = useRef(false);
+  const setHasRenderedRef = () => {
+    hasRenderedRef.current = true;
+  };
   const displayedFilters = {
     ...filters,
     filters:
@@ -71,6 +75,8 @@ const FilterIconButton: FunctionComponent<FilterIconButtonProps> = ({
             filters={displayedFilters}
             filtersRepresentativesQueryRef={filtersRepresentativesQueryRef}
             helpers={helpers}
+            hasRenderedRef={hasRenderedRef.current}
+            setHasRenderedRef={setHasRenderedRef}
           />
         </React.Suspense>
       )}

diff --git a/opencti-platform/opencti-front/src/components/FilterIconButtonContainer.tsx b/opencti-platform/opencti-front/src/components/FilterIconButtonContainer.tsx
@@ -87,6 +87,8 @@ interface FilterIconButtonContainerProps {
   filtersRepresentativesQueryRef: PreloadedQuery<FilterIconButtonContentQuery>;
   chipColor?: ChipOwnProps['color'];
   helpers?: UseLocalStorageHelpers;
+  hasRenderedRef: boolean;
+  setHasRenderedRef: () => void;
 }
 
 const FilterIconButtonContainer: FunctionComponent<
@@ -102,6 +104,8 @@ FilterIconButtonContainerProps
   chipColor,
   handleRemoveFilter,
   helpers,
+  hasRenderedRef,
+  setHasRenderedRef,
 }) => {
   const { t } = useFormatter();
   const classes = useStyles();
@@ -122,7 +126,7 @@ FilterIconButtonContainerProps
   }
   const latestItemRef = useRef(null);
   const nbDisplayFilter = useRef(0);
-  const hasRenderedRef = useRef(false);
+
   const filtersRepresentativesMap = new Map(
     filtersRepresentatives.map((n) => [n.id, n.value]),
   );
@@ -136,17 +140,18 @@ FilterIconButtonContainerProps
     // it means that the new filter feature is activated. Will be removed in the next version when we generalize the feature on every filter.
     useEffect(() => {
       if (
-        hasRenderedRef.current
+        hasRenderedRef
         && latestItemRef.current
         && nbDisplayFilter.current < displayedFilters.length
       ) {
         setFilterChipsParams({
           filterId: displayedFilters[displayedFilters.length - 1].id,
           anchorEl: latestItemRef.current as unknown as HTMLElement,
         });
+      } else {
+        setHasRenderedRef();
       }
       nbDisplayFilter.current = displayedFilters.length;
-      hasRenderedRef.current = true;
     }, [displayedFilters]);
   }
   const handleClose = () => {
@@ -194,7 +199,6 @@ FilterIconButtonContainerProps
         return null;
     }
   };
-
   const isReadonlyFilter = helpers || handleRemoveFilter;
   return (
     <Box
@@ -206,7 +210,7 @@ FilterIconButtonContainerProps
             marginRight: '30px',
           }
           : {
-            marginTop: '10px',
+            marginTop: displayedFilters.length === 0 ? 0 : '10px',
             gap: '10px',
             display: 'flex',
             flexWrap: 'wrap',

diff --git a/opencti-platform/opencti-front/src/components/list_cards/ListCards.jsx b/opencti-platform/opencti-front/src/components/list_cards/ListCards.jsx
@@ -25,7 +25,6 @@ import Security from '../../utils/Security';
 import { KNOWLEDGE_KNGETEXPORT } from '../../utils/hooks/useGranted';
 import FilterIconButton from '../FilterIconButton';
 import { export_max_size } from '../../utils/utils';
-import { isFilterGroupNotEmpty } from '../../utils/filters/filtersUtils';
 import GenerateDefaultDirectFilters from '../GenerateDefaultDirectFilters';
 
 const styles = () => ({
@@ -219,16 +218,14 @@ class ListCards extends Component {
           availableFilterKeys={availableFilterKeys}
           helpers={helpers}
         />
-        {isFilterGroupNotEmpty(filters) && (
-          <FilterIconButton
-            helpers={helpers}
-            filters={filters}
-            handleRemoveFilter={handleRemoveFilter}
-            handleSwitchGlobalMode={handleSwitchGlobalMode}
-            handleSwitchLocalMode={handleSwitchLocalMode}
-            redirection
-          />
-        )}
+        <FilterIconButton
+          helpers={helpers}
+          filters={filters}
+          handleRemoveFilter={handleRemoveFilter}
+          handleSwitchGlobalMode={handleSwitchGlobalMode}
+          handleSwitchLocalMode={handleSwitchLocalMode}
+          redirection
+        />
         {typeof handleToggleExports === 'function' && (
           <Security needs={[KNOWLEDGE_KNGETEXPORT]}>
             <StixDomainObjectsExports
@@ -268,7 +265,7 @@ ListCards.propTypes = {
   paginationOptions: PropTypes.object,
   numberOfElements: PropTypes.object,
   availableFilterKeys: PropTypes.array,
-  helpers: PropTypes.func,
+  helpers: PropTypes.object,
 };
 
 export default compose(inject18n, withStyles(styles))(ListCards);
diff --git a/opencti-platform/opencti-front/src/components/list_lines/ListLines.jsx b/opencti-platform/opencti-front/src/components/list_lines/ListLines.jsx
@@ -51,7 +51,6 @@ import { ExportContext } from '../../utils/ExportContextProvider';
 import { export_max_size } from '../../utils/utils';
 import Transition from '../Transition';
 import GenerateDefaultDirectFilters from '../GenerateDefaultDirectFilters';
-import { isFilterGroupNotEmpty } from '../../utils/filters/filtersUtils';
 
 const styles = (theme) => ({
   container: {
@@ -457,17 +456,15 @@ class ListLines extends Component {
           availableFilterKeys={availableFilterKeys}
           helpers={helpers}
         />
-        {isFilterGroupNotEmpty(filters) && (
-          <FilterIconButton
-            helpers={helpers}
-            availableFilterKeys={availableFilterKeys}
-            filters={filters}
-            handleRemoveFilter={handleRemoveFilter}
-            handleSwitchGlobalMode={handleSwitchGlobalMode}
-            handleSwitchLocalMode={handleSwitchLocalMode}
-            redirection
-          />
-        )}
+        <FilterIconButton
+          helpers={helpers}
+          availableFilterKeys={availableFilterKeys}
+          filters={filters}
+          handleRemoveFilter={handleRemoveFilter}
+          handleSwitchGlobalMode={handleSwitchGlobalMode}
+          handleSwitchLocalMode={handleSwitchLocalMode}
+          redirection
+        />
         {message && (
           <div style={{ width: '100%', marginTop: 10 }}>
             <Alert
@@ -711,7 +708,7 @@ ListLines.propTypes = {
   inline: PropTypes.bool,
   searchContext: PropTypes.object,
   handleExportCsv: PropTypes.func,
-  helpers: PropTypes.func,
+  helpers: PropTypes.object,
 };
 
 export default compose(inject18n, withStyles(styles))(ListLines);
diff --git a/...opencti-front/src/private/components/common/containers/ContainertKnowledgeTimeLineBar.jsx b/...opencti-front/src/private/components/common/containers/ContainertKnowledgeTimeLineBar.jsx
@@ -14,7 +14,6 @@ import { MESSAGING$ } from '../../../../relay/environment';
 import Filters from '../lists/Filters';
 import FilterIconButton from '../../../../components/FilterIconButton';
 import { UserContext } from '../../../../utils/hooks/useAuth';
-import { isFilterGroupNotEmpty } from '../../../../utils/filters/filtersUtils';
 
 const useStyles = makeStyles(() => ({
   bottomNav: {
@@ -155,12 +154,12 @@ const ContentKnowledgeTimeLineBar = ({
               />
             </div>
             <div style={{ paddingTop: 3 }}>
-              {isFilterGroupNotEmpty(timeLineFilters) && <FilterIconButton
+              <FilterIconButton
                 filters={timeLineFilters}
                 handleRemoveFilter={handleRemoveTimeLineFilter}
                 classNameNumber={1}
                 redirection
-              />}
+              />
             </div>
           </div>
         </div>

diff --git a/...c/private/components/common/containers/StixCoreObjectOrStixCoreRelationshipContainers.jsx b/...c/private/components/common/containers/StixCoreObjectOrStixCoreRelationshipContainers.jsx
@@ -17,7 +17,6 @@ import FilterIconButton from '../../../../components/FilterIconButton';
 import { usePaginationLocalStorage } from '../../../../utils/hooks/useLocalStorage';
 import {
   initialFilterGroup,
-  isFilterGroupNotEmpty,
 } from '../../../../utils/filters/filtersUtils';
 
 const useStyles = makeStyles(() => ({
@@ -240,15 +239,14 @@ const StixCoreObjectOrStixCoreRelationshipContainers = ({
             availableFilterKeys={availableFilterKeys}
             handleAddFilter={defaultHandleAddFilter}
           />
-          {isFilterGroupNotEmpty(filters) && (
+
             <FilterIconButton
               helpers={helpers}
               filters={filters}
               handleRemoveFilter={helpers.handleRemoveFilter}
               className={5}
               redirection
             />
-          )}
           <div className="clearfix" />
         </div>
         <QueryRenderer

diff --git a/opencti-platform/opencti-front/src/private/components/common/lists/DialogFilters.jsx b/opencti-platform/opencti-front/src/private/components/common/lists/DialogFilters.jsx
@@ -9,7 +9,6 @@ import DialogActions from '@mui/material/DialogActions';
 import Button from '@mui/material/Button';
 import { useFormatter } from '../../../../components/i18n';
 import FilterIconButton from '../../../../components/FilterIconButton';
-import { isFilterGroupNotEmpty } from '../../../../utils/filters/filtersUtils';
 
 const DialogFilters = ({
   handleOpenFilters,
@@ -46,7 +45,7 @@ const DialogFilters = ({
       >
         <DialogTitle>{t('Advanced search')}</DialogTitle>
         <DialogContent style={{ paddingTop: 10 }}>
-          {isFilterGroupNotEmpty(filters) && (
+
             <FilterIconButton
               filters={filters}
               handleRemoveFilter={defaultHandleRemoveFilter}
@@ -56,7 +55,6 @@ const DialogFilters = ({
               classNameNumber={4}
               styleNumber={2}
             />
-          )}
           {filterElement}
         </DialogContent>
         <DialogActions>

diff --git a/...private/components/common/stix_domain_objects/StixDomainObjectAttackPatternsKillChain.jsx b/...private/components/common/stix_domain_objects/StixDomainObjectAttackPatternsKillChain.jsx
@@ -30,7 +30,6 @@ import StixCoreRelationshipsExports from '../stix_core_relationships/StixCoreRel
 import Filters from '../lists/Filters';
 import FilterIconButton from '../../../../components/FilterIconButton';
 import { export_max_size } from '../../../../utils/utils';
-import { isFilterGroupNotEmpty } from '../../../../utils/filters/filtersUtils';
 
 const styles = (theme) => ({
   container: {
@@ -189,13 +188,13 @@ class StixDomainObjectAttackPatternsKillChainComponent extends Component {
             handleSwitchLocalMode={handleSwitchLocalMode}
             handleSwitchGlobalMode={handleSwitchGlobalMode}
           />
-          {isFilterGroupNotEmpty(filters) && <FilterIconButton
+          <FilterIconButton
             filters={filters}
             handleRemoveFilter={handleRemoveFilter}
             classNameNumber={6}
             styleNumber={2}
             redirection
-          />}
+          />
           <div style={{ float: 'right', margin: 0 }}>
             <ToggleButtonGroup size="small" color="secondary" exclusive={true}>
               <Tooltip title={t('Matrix view')}>

diff --git a/...ont/src/private/components/common/stix_domain_objects/StixDomainObjectThreatKnowledge.tsx b/...ont/src/private/components/common/stix_domain_objects/StixDomainObjectThreatKnowledge.tsx
@@ -46,7 +46,7 @@ import { Theme } from '../../../../components/Theme';
 import {
   findFilterFromKey,
   initialFilterGroup,
-  isFilterGroupNotEmpty,
+
   removeFilter,
 } from '../../../../utils/filters/filtersUtils';
 import FilterIconButton from '../../../../components/FilterIconButton';
@@ -442,14 +442,12 @@ const StixDomainObjectThreatKnowledge: FunctionComponent<StixDomainObjectThreatK
           >
             <SettingsOutlined />
           </IconButton>
-          {isFilterGroupNotEmpty(filters)
-            && <FilterIconButton
+            <FilterIconButton
                   helpers={helpers}
               filters={filters}
               handleRemoveFilter={helpers.handleRemoveFilter}
               classNameNumber={8}
             ></FilterIconButton>
-          }
           <Popover
             classes={{ paper: classes.container }}
             open={openTimeField}

diff --git a/opencti-platform/opencti-front/src/private/components/data/feeds/FeedCreation.jsx b/opencti-platform/opencti-front/src/private/components/data/feeds/FeedCreation.jsx
@@ -37,7 +37,7 @@ import {
   constructHandleAddFilter,
   constructHandleRemoveFilter,
   filtersAfterSwitchLocalMode,
-  initialFilterGroup, isFilterGroupNotEmpty,
+  initialFilterGroup,
   serializeFilterGroupForBackend,
 } from '../../../../utils/filters/filtersUtils';
 import FilterIconButton from '../../../../components/FilterIconButton';
@@ -522,16 +522,15 @@ const FeedCreation = (props) => {
                         />
                       </div>
                       <div className="clearfix" />
-                      {isFilterGroupNotEmpty(filters)
-                        && <FilterIconButton
+                      <FilterIconButton
                           filters={filters}
                           handleRemoveFilter={handleRemoveFilter}
                           handleSwitchLocalMode={handleSwitchLocalMode}
                           handleSwitchGlobalMode={handleSwitchGlobalMode}
                           classNameNumber={2}
                           styleNumber={2}
                           redirection
-                      />}
+                      />
                       {selectedTypes.length > 0 && (
                         <div
                           className={classes.container}

diff --git a/opencti-platform/opencti-front/src/private/components/data/feeds/FeedEdition.jsx b/opencti-platform/opencti-front/src/private/components/data/feeds/FeedEdition.jsx
@@ -35,7 +35,7 @@ import {
   constructHandleAddFilter,
   constructHandleRemoveFilter,
   deserializeFilterGroupForFrontend,
-  filtersAfterSwitchLocalMode, isFilterGroupNotEmpty,
+  filtersAfterSwitchLocalMode,
   serializeFilterGroupForBackend,
 } from '../../../../utils/filters/filtersUtils';
 import FilterIconButton from '../../../../components/FilterIconButton';
@@ -483,16 +483,15 @@ const FeedEditionContainer = (props) => {
                       />
                     </div>
                     <div className="clearfix" />
-                    {isFilterGroupNotEmpty(filters)
-                      && <FilterIconButton
+                    <FilterIconButton
                         filters={filters}
                         handleRemoveFilter={handleRemoveFilter}
                         handleSwitchLocalMode={handleSwitchLocalMode}
                         handleSwitchGlobalMode={handleSwitchGlobalMode}
                         classNameNumber={2}
                         styleNumber={2}
                         redirection
-                    />}
+                    />
                     {selectedTypes.length > 0 && (
                       <div className={classes.container} style={{ marginTop: 20 }}>
                         {Object.keys(feedAttributes).map((i) => (

diff --git a/opencti-platform/opencti-front/src/private/components/data/feeds/FeedLine.jsx b/opencti-platform/opencti-front/src/private/components/data/feeds/FeedLine.jsx
@@ -14,7 +14,7 @@ import Skeleton from '@mui/material/Skeleton';
 import FeedPopover from './FeedPopover';
 import inject18n from '../../../../components/i18n';
 import FilterIconButton from '../../../../components/FilterIconButton';
-import { deserializeFilterGroupForFrontend, isFilterGroupNotEmpty } from '../../../../utils/filters/filtersUtils';
+import { deserializeFilterGroupForFrontend } from '../../../../utils/filters/filtersUtils';
 
 const Transition = React.forwardRef((props, ref) => (
     <Slide direction="up" ref={ref} {...props} />
@@ -95,12 +95,12 @@ class FeedLineLineComponent extends Component {
               >
                 {node.feed_attributes.map((n) => n.attribute).join(', ')}
               </div>
-              {isFilterGroupNotEmpty(filters) && <FilterIconButton
+               <FilterIconButton
                 filters={filters}
                 classNameNumber={3}
                 styleNumber={3}
                 dataColumns={dataColumns}
-              />}
+              />
             </div>
           }
         />

diff --git a/opencti-platform/opencti-front/src/private/components/data/feeds/PublicFeedLines.tsx b/opencti-platform/opencti-front/src/private/components/data/feeds/PublicFeedLines.tsx
@@ -19,7 +19,7 @@ import { useFormatter } from '../../../../components/i18n';
 import { Theme } from '../../../../components/Theme';
 import FilterIconButton from '../../../../components/FilterIconButton';
 import { copyToClipboard } from '../../../../utils/utils';
-import { deserializeFilterGroupForFrontend, isFilterGroupNotEmpty } from '../../../../utils/filters/filtersUtils';
+import { deserializeFilterGroupForFrontend } from '../../../../utils/filters/filtersUtils';
 
 const useStyles = makeStyles<Theme>(() => ({
   bodyItem: {
@@ -100,7 +100,7 @@ const dataColumns: DataColumns = {
       const nodeFilters = deserializeFilterGroupForFrontend(node.filters);
       return (
         <>
-          {nodeFilters && isFilterGroupNotEmpty(nodeFilters) && <FilterIconButton
+          {nodeFilters && <FilterIconButton
             filters={nodeFilters}
             dataColumns={this}
             classNameNumber={3}