[frontend] wip: refacto content tab

OpenCTI-Platform · Jun 11, 2024 · fda376d · fda376d
1 parent 9f60524
commit fda376d
Show file tree

Hide file tree

Showing 2 changed files with 55 additions and 43 deletions.
diff --git a/...m/opencti-front/src/private/components/common/stix_core_objects/StixCoreObjectContent.jsx b/...m/opencti-front/src/private/components/common/stix_core_objects/StixCoreObjectContent.jsx
@@ -229,6 +229,7 @@ class StixCoreObjectContentComponent extends Component {
       markdownSelectedTab: 'write',
       initialContent: isContentCompatible ? stixCoreObject.contentField : props.t('Write something awesome...'),
       currentContent: isContentCompatible ? stixCoreObject.contentField : props.t('Write something awesome...'),
+      currentDescription: isContentCompatible ? stixCoreObject.description : props.t('Write something awesome...'),
       navOpen: localStorage.getItem('navOpen') === 'true',
       changed: false,
       isLoading,
@@ -323,7 +324,13 @@ class StixCoreObjectContentComponent extends Component {
 
   handleSelectContent() {
     const { stixCoreObject, t } = this.props;
-    this.setState({ currentFileId: null, changed: false, contentSelected: true, currentContent: stixCoreObject.contentField ?? t('Write something awesome...') }, () => {
+    this.setState({
+      currentFileId: null,
+      changed: false,
+      contentSelected: true,
+      currentContent: stixCoreObject.contentField ?? t('Write something awesome...'),
+      currentDescription: stixCoreObject.description ?? t('Write something awesome...'),
+    }, () => {
       this.saveView();
     });
   }
@@ -403,7 +410,7 @@ class StixCoreObjectContentComponent extends Component {
 
   saveContent() {
     const { id } = this.props.stixCoreObject;
-    const inputValues = [{ key: 'content', value: this.state.currentContent }];
+    const inputValues = [{ key: 'content', value: this.state.currentContent }, { key: 'description', value: this.state.currentDescription }];
     // Currently, only containers have a content available, so this mutation targets SDOs only. If content is added to all Stix Core Objects,
     // this mutation will need to be updated to a stixCoreObjectEdit instead of a stixDomainObjectEdit
     commitMutation({
@@ -428,6 +435,10 @@ class StixCoreObjectContentComponent extends Component {
     this.setState({ currentContent: value, changed: true });
   }
 
+  onMarkDownFieldChangeDescription(value) {
+    this.setState({ currentDescription: value, changed: true });
+  }
+
   onMarkdownChangeTab(tab) {
     this.setState({ markdownSelectedTab: tab });
   }
@@ -537,6 +548,7 @@ class StixCoreObjectContentComponent extends Component {
       totalPdfPageNumber,
       isLoading,
       currentContent,
+      currentDescription,
       markdownSelectedTab,
       navOpen,
       changed,
@@ -572,43 +584,6 @@ class StixCoreObjectContentComponent extends Component {
           <Loader variant={LoaderVariant.inElement} />
         ) : (
           <>
-            {currentFileType === 'text/plain' && (
-              <>
-                <StixCoreObjectContentBar
-                  directDownload={currentGetUrl}
-                  handleDownloadPdf={this.handleDownloadPdf.bind(this)}
-                  navOpen={navOpen}
-                  handleSave={this.saveFile.bind(this)}
-                  changed={changed}
-                />
-                <div
-                  className={classes.editorContainer}
-                  style={{ minHeight: height }}
-                >
-                  <TextField
-                    rows={Math.round(height / 23)}
-                    key={currentFile.id}
-                    id={currentFile.id}
-                    value={currentContent ?? ''}
-                    multiline={true}
-                    onChange={this.onTextFieldChange.bind(this)}
-                    fullWidth={true}
-                    InputProps={{
-                      endAdornment: (
-                        <TextFieldAskAI
-                          currentValue={currentContent ?? ''}
-                          setFieldValue={(val) => {
-                            this.onTextFieldChange({ target: { value: val } });
-                          }}
-                          format="text"
-                          variant="text"
-                        />
-                      ),
-                    }}
-                  />
-                </div>
-              </>
-            )}
             {contentSelected && (
               <>
                 <StixCoreObjectContentBar
@@ -632,9 +607,9 @@ class StixCoreObjectContentComponent extends Component {
                     {t('Description')}
                   </Typography>
                   <ReactMde
-                    value={stixCoreObject.description ?? ''}
+                    value={currentDescription}
                     maxEditorHeight={height - 80}
-                    onChange={this.onMarkDownFieldChange.bind(this)}
+                    onChange={this.onMarkDownFieldChangeDescription.bind(this)}
                     selectedTab={markdownSelectedTab}
                     onTabChange={this.onMarkdownChangeTab.bind(this)}
                     generateMarkdownPreview={(markdown) => Promise.resolve(
@@ -664,7 +639,7 @@ class StixCoreObjectContentComponent extends Component {
                       language: 'en',
                       toolbar: { shouldNotGroupWhenFull: true },
                     }}
-                    data={contentSelected}
+                    data={currentContent}
                     onChange={() => {
                       this.setState({ changed: true });
                     }}
@@ -675,6 +650,43 @@ class StixCoreObjectContentComponent extends Component {
                 </div>
               </>
             )}
+            {currentFileType === 'text/plain' && (
+              <>
+                <StixCoreObjectContentBar
+                  directDownload={currentGetUrl}
+                  handleDownloadPdf={this.handleDownloadPdf.bind(this)}
+                  navOpen={navOpen}
+                  handleSave={this.saveFile.bind(this)}
+                  changed={changed}
+                />
+                <div
+                  className={classes.editorContainer}
+                  style={{ minHeight: height }}
+                >
+                  <TextField
+                    rows={Math.round(height / 23)}
+                    key={currentFile.id}
+                    id={currentFile.id}
+                    value={currentContent ?? ''}
+                    multiline={true}
+                    onChange={this.onTextFieldChange.bind(this)}
+                    fullWidth={true}
+                    InputProps={{
+                      endAdornment: (
+                        <TextFieldAskAI
+                          currentValue={currentContent ?? ''}
+                          setFieldValue={(val) => {
+                            this.onTextFieldChange({ target: { value: val } });
+                          }}
+                          format="text"
+                          variant="text"
+                        />
+                      ),
+                    }}
+                  />
+                </div>
+              </>
+            )}
             {(currentFileType === 'text/html') && (
               <>
                 <StixCoreObjectContentBar

diff --git a/opencti-platform/opencti-front/tests_e2e/model/StixDomainObjectContentTab.pageModel.ts b/opencti-platform/opencti-front/tests_e2e/model/StixDomainObjectContentTab.pageModel.ts
@@ -8,7 +8,7 @@ export default class StixDomainObjectContentTabPage {
   }
 
   async selectMainContent() {
-    await this.page.getByRole('button', { name: 'Main content Embedded content' }).click();
+    await this.page.getByRole('button', { name: 'Mappable content Main content & Description' }).click();
     return this.page.getByLabel('Editor editing area: main');
   }