feat: Support download the model as DOCX file (#116)

* feat: Support download the model as Docx and YAML file * chore: Remove console log * chore: Style the output docx * chore: Remove commented code
awslabs · Jun 12, 2024 · 24b4b91 · 24b4b91
1 parent 8e3ed23
commit 24b4b91
Show file tree

Hide file tree

Showing 40 changed files with 2,401 additions and 89 deletions.
diff --git a/packages/threat-composer-app/.projen/deps.json b/packages/threat-composer-app/.projen/deps.json
diff --git a/packages/threat-composer-app/.projen/tasks.json b/packages/threat-composer-app/.projen/tasks.json
diff --git a/packages/threat-composer-app/package.json b/packages/threat-composer-app/package.json
diff --git a/packages/threat-composer-app/public/index.html b/packages/threat-composer-app/public/index.html
@@ -4,7 +4,7 @@
 <head>
   <meta charset="utf-8" />
   <meta http-equiv='Content-Security-Policy'
-    content="default-src 'self'; img-src 'self' * data:; font-src 'self' data:; script-src 'self' https://ide-toolkits.threat-composer.aws.dev; style-src 'self' 'unsafe-inline' https://ide-toolkits.threat-composer.aws.dev; media-src 'none' ; frame-src 'none';" />
+    content="default-src 'self'; img-src 'self' * data: blob:; connect-src 'self' data:; font-src 'self' data:; script-src 'self' https://ide-toolkits.threat-composer.aws.dev; style-src 'self' 'unsafe-inline' https://ide-toolkits.threat-composer.aws.dev; media-src 'none' ; frame-src 'none';" />
   <meta name="viewport" content="width=device-width, initial-scale=1" />
   <meta name="theme-color" content="#000000" />
   <meta name="description" content="threat-composer" />

diff --git a/packages/threat-composer-app/src/containers/ThreatModelReport/index.tsx b/packages/threat-composer-app/src/containers/ThreatModelReport/index.tsx
@@ -15,6 +15,7 @@
  ******************************************************************************************************************** */
 import { ThreatModel, ThreatModelView } from '@aws/threat-composer';
 import { FC, useCallback, useState } from 'react';
+import convertToDocx from '../../utils/convertToDocx';
 
 const ThreatModelReport: FC = () => {
   const [isPreview] = useState(() => {
@@ -48,6 +49,7 @@ const ThreatModelReport: FC = () => {
   return (data
     ? (<ThreatModelView composerMode='Full' data={data} onPrintButtonClick={isPreview ? undefined : handlePrintButtonClick} />)
     : (<ThreatModel
+      convertToDocx={convertToDocx}
       isPreview={isPreview}
       onPrintButtonClick={isPreview ? undefined : handlePrintButtonClick}
     />));

diff --git a/packages/threat-composer-app/src/utils/convertToDocx/components/Table.ts b/packages/threat-composer-app/src/utils/convertToDocx/components/Table.ts
@@ -0,0 +1,32 @@
+/** *******************************************************************************************************************
+  Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
+
+  Licensed under the Apache License, Version 2.0 (the "License").
+  You may not use this file except in compliance with the License.
+  You may obtain a copy of the License at
+
+      http://www.apache.org/licenses/LICENSE-2.0
+
+  Unless required by applicable law or agreed to in writing, software
+  distributed under the License is distributed on an "AS IS" BASIS,
+  WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+  See the License for the specific language governing permissions and
+  limitations under the License.
+ ******************************************************************************************************************** */
+import { Table as DocxTable, ITableOptions } from 'docx';
+
+class Table extends DocxTable {
+  constructor(opts: ITableOptions) {
+    super({
+      ...opts,
+      margins: {
+        top: 16,
+        bottom: 16,
+        left: 16,
+        right: 16,
+      },
+    });
+  }
+}
+
+export default Table;
diff --git a/packages/threat-composer-app/src/utils/convertToDocx/components/TableHeaderCell.ts b/packages/threat-composer-app/src/utils/convertToDocx/components/TableHeaderCell.ts
@@ -0,0 +1,31 @@
+/** *******************************************************************************************************************
+  Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
+
+  Licensed under the Apache License, Version 2.0 (the "License").
+  You may not use this file except in compliance with the License.
+  You may obtain a copy of the License at
+
+      http://www.apache.org/licenses/LICENSE-2.0
+
+  Unless required by applicable law or agreed to in writing, software
+  distributed under the License is distributed on an "AS IS" BASIS,
+  WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+  See the License for the specific language governing permissions and
+  limitations under the License.
+ ******************************************************************************************************************** */
+import { TableCell, Paragraph, IParagraphOptions } from 'docx';
+
+class TableHeaderCell extends TableCell {
+  constructor(paragraph: string | IParagraphOptions) {
+    super({
+      children: [new Paragraph(paragraph)],
+      verticalAlign: 'center',
+      shading: {
+        fill: '000000',
+        color: 'FFFFFF',
+      },
+    });
+  }
+}
+
+export default TableHeaderCell;
diff --git a/packages/threat-composer-app/src/utils/convertToDocx/config.ts b/packages/threat-composer-app/src/utils/convertToDocx/config.ts
@@ -0,0 +1,99 @@
+/** *******************************************************************************************************************
+  Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
+
+  Licensed under the Apache License, Version 2.0 (the "License").
+  You may not use this file except in compliance with the License.
+  You may obtain a copy of the License at
+
+      http://www.apache.org/licenses/LICENSE-2.0
+
+  Unless required by applicable law or agreed to in writing, software
+  distributed under the License is distributed on an "AS IS" BASIS,
+  WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+  See the License for the specific language governing permissions and
+  limitations under the License.
+ ******************************************************************************************************************** */
+import {
+  convertInchesToTwip,
+  ILevelsOptions,
+  LevelFormat,
+  AlignmentType,
+} from 'docx';
+
+export const ORDERED_LIST_REF = 'ordered';
+export const INDENT = 0.5;
+
+export const DEFAULT_NUMBERINGS: ILevelsOptions[] = [
+  {
+    level: 0,
+    format: LevelFormat.DECIMAL,
+    text: '%1.',
+    alignment: AlignmentType.START,
+  },
+  {
+    level: 1,
+    format: LevelFormat.DECIMAL,
+    text: '%2.',
+    alignment: AlignmentType.START,
+    style: {
+      paragraph: {
+        indent: { start: convertInchesToTwip(INDENT * 1) },
+      },
+    },
+  },
+  {
+    level: 2,
+    format: LevelFormat.DECIMAL,
+    text: '%3.',
+    alignment: AlignmentType.START,
+    style: {
+      paragraph: {
+        indent: { start: convertInchesToTwip(INDENT * 2) },
+      },
+    },
+  },
+  {
+    level: 3,
+    format: LevelFormat.DECIMAL,
+    text: '%4.',
+    alignment: AlignmentType.START,
+    style: {
+      paragraph: {
+        indent: { start: convertInchesToTwip(INDENT * 3) },
+      },
+    },
+  },
+  {
+    level: 4,
+    format: LevelFormat.DECIMAL,
+    text: '%5.',
+    alignment: AlignmentType.START,
+    style: {
+      paragraph: {
+        indent: { start: convertInchesToTwip(INDENT * 4) },
+      },
+    },
+  },
+  {
+    level: 5,
+    format: LevelFormat.DECIMAL,
+    text: '%6.',
+    alignment: AlignmentType.START,
+    style: {
+      paragraph: {
+        indent: { start: convertInchesToTwip(INDENT * 5) },
+      },
+    },
+  },
+];
+
+export const PT_BASE = 20;
+export const LINE_BASE = 276;
+export const SPACING = {
+  line: LINE_BASE,
+  after: PT_BASE * 6,
+};
+export const LIST_PARA_SPACING = {
+  line: Math.floor(LINE_BASE * 0.9),
+  after: PT_BASE * 3,
+};
diff --git a/packages/threat-composer-app/src/utils/convertToDocx/convertMarkdown/index.ts b/packages/threat-composer-app/src/utils/convertToDocx/convertMarkdown/index.ts
@@ -0,0 +1,46 @@
+/** *******************************************************************************************************************
+  Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
+
+  Licensed under the Apache License, Version 2.0 (the "License").
+  You may not use this file except in compliance with the License.
+  You may obtain a copy of the License at
+
+      http://www.apache.org/licenses/LICENSE-2.0
+
+  Unless required by applicable law or agreed to in writing, software
+  distributed under the License is distributed on an "AS IS" BASIS,
+  WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+  See the License for the specific language governing permissions and
+  limitations under the License.
+ ******************************************************************************************************************** */
+import { Paragraph, Table, TableOfContents } from 'docx';
+import frontmatter from 'remark-frontmatter';
+import gfm from 'remark-gfm';
+import markdown from 'remark-parse';
+import { unified } from 'unified';
+import docx from './plugin';
+import fetchImage from '../fetchImage';
+
+const processor = unified()
+  .use(markdown)
+  .use(gfm)
+  .use(frontmatter)
+  .use(docx,
+    {
+      output: 'sections',
+      imageResolver: fetchImage,
+    },
+  );
+
+/**
+ * Convert the markdown into Docx format
+ * @param content
+ */
+const convertMarkdown = async (content: string) => {
+  const doc = await processor.process(content);
+  const sections = await doc.result;
+
+  return sections as (Paragraph | Table | TableOfContents) [];
+};
+
+export default convertMarkdown;