chore: Support different app modes (#68)

* chore: Support different app modes * build: Update build folder and stage name * build: Update github action script
awslabs · Jan 17, 2024 · ea41400 · ea41400
1 parent 0cb4e23
commit ea41400
Show file tree

Hide file tree

Showing 13 changed files with 257 additions and 48 deletions.
diff --git a/.github/workflows/deploy.yml b/.github/workflows/deploy.yml
@@ -24,7 +24,7 @@ jobs:
       - name: Upload artifact
         uses: actions/upload-pages-artifact@v1
         with:
-          path: packages/threat-composer-app/build
+          path: packages/threat-composer-app/build/website
   deploy:
     needs: build
     permissions:
@@ -60,4 +60,4 @@ jobs:
         id: release
         env:
           GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
-        run: npx semantic-release
+        run: npx semantic-release@22
diff --git a/.projenrc.ts b/.projenrc.ts
@@ -70,6 +70,7 @@ monorepo.postCompileTask.reset('yarn run generate:attribution && yarn run licens
 
 const uiESModules = [ 
   "unified",
+  "@aws-northstar/ui"
 ].join("|");
 
 const uiProject = new TypeScriptProject({
@@ -210,6 +211,21 @@ appProject.eslint?.addRules({
 });
 
 appProject.testTask.reset('react-scripts test --watchAll=false --passWithNoTests');
+const compileWebsiteTask = appProject.addTask('compile:website', {
+  exec: 'BUILD_PATH=./build/website/ react-scripts build'
+});
+const compileBrowserExtensionTask = appProject.addTask('compile:browser-extension', {
+  exec: 'INLINE_RUNTIME_CHUNK=false BUILD_PATH=./build/browser-extension/ REACT_APP_APP_MODE=browser-extension react-scripts build'
+});
+const compileIDEExtensionTask = appProject.addTask('compile:ide-extension', {
+  exec: 'INLINE_RUNTIME_CHUNK=false BUILD_PATH=./build/ide-extension/ REACT_APP_APP_MODE=ide-extension react-scripts build'
+});
+
+appProject.compileTask.reset('echo Building Artifacts for Websites, Browser Extensions and IDE Plugins');
+appProject.compileTask.spawn(compileWebsiteTask);
+appProject.compileTask.spawn(compileBrowserExtensionTask);
+appProject.compileTask.spawn(compileIDEExtensionTask);
+
 appProject.postCompileTask.reset(`[ -d ./build/storybook ] || mkdir -p ./build/storybook`);
 appProject.postCompileTask.exec(`cp -r ../threat-composer/storybook.out/ ./build/storybook/`);
 

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
@@ -4,6 +4,9 @@
     "build": "npx projen build",
     "clobber": "npx projen clobber",
     "compile": "npx projen compile",
+    "compile:browser-extension": "npx projen compile:browser-extension",
+    "compile:ide-extension": "npx projen compile:ide-extension",
+    "compile:website": "npx projen compile:website",
     "default": "npx projen default",
     "dev": "npx projen dev",
     "eject": "npx projen eject",

diff --git a/packages/threat-composer-app/project.json b/packages/threat-composer-app/project.json
@@ -99,6 +99,27 @@
         "command": "yarn projen dev",
         "cwd": "packages/threat-composer-app"
       }
+    },
+    "compile:website": {
+      "executor": "nx:run-commands",
+      "options": {
+        "command": "yarn projen compile:website",
+        "cwd": "packages/threat-composer-app"
+      }
+    },
+    "compile:browser-extension": {
+      "executor": "nx:run-commands",
+      "options": {
+        "command": "yarn projen compile:browser-extension",
+        "cwd": "packages/threat-composer-app"
+      }
+    },
+    "compile:ide-extension": {
+      "executor": "nx:run-commands",
+      "options": {
+        "command": "yarn projen compile:ide-extension",
+        "cwd": "packages/threat-composer-app"
+      }
     }
   },
   "implicitDependencies": [

diff --git a/packages/threat-composer-app/src/containers/App/components/Full/index.tsx b/packages/threat-composer-app/src/containers/App/components/Full/index.tsx
@@ -39,6 +39,7 @@ import ThreatModelReport from '../../../ThreatModelReport';
 const TEMP_PREVIEW_DATA_KEY = 'ThreatStatementGenerator.TempPreviewData';
 
 const defaultHref = process.env.PUBLIC_URL || '/';
+const appMode = process.env.REACT_APP_APP_MODE;
 
 const AppInner: FC<{
   setWorkspaceId: React.Dispatch<React.SetStateAction<string>>;
@@ -209,7 +210,14 @@ const Full: FC = () => {
         href={defaultHref}
         navigationItems={navigationItems}
         availableRoutes={routes.map(x => x.path || '')}
-        breadcrumbGroup={<WorkspaceSelector embededMode={false} />}
+        breadcrumbGroup={<WorkspaceSelector
+          singletonMode={appMode === 'browser-extension' || appMode === 'ide-extension'}
+          singletonPrimaryActionButtonConfig={appMode === 'ide-extension' ? {
+            text: 'Save',
+            eventName: 'save',
+          } : undefined}
+          embededMode={false}
+        />}
         notifications={notifications}
       >
         <AppInner setWorkspaceId={setWorkspaceId} />

diff --git a/packages/threat-composer-infra/src/application-stack.ts b/packages/threat-composer-infra/src/application-stack.ts
@@ -215,7 +215,8 @@ export class ApplicationStack extends Stack {
       websiteContentPath: path.join(
         PACKAGES_ROOT,
         "threat-composer-app",
-        "build"
+        "build",
+        "website"
       ),
       webAclProps: {
         cidrAllowList: {

diff --git a/packages/threat-composer/jest.config.json b/packages/threat-composer/jest.config.json
@@ -1,6 +1,6 @@
 {
   "transformIgnorePatterns": [
-    "[/\\\\]node_modules[/\\\\](?!unified).+\\.(js|jsx|mjs|cjs|ts|tsx)$"
+    "[/\\\\]node_modules[/\\\\](?!unified|@aws-northstar/ui).+\\.(js|jsx|mjs|cjs|ts|tsx)$"
   ],
   "testMatch": [
     "<rootDir>/src/**/__tests__/**/*.ts?(x)",

diff --git a/packages/threat-composer/src/components/generic/WindowExporter/index.tsx b/packages/threat-composer/src/components/generic/WindowExporter/index.tsx
@@ -21,6 +21,7 @@ import useExportImport, {
   PLACEHOLDER_EXCHANGE_DATA_FOR_WORKSPACE,
 } from '../../../hooks/useExportImport';
 import useRemoveData from '../../../hooks/useRemoveData';
+import EventController from '../../../utils/EventController';
 
 declare global {
   interface Window {
@@ -32,6 +33,8 @@ const stringifyWorkspaceData = (data: any) => {
   return JSON.stringify(data, null, 2);
 };
 
+const eventController = new EventController();
+
 window.threatcomposer = {
   getWorkspaceList: () => [PLACEHOLDER_EXCHANGE_DATA_FOR_WORKSPACE],
   getCurrentWorkspaceMetadata: () => PLACEHOLDER_EXCHANGE_DATA_FOR_WORKSPACE,
@@ -43,6 +46,8 @@ window.threatcomposer = {
     Promise.resolve(PLACEHOLDER_EXCHANGE_DATA_FOR_WORKSPACE),
   deleteWorkspace: () => Promise.resolve(),
   renameWorkspace: () => Promise.resolve(),
+  addEventListener: (eventName, eventHandler) => eventController.addEventListener(eventName, eventHandler),
+  dispatchEvent: (event) => eventController.dispatchEvent(event),
 };
 
 /**