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

…t taken
OpenCTI-Platform · Dec 4, 2023 · cc53b83 · cc53b83
1 parent e664725
commit cc53b83
Show file tree

Hide file tree

Showing 29 changed files with 76 additions and 80 deletions.
diff --git a/opencti-platform/opencti-front/src/components/FilterIconButton.tsx b/opencti-platform/opencti-front/src/components/FilterIconButton.tsx
@@ -1,11 +1,11 @@
-import React, { FunctionComponent } from 'react';
+import React, { FunctionComponent, useRef } from 'react';
 import { ChipOwnProps } from '@mui/material/Chip/Chip';
 import { DataColumns } from './list_lines';
 import {
   Filter,
   FilterGroup,
   GqlFilterGroup,
-  initialFilterGroup,
+  initialFilterGroup, isFilterGroupNotEmpty,
   removeIdFromFilterObject,
 } from '../utils/filters/filtersUtils';
 import { filterIconButtonContentQuery } from './FilterIconButtonContent';
@@ -41,6 +41,11 @@ const FilterIconButton: FunctionComponent<FilterIconButtonProps> = ({
   chipColor,
   helpers,
 }) => {
+  const hasRenderedRef = useRef(false);
+  const setHasRenderedRef = () => {
+    hasRenderedRef.current = true;
+  };
+
   const displayedFilters = {
     ...filters,
     filters:
@@ -56,6 +61,9 @@ const FilterIconButton: FunctionComponent<FilterIconButtonProps> = ({
       ) as unknown as GqlFilterGroup,
     },
   );
+  if (!isFilterGroupNotEmpty(filters)) {
+    return <></>;
+  }
   return (
     <>
       {filtersRepresentativesQueryRef && (
@@ -71,6 +79,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]),
   );
@@ -131,22 +135,30 @@ FilterIconButtonContainerProps
     anchorEl: undefined,
   } as FilterChipsParameter);
   const open = Boolean(filterChipsParams.anchorEl);
+  useEffect(() => {
+    console.log('Rerender FilterIconButtonContainer');
+  }, []);
   if (helpers) {
     // activate popover feature on chip only when "helper" is defined, not the best way to handle but
     // 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(() => {
+      console.log({ hasRenderedRef });
+      console.log(latestItemRef.current);
+      console.log(nbDisplayFilter.current);
+      console.log(displayedFilters.length);
       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(true);
       }
       nbDisplayFilter.current = displayedFilters.length;
