From 4bdae164d1b1d0e24d1b14a6893da7f068019f7f Mon Sep 17 00:00:00 2001
From: Laurent Bonnet <146674147+labo-flg@users.noreply.github.com>
Date: Tue, 14 Jan 2025 10:55:42 +0100
Subject: [PATCH] Fix dashboard header UI (under FAB replacement FF)

---
 .../workspaces/WorkspaceCreation.jsx          |  2 +-
 .../components/workspaces/WorkspaceHeader.jsx | 78 +---------------
 .../workspaces/dashboards/Dashboard.jsx       | 30 ++++--
 .../dashboards/DashboardTimeFilters.tsx       | 93 +++++++++++++++++++
 .../dashboards/WorkspaceWidgetConfig.jsx      |  4 +-
 .../public_dashboards/PublicDashboards.tsx    |  4 +
 6 files changed, 126 insertions(+), 85 deletions(-)
 create mode 100644 opencti-platform/opencti-front/src/private/components/workspaces/dashboards/DashboardTimeFilters.tsx

diff --git a/opencti-platform/opencti-front/src/private/components/workspaces/WorkspaceCreation.jsx b/opencti-platform/opencti-front/src/private/components/workspaces/WorkspaceCreation.jsx
index 328f0dc5cc69..66bcf12c02c9 100644
--- a/opencti-platform/opencti-front/src/private/components/workspaces/WorkspaceCreation.jsx
+++ b/opencti-platform/opencti-front/src/private/components/workspaces/WorkspaceCreation.jsx
@@ -123,7 +123,6 @@ const WorkspaceCreation = ({ paginationOptions, type }) => {
 
   const createDashboardButton = FAB_REPLACED ? (props) => (
     <>
-      <CreateEntityControlledDial entityType='Dashboard' {...props} />
       <Button
         color='primary'
         variant='outlined'
@@ -135,6 +134,7 @@ const WorkspaceCreation = ({ paginationOptions, type }) => {
       >
         {t_i18n('Import dashboard')}
       </Button>
+      <CreateEntityControlledDial entityType='Dashboard' {...props} />
     </>
   ) : ({ onOpen }) => (
     <SpeedDial
diff --git a/opencti-platform/opencti-front/src/private/components/workspaces/WorkspaceHeader.jsx b/opencti-platform/opencti-front/src/private/components/workspaces/WorkspaceHeader.jsx
index 7790752da815..af6d712bfdce 100644
--- a/opencti-platform/opencti-front/src/private/components/workspaces/WorkspaceHeader.jsx
+++ b/opencti-platform/opencti-front/src/private/components/workspaces/WorkspaceHeader.jsx
@@ -117,6 +117,7 @@ const WorkspaceHeader = ({
   const classes = useStyles();
   const { t_i18n } = useFormatter();
   const { isFeatureEnable } = useHelper();
+  const isFABReplaced = isFeatureEnable('FAB_REPLACEMENT');
   const openTagsCreate = false;
   const [openTag, setOpenTag] = useState(false);
   const [newTag, setNewTag] = useState('');
@@ -221,81 +222,10 @@ const WorkspaceHeader = ({
             <WorkspacePopover workspace={workspace} />
           </div>
         </Security>
-        {variant === 'dashboard' && (
+        {variant === 'dashboard' && !isFABReplaced && (
           <Security
             needs={[EXPLORE_EXUPDATE, INVESTIGATION_INUPDATE]}
             hasAccess={canEdit}
-            placeholder={
-              <div
-                style={{
-                  display: 'flex',
-                  margin: '-5px 0 0 5px',
-                  float: 'left',
-                }}
-              >
-                <FormControl
-                  variant="outlined"
-                  size="small"
-                  style={{ width: 194, marginRight: 20 }}
-                >
-                  <InputLabel id="relative" variant="outlined">
-                    {t_i18n('Relative time')}
-                  </InputLabel>
-                  <Select
-                    labelId="relative"
-                    value={relativeDate ?? ''}
-                    onChange={(value) => handleDateChange('relativeDate', value)}
-                    disabled={true}
-                    variant="outlined"
-                    aria-label="date"
-                  >
-                    <MenuItem value="none">{t_i18n('None')}</MenuItem>
-                    <MenuItem value="days-1">{t_i18n('Last 24 hours')}</MenuItem>
-                    <MenuItem value="days-7">{t_i18n('Last 7 days')}</MenuItem>
-                    <MenuItem value="months-1">{t_i18n('Last month')}</MenuItem>
-                    <MenuItem value="months-3">{t_i18n('Last 3 months')}</MenuItem>
-                    <MenuItem value="months-6">{t_i18n('Last 6 months')}</MenuItem>
-                    <MenuItem value="years-1">{t_i18n('Last year')}</MenuItem>
-                  </Select>
-                </FormControl>
-                <DatePicker
-                  value={R.propOr(null, 'startDate', config)}
-                  disableToolbar={true}
-                  autoOk={true}
-                  label={t_i18n('Start date')}
-                  clearable={true}
-                  disableFuture={true}
-                  disabled={true}
-                  aria-label="start picker"
-                  onChange={(value, context) => !context.validationError && handleDateChange('startDate', value)}
-                  slotProps={{
-                    textField: {
-                      style: { marginRight: 20 },
-                      variant: 'outlined',
-                      size: 'small',
-                    },
-                  }}
-                />
-                <DatePicker
-                  value={R.propOr(null, 'endDate', config)}
-                  disableToolbar={true}
-                  autoOk={true}
-                  label={t_i18n('End date')}
-                  clearable={true}
-                  disabled={true}
-                  disableFuture={true}
-                  aria-label="end picker"
-                  onChange={(value, context) => !context.validationError && handleDateChange('endDate', value)}
-                  slotProps={{
-                    textField: {
-                      style: { marginRight: 20 },
-                      variant: 'outlined',
-                      size: 'small',
-                    },
-                  }}
-                />
-              </div>
-            }
           >
             <div
               style={{ display: 'flex', margin: '-5px 0 0 5px', float: 'left' }}
@@ -360,12 +290,12 @@ const WorkspaceHeader = ({
             </div>
           </Security>
         )}
-        {variant === 'dashboard' && isFeatureEnable('FAB_REPLACEMENT') && (
+        {variant === 'dashboard' && isFABReplaced && (
           <Security
             needs={[EXPLORE_EXUPDATE]}
             hasAccess={canEdit}
           >
-            <div style={{ marginTop: '-8px', float: 'right' }}>
+            <div style={{ marginTop: '-6px', float: 'right' }}>
               <WorkspaceWidgetConfig onComplete={handleAddWidget} workspace={workspace}></WorkspaceWidgetConfig>
             </div>
           </Security>
diff --git a/opencti-platform/opencti-front/src/private/components/workspaces/dashboards/Dashboard.jsx b/opencti-platform/opencti-front/src/private/components/workspaces/dashboards/Dashboard.jsx
index 2493a7f02b98..e6bdb4263fe7 100644
--- a/opencti-platform/opencti-front/src/private/components/workspaces/dashboards/Dashboard.jsx
+++ b/opencti-platform/opencti-front/src/private/components/workspaces/dashboards/Dashboard.jsx
@@ -5,6 +5,7 @@ import RGL, { WidthProvider } from 'react-grid-layout';
 import Paper from '@mui/material/Paper';
 import makeStyles from '@mui/styles/makeStyles';
 import { v4 as uuid } from 'uuid';
+import DashboardTimeFilters from './DashboardTimeFilters';
 import StixCoreObjectsPolarArea from '../../common/stix_core_objects/StixCoreObjectsPolarArea';
 import StixRelationshipsPolarArea from '../../common/stix_relationships/StixRelationshipsPolarArea';
 import { computerRelativeDate, dayStartDate, parse } from '../../../../utils/Time';
@@ -89,6 +90,8 @@ const DashboardComponent = ({ workspace, noToolbar }) => {
   const ReactGridLayout = useMemo(() => WidthProvider(RGL), []);
   const classes = useStyles();
   const { isFeatureEnable } = useHelper();
+  const isFABReplaced = isFeatureEnable('FAB_REPLACEMENT');
+
   useEffect(() => {
     const timeout = setTimeout(() => {
       window.dispatchEvent(new Event('resize'));
@@ -799,13 +802,24 @@ const DashboardComponent = ({ workspace, noToolbar }) => {
       }}
     >
       {!noToolbar && (
-        <WorkspaceHeader
-          handleAddWidget={handleAddWidget}
-          workspace={workspace}
-          config={manifest.config}
-          handleDateChange={handleDateChange}
-          variant="dashboard"
-        />
+        <>
+          <WorkspaceHeader
+            handleAddWidget={handleAddWidget}
+            workspace={workspace}
+            variant="dashboard"
+            config={manifest.config}
+            handleDateChange={handleDateChange}
+          />
+          {isFABReplaced && (
+            <div style={{ marginTop: 8 }}>
+              <DashboardTimeFilters
+                workspace={workspace}
+                config={manifest.config}
+                handleDateChange={handleDateChange}
+              />
+            </div>
+          )}
+        </>
       )}
       {isExploreUpdater && userCanEdit ? (
         <ReactGridLayout
@@ -909,7 +923,7 @@ const DashboardComponent = ({ workspace, noToolbar }) => {
           })}
         </ReactGridLayout>
       )}
-      {!noToolbar && userCanEdit && !isFeatureEnable('FAB_REPLACEMENT') && <WorkspaceWidgetConfig onComplete={handleAddWidget} workspace={workspace} />}
+      {!noToolbar && userCanEdit && !isFABReplaced && <WorkspaceWidgetConfig onComplete={handleAddWidget} workspace={workspace} />}
     </div>
   );
 };
diff --git a/opencti-platform/opencti-front/src/private/components/workspaces/dashboards/DashboardTimeFilters.tsx b/opencti-platform/opencti-front/src/private/components/workspaces/dashboards/DashboardTimeFilters.tsx
new file mode 100644
index 000000000000..9bcfa57aebdc
--- /dev/null
+++ b/opencti-platform/opencti-front/src/private/components/workspaces/dashboards/DashboardTimeFilters.tsx
@@ -0,0 +1,93 @@
+import React from 'react';
+import FormControl from '@mui/material/FormControl';
+import InputLabel from '@mui/material/InputLabel';
+import Select from '@mui/material/Select';
+import MenuItem from '@mui/material/MenuItem';
+import { DatePicker } from '@mui/x-date-pickers/DatePicker';
+import { EXPLORE_EXUPDATE, INVESTIGATION_INUPDATE } from '../../../../utils/hooks/useGranted';
+import Security from '../../../../utils/Security';
+import { useFormatter } from '../../../../components/i18n';
+import { useGetCurrentUserAccessRight } from '../../../../utils/authorizedMembers';
+import { Dashboard_workspace$data } from './__generated__/Dashboard_workspace.graphql';
+
+interface DashboardTimeFiltersProps {
+  workspace: Dashboard_workspace$data
+  config?: {
+    startDate: object
+    endDate: object
+    relativeDate: string
+  }
+  handleDateChange: (bound: 'startDate' | 'endDate' | 'relativeDate', value: object | string | null) => unknown
+}
+
+const DashboardTimeFilters: React.FC<DashboardTimeFiltersProps> = ({
+  workspace,
+  config = {},
+  handleDateChange,
+}) => {
+  const { t_i18n } = useFormatter();
+  const { canEdit } = useGetCurrentUserAccessRight(workspace.currentUserAccessRight);
+
+  return (
+    <Security
+      needs={[EXPLORE_EXUPDATE, INVESTIGATION_INUPDATE]}
+      hasAccess={canEdit}
+    >
+      <div style={{ display: 'flex', marginLeft: 20 }} >
+        <FormControl
+          size="small"
+          style={{ width: 194, marginRight: 8 }}
+          variant="outlined"
+        >
+          <InputLabel id="relative" variant="outlined">
+            {t_i18n('Relative time')}
+          </InputLabel>
+          <Select
+            labelId="relative"
+            value={config.relativeDate ?? ''}
+            onChange={(value) => handleDateChange('relativeDate', value)}
+            label={t_i18n('Relative time')}
+            variant="outlined"
+          >
+            <MenuItem value="none">{t_i18n('None')}</MenuItem>
+            <MenuItem value="days-1">{t_i18n('Last 24 hours')}</MenuItem>
+            <MenuItem value="days-7">{t_i18n('Last 7 days')}</MenuItem>
+            <MenuItem value="months-1">{t_i18n('Last month')}</MenuItem>
+            <MenuItem value="months-3">{t_i18n('Last 3 months')}</MenuItem>
+            <MenuItem value="months-6">{t_i18n('Last 6 months')}</MenuItem>
+            <MenuItem value="years-1">{t_i18n('Last year')}</MenuItem>
+          </Select>
+        </FormControl>
+        <DatePicker
+          value={config.startDate ?? null}
+          label={t_i18n('Start date')}
+          disableFuture={true}
+          disabled={!!config.relativeDate}
+          onChange={(value, context) => !context.validationError && handleDateChange('startDate', value)}
+          slotProps={{
+            textField: {
+              style: { marginRight: 8 },
+              variant: 'outlined',
+              size: 'small',
+            },
+          }}
+        />
+        <DatePicker
+          value={config.endDate ?? null}
+          label={t_i18n('End date')}
+          disabled={!!config.relativeDate}
+          disableFuture={true}
+          onChange={(value, context) => !context.validationError && handleDateChange('endDate', value)}
+          slotProps={{
+            textField: {
+              variant: 'outlined',
+              size: 'small',
+            },
+          }}
+        />
+      </div>
+    </Security>
+  );
+};
+
+export default DashboardTimeFilters;
diff --git a/opencti-platform/opencti-front/src/private/components/workspaces/dashboards/WorkspaceWidgetConfig.jsx b/opencti-platform/opencti-front/src/private/components/workspaces/dashboards/WorkspaceWidgetConfig.jsx
index c2f2948a1c16..24ea12800da0 100644
--- a/opencti-platform/opencti-front/src/private/components/workspaces/dashboards/WorkspaceWidgetConfig.jsx
+++ b/opencti-platform/opencti-front/src/private/components/workspaces/dashboards/WorkspaceWidgetConfig.jsx
@@ -82,7 +82,7 @@ const WorkspaceWidgetConfig = ({ workspace, widget, onComplete, closeMenu }) =>
               <Button
                 variant='outlined'
                 disableElevation
-                style={{ marginTop: '2.5px', marginLeft: '4px' }}
+                sx={{ marginLeft: 1 }}
                 onClick={() => inputRef.current?.click()}
               >
                 {t_i18n('Import Widget')}
@@ -90,7 +90,7 @@ const WorkspaceWidgetConfig = ({ workspace, widget, onComplete, closeMenu }) =>
               <Button
                 variant='contained'
                 disableElevation
-                style={{ marginTop: '2.5px', marginLeft: '2px' }}
+                sx={{ marginLeft: 1 }}
                 onClick={() => setOpen(true)}
               >
                 {t_i18n('Create Widget')}
diff --git a/opencti-platform/opencti-front/src/private/components/workspaces/dashboards/public_dashboards/PublicDashboards.tsx b/opencti-platform/opencti-front/src/private/components/workspaces/dashboards/public_dashboards/PublicDashboards.tsx
index 02e332c5b6d0..8b6770910e95 100644
--- a/opencti-platform/opencti-front/src/private/components/workspaces/dashboards/public_dashboards/PublicDashboards.tsx
+++ b/opencti-platform/opencti-front/src/private/components/workspaces/dashboards/public_dashboards/PublicDashboards.tsx
@@ -16,6 +16,7 @@ import { EXPLORE_EXUPDATE_PUBLISH } from '../../../../../utils/hooks/useGranted'
 import useHelper from '../../../../../utils/hooks/useHelper';
 import { PublicDashboardsListQuery, PublicDashboardsListQuery$variables } from './__generated__/PublicDashboardsListQuery.graphql';
 import { PublicDashboardsFragment$data } from './__generated__/PublicDashboardsFragment.graphql';
+import useConnectedDocumentModifier from '../../../../../utils/hooks/useConnectedDocumentModifier';
 
 const publicDashboardFragment = graphql`
   fragment PublicDashboards_PublicDashboard on PublicDashboard {
@@ -103,6 +104,9 @@ const PublicDashboards = () => {
   const { t_i18n } = useFormatter();
   const { isFeatureEnable } = useHelper();
 
+  const { setTitle } = useConnectedDocumentModifier();
+  setTitle(t_i18n('Public dashboards'));
+
   const initialValues = {
     searchTerm: '',
     sortBy: 'name',