[frontend] update style of draft chip & top bar

OpenCTI-Platform · Oct 22, 2024 · becbb7d · becbb7d
1 parent d834636
commit becbb7d
Show file tree

Hide file tree

Showing 7 changed files with 111 additions and 36 deletions.
diff --git a/opencti-platform/opencti-front/src/private/components/common/containers/ContainerHeader.jsx b/opencti-platform/opencti-front/src/private/components/common/containers/ContainerHeader.jsx
@@ -22,7 +22,7 @@ import Select from '@mui/material/Select';
 import MenuItem from '@mui/material/MenuItem';
 import CircularProgress from '@mui/material/CircularProgress';
 import { makeStyles, useTheme } from '@mui/styles';
-import Chip from '@mui/material/Chip';
+import { DraftChip } from '../draft/DraftChip';
 import { stixCoreObjectQuickSubscriptionContentQuery } from '../stix_core_objects/stixCoreObjectTriggersUtils';
 import StixCoreObjectAskAI from '../stix_core_objects/StixCoreObjectAskAI';
 import { useSettingsMessagesBannerHeight } from '../../settings/settings_messages/SettingsMessagesBanner';
@@ -800,16 +800,7 @@ const ContainerHeader = (props) => {
             </Typography>
           </Tooltip>
           {container.draftVersion && (
-            <Chip
-              style={{
-                color: theme.palette.warning.main,
-                borderColor: theme.palette.warning.main,
-                textTransform: 'uppercase',
-                borderRadius: theme.borderRadius,
-              }}
-              variant="outlined"
-              label={t_i18n('Draft')}
-            />
+            <DraftChip />
           )}
         </div>
         )}

diff --git a/opencti-platform/opencti-front/src/private/components/common/draft/DraftBlock.tsx b/opencti-platform/opencti-front/src/private/components/common/draft/DraftBlock.tsx
@@ -0,0 +1,59 @@
+import { useTheme } from '@mui/styles';
+import Typography from '@mui/material/Typography';
+import React, { FunctionComponent, ReactNode } from 'react';
+import { getDraftModeColor } from './DraftChip';
+import type { Theme } from '../../../../components/Theme';
+import { hexToRGB } from '../../../../utils/Colors';
+import { useFormatter } from '../../../../components/i18n';
+
+interface DraftBlockProps {
+  title?: string
+  body?: ReactNode
+  sx?: Record<string, React.CSSProperties>
+}
+
+const DraftBlock: FunctionComponent<DraftBlockProps> = ({ title, body, sx }) => {
+  const { t_i18n } = useFormatter();
+  const theme = useTheme<Theme>();
+  const draftColor = getDraftModeColor(theme);
+
+  return (
+    <div
+      style={{
+        border: `1px solid ${hexToRGB(draftColor, 0.5)}`,
+        color: draftColor,
+        display: 'flex',
+        flexDirection: 'column',
+        minHeight: theme.spacing(4),
+        padding: theme.spacing(1),
+        paddingTop: theme.spacing(0.5),
+        borderRadius: theme.spacing(0.5),
+        ...(sx?.root ?? {}),
+      }}
+    >
+      <Typography
+        variant="h4"
+        style={{
+          color: draftColor,
+          marginTop: theme.spacing(-1.1),
+          marginBottom: 0,
+          background: theme.palette.background.default,
+          paddingLeft: theme.spacing(1),
+          paddingRight: theme.spacing(1),
+          fontSize: 10,
+          height: 10,
+          textTransform: 'uppercase',
+          fontFamily: '"Geoligica", sans-serif',
+          fontWeight: 700,
+          width: 'fit-content',
+          ...(sx?.title ?? {}),
+        }}
+      >
+        {title ?? t_i18n('Draft Mode')}
+      </Typography>
+      {body}
+    </div>
+  );
+};
+
+export default DraftBlock;
diff --git a/opencti-platform/opencti-front/src/private/components/common/draft/DraftChip.tsx b/opencti-platform/opencti-front/src/private/components/common/draft/DraftChip.tsx
@@ -0,0 +1,40 @@
+import React from 'react';
+import { useTheme } from '@mui/styles';
+import Tooltip from '@mui/material/Tooltip';
+import { SimplePaletteColorOptions } from '@mui/material';
+import type { Theme } from '../../../../components/Theme';
+import { useFormatter } from '../../../../components/i18n';
+
+export const getDraftModeColor = (theme: Theme) => {
+  const draftModeColor = (theme.palette.warning as SimplePaletteColorOptions)?.main ?? theme.palette.primary.main;
+  return draftModeColor;
+};
+
+export const DraftChip = ({ style }: { style?: React.CSSProperties }) => {
+  const { t_i18n } = useFormatter();
+  const theme = useTheme<Theme>();
+  const draftColor = getDraftModeColor(theme);
+  return (
+    <div
+      style={{
+        fontSize: 'xx-small',
+        textTransform: 'uppercase',
+        fontWeight: 500,
+        height: 14,
+        display: 'inline-flex',
+        justifyContent: 'center',
+        alignItems: 'center',
+        marginTop: theme.spacing(0.25),
+        marginLeft: theme.spacing(0.5),
+        padding: `${theme.spacing(1)} ${theme.spacing(0.5)}`,
+        borderRadius: theme.borderRadius,
+        border: `1px solid ${draftColor}`,
+        color: draftColor,
+        backgroundColor: 'transparent',
+        ...style,
+      }}
+    >
+      {t_i18n('Draft')}
+    </div>
+  );
+};
diff --git a/opencti-platform/opencti-front/src/private/components/drafts/DraftContextBanner.tsx b/opencti-platform/opencti-front/src/private/components/drafts/DraftContextBanner.tsx
@@ -2,9 +2,8 @@ import React from 'react';
 import { graphql } from 'react-relay';
 import { useNavigate } from 'react-router-dom';
 import Button from '@mui/material/Button';