-      hasRenderedRef.current = true;
     }, [displayedFilters]);
   }
   const handleClose = () => {

diff --git a/opencti-platform/opencti-front/src/components/list_cards/ListCards.jsx b/opencti-platform/opencti-front/src/components/list_cards/ListCards.jsx
@@ -219,16 +219,14 @@ class ListCards extends Component {
           availableFilterKeys={availableFilterKeys}
           helpers={helpers}
         />
-        {isFilterGroupNotEmpty(filters) && (
-          <FilterIconButton
+        <FilterIconButton
             helpers={helpers}
             filters={filters}
             handleRemoveFilter={handleRemoveFilter}
             handleSwitchGlobalMode={handleSwitchGlobalMode}
             handleSwitchLocalMode={handleSwitchLocalMode}
             redirection
-          />
-        )}
+        />
         {typeof handleToggleExports === 'function' && (
           <Security needs={[KNOWLEDGE_KNGETEXPORT]}>
             <StixDomainObjectsExports
@@ -268,7 +266,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
@@ -457,7 +457,6 @@ class ListLines extends Component {
           availableFilterKeys={availableFilterKeys}
           helpers={helpers}
         />
-        {isFilterGroupNotEmpty(filters) && (
           <FilterIconButton
             helpers={helpers}
             availableFilterKeys={availableFilterKeys}
@@ -467,7 +466,6 @@ class ListLines extends Component {
             handleSwitchLocalMode={handleSwitchLocalMode}
             redirection
           />
-        )}
         {message && (
           <div style={{ width: '100%', marginTop: 10 }}>
             <Alert
@@ -711,7 +709,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
@@ -155,12 +155,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
@@ -240,15 +240,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
@@ -46,7 +46,7 @@ const DialogFilters = ({
       >
         <DialogTitle>{t('Advanced search')}</DialogTitle>
         <DialogContent style={{ paddingTop: 10 }}>
-          {isFilterGroupNotEmpty(filters) && (
+
             <FilterIconButton
               filters={filters}
               handleRemoveFilter={defaultHandleRemoveFilter}
@@ -56,7 +56,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
@@ -189,13 +189,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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -100,12 +100,12 @@ const dataColumns: DataColumns = {
       const nodeFilters = deserializeFilterGroupForFrontend(node.filters);
       return (
         <>
-          {nodeFilters && isFilterGroupNotEmpty(nodeFilters) && <FilterIconButton
+           <FilterIconButton
             filters={nodeFilters}
             dataColumns={this}
             classNameNumber={3}
             styleNumber={3}
-          />}
+          />
         </>
       );
     },

diff --git a/...ti-platform/opencti-front/src/private/components/data/playbooks/PlaybookAddComponents.jsx b/...ti-platform/opencti-front/src/private/components/data/playbooks/PlaybookAddComponents.jsx
@@ -479,16 +479,15 @@ const PlaybookAddComponentsContent = ({
                           />
                         </div>
                         <div className="clearfix" />
-                        {isFilterGroupNotEmpty(filters)
-                          && <FilterIconButton
+                        <FilterIconButton
                             filters={filters}
                             handleRemoveFilter={handleRemoveFilter}
                             handleSwitchGlobalMode={handleSwitchGlobalMode}
                             handleSwitchLocalMode={handleSwitchLocalMode}
                             classNameNumber={2}
                             styleNumber={2}
                             redirection
-                        />}
+                        />
                         <div className="clearfix" />
                       </div>
                     );

diff --git a/opencti-platform/opencti-front/src/private/components/data/stream/PublicStreamLines.tsx b/opencti-platform/opencti-front/src/private/components/data/stream/PublicStreamLines.tsx
@@ -105,12 +105,12 @@ const dataColumns: DataColumns = {
       const nodeFilters = deserializeFilterGroupForFrontend(node.filters);
       return (
         <>
-          {nodeFilters && isFilterGroupNotEmpty(nodeFilters) && <FilterIconButton
+            <FilterIconButton
             filters={nodeFilters}
             dataColumns={this}
             classNameNumber={3}
             styleNumber={3}
-          />}
+          />
         </>
       );
     },

diff --git a/...ti-platform/opencti-front/src/private/components/data/stream/StreamCollectionCreation.jsx b/...ti-platform/opencti-front/src/private/components/data/stream/StreamCollectionCreation.jsx
@@ -19,7 +19,7 @@ import {
   constructHandleAddFilter,
   constructHandleRemoveFilter,
   filtersAfterSwitchLocalMode,
-  initialFilterGroup, isFilterGroupNotEmpty,
+  initialFilterGroup,
   serializeFilterGroupForBackend,
 } from '../../../../utils/filters/filtersUtils';
 import FilterIconButton from '../../../../components/FilterIconButton';
@@ -257,16 +257,15 @@ const StreamCollectionCreation = (props) => {
                 />
               </div>
               <div className="clearfix" />
-              {isFilterGroupNotEmpty(filters)
-                && <FilterIconButton
+              <FilterIconButton
                   filters={filters}
                   handleRemoveFilter={handleRemoveFilter}
                   handleSwitchGlobalMode={handleSwitchGlobalMode}
                   handleSwitchLocalMode={handleSwitchLocalMode}
                   classNameNumber={2}
                   styleNumber={2}
                   redirection
-              />}
+              />
               <div className="clearfix" />
               <div className={classes.buttons}>
                 <Button

diff --git a/...cti-platform/opencti-front/src/private/components/data/stream/StreamCollectionEdition.jsx b/...cti-platform/opencti-front/src/private/components/data/stream/StreamCollectionEdition.jsx
@@ -229,16 +229,15 @@ const StreamCollectionEditionContainer = ({ streamCollection }) => {
             />
           </div>
           <div className="clearfix" />
-          {isFilterGroupNotEmpty(filters)
-            && <FilterIconButton
+          <FilterIconButton
               filters={filters}
               classNameNumber={2}
               styleNumber={2}
               handleRemoveFilter={handleRemoveFilter}
               handleSwitchLocalMode={handleSwitchLocalMode}
               handleSwitchGlobalMode={handleSwitchGlobalMode}
               redirection
-          />}
+          />
         </Form>
       )}
     </Formik>