-import Chip from '@mui/material/Chip';
-import { SimplePaletteColorOptions } from '@mui/material';
 import { useTheme } from '@mui/styles';
+import DraftBlock from '@components/common/draft/DraftBlock';
 import { useFormatter } from '../../../components/i18n';
 import type { Theme } from '../../../components/Theme';
 import useApiMutation from '../../../utils/hooks/useApiMutation';
@@ -25,11 +24,6 @@ export const draftContextBannerMutation = graphql`
     }
 `;
 
-export const getDraftModeColor = (theme: Theme) => {
-  const draftModeColor = (theme.palette.warning as SimplePaletteColorOptions)?.main ?? theme.palette.primary.main;
-  return draftModeColor;
-};
-
 const DraftContextBanner = () => {
   const { t_i18n } = useFormatter();
   const [commit] = useApiMutation(draftContextBannerMutation);
@@ -38,8 +32,6 @@ const DraftContextBanner = () => {
   const navigate = useNavigate();
   const currentDraftContextName = me.draftContext ? me.draftContext.name : '';
 
-  const draftModeColor = getDraftModeColor(theme);
-
   const handleExitDraft = () => {
     commit({
       variables: {
@@ -55,22 +47,13 @@ const DraftContextBanner = () => {
     <div style={{ padding: '0 12px' }}>
       <div style={{ display: 'flex', width: '100%', alignItems: 'center' }}>
         <div style={{ padding: '0 12px' }}>
-          <Chip
-            style={{
-              color: draftModeColor,
-              borderColor: draftModeColor,
-              textTransform: 'uppercase',
-              borderRadius: theme.borderRadius,
-            }}
-            variant="outlined"
-            label={`${t_i18n('Draft Mode')} - ${truncate(currentDraftContextName, 20)}`}
-          />
+          <DraftBlock body={truncate(currentDraftContextName, 40)} />
         </div>
         <div>
           <Button
             variant="contained"
             color="primary"
-            style={{ width: '100%', height: 32 }}
+            style={{ width: '100%' }}
             onClick={handleExitDraft}
           >
             {t_i18n('Approve draft')}
@@ -79,7 +62,8 @@ const DraftContextBanner = () => {
         <div style={{ padding: '0 12px' }}>
           <Button
             color="primary"
-            style={{ width: '100%', height: 32 }}
+            variant="outlined"
+            style={{ width: '100%' }}
             onClick={handleExitDraft}
           >
             {t_i18n('Exit draft')}

diff --git a/opencti-platform/opencti-front/src/private/components/drafts/DraftCreation.tsx b/opencti-platform/opencti-front/src/private/components/drafts/DraftCreation.tsx
@@ -60,7 +60,7 @@ const DraftCreationForm: React.FC<DraftFormProps> = ({ updater, onCompleted, onR
       },
       onError: (error) => {
         handleErrorInForm(error, setErrors);
-        setErrors(error);
+        setSubmitting(false);
       },
       onCompleted: () => {
         setSubmitting(false);

diff --git a/opencti-platform/opencti-front/src/private/components/drafts/Drafts.tsx b/opencti-platform/opencti-front/src/private/components/drafts/Drafts.tsx
@@ -98,14 +98,14 @@ const Drafts: React.FC = () => {
     filters,
   } = viewStorage;
 
-  const contextFilters = useBuildEntityTypeBasedFilterContext('Draft', filters);
+  const contextFilters = useBuildEntityTypeBasedFilterContext('DraftWorkspace', filters);
   const queryPaginationOptions = {
     ...paginationOptions,
     filters: contextFilters,
   } as unknown as DraftsLinesPaginationQuery$variables;
   const queryRef = useQueryLoading<DraftsLinesPaginationQuery>(
     draftsLinesQuery,
-    paginationOptions,
+    queryPaginationOptions,
   );
 
   const preloadedPaginationProps = {

diff --git a/opencti-platform/opencti-front/src/private/components/nav/TopBar.tsx b/opencti-platform/opencti-front/src/private/components/nav/TopBar.tsx
@@ -16,7 +16,8 @@ import { usePage } from 'use-analytics';
 import Popover from '@mui/material/Popover';
 import Box from '@mui/material/Box';
 import { OPEN_BAR_WIDTH, SMALL_BAR_WIDTH } from '@components/nav/LeftBar';
-import DraftContextBanner, { getDraftModeColor } from '@components/drafts/DraftContextBanner';
+import DraftContextBanner from '@components/drafts/DraftContextBanner';
+import { getDraftModeColor } from '@components/common/draft/DraftChip';
 import { useFormatter } from '../../../components/i18n';
 import SearchInput from '../../../components/SearchInput';
 import { APP_BASE_PATH, fileUri, MESSAGING$ } from '../../../relay/environment';