feat: Full mode by default (#31)

---------

Co-authored-by: Jessie Wei <[email protected]>

Author: dboyd13

README.md

@@ -16,30 +16,50 @@
 import Flashbar, { FlashbarProps } from '@cloudscape-design/components/flashbar';
 import Link from '@cloudscape-design/components/link';
 import * as awsui from '@cloudscape-design/design-tokens';
-import { FC, useState } from 'react';
+import { FC, useEffect, useState } from 'react';
 
 export interface NotificationsProps {
   addPadding?: boolean;
 }
 
 const Notifications: FC<NotificationsProps> = ({ addPadding }) => {
-  const [items, setItems] = useState<FlashbarProps.MessageDefinition[]>([
-    {
-      type: 'info',
-      dismissible: true,
-      dismissLabel: 'Dismiss message',
-      onDismiss: () => setItems([]),
-      content: (
-        <>
-          This GitHub Page is provided for demonstration purposes only. Refer to {' '}
-          <Link color="inverted" href="https://github.com/awslabs/threat-composer" external={true}>
-            threat-composer GitHub Repo
-          </Link> for self-hosting deployment instructions.
-        </>
-      ),
-      id: 'message_1',
-    },
-  ]);
+  const [items, setItems] = useState<FlashbarProps.MessageDefinition[]>([]);
+
+  useEffect(() => {
+    setItems([
+      {
+        type: 'info',
+        dismissible: true,
+        dismissLabel: 'Dismiss message',
+        onDismiss: () => setItems(prevItems => prevItems.filter((x) => x.id !== 'message_1')),
+        content: (
+          <>
+            The 'Full' mode is now the default. To view the 'Threats Only' mode navigate the {' '}
+            <Link color="inverted" href="https://awslabs.github.io/threat-composer?mode=ThreatsOnly" external={false}>
+              ThreatsOnly
+            </Link> URL, and bookmark or future reference.
+          </>
+        ),
+        id: 'message_1',
+      },
+      {
+        type: 'info',
+        dismissible: true,
+        dismissLabel: 'Dismiss message',
+        onDismiss: () => setItems(prevItems => prevItems.filter((x) => x.id !== 'message_2')),
+        content: (
+          <>
+            This GitHub Page is provided for demonstration purposes only. Refer to {' '}
+            <Link color="inverted" href="https://github.com/awslabs/threat-composer" external={true}>
+              threat-composer GitHub Repo
+            </Link> for self-hosting deployment instructions.
+          </>
+        ),
+        id: 'message_2',
+      },
+    ]);
+  }, []);
+
   return items && items.length > 0 ? (<div style={addPadding ? {
     padding: awsui.spaceScaledL,
     backgroundColor: awsui.colorBackgroundHomeHeader,

docs/screenshot-threatsonly-mode.png

@@ -26,7 +26,12 @@ const DEFAULT_MODE = process.env.REACT_APP_DEFAULT_MODE;
 const App: FC = () => {
   const [searchParams] = useSearchParams();
   const mode = searchParams.get('mode');
-  return mode === 'Full' || DEFAULT_MODE === 'Full' ? <Full/> : <Standalone composeMode={mode} />;
+  const composerMode = mode || DEFAULT_MODE;
+  return composerMode === 'ThreatsOnly' || composerMode === 'EditorOnly' ? (
+    <Standalone composeMode={composerMode} />
+  ) : (
+    <Full />
+  );
 };
 
 export default App;

docs/threat-composer.gif

@@ -31,7 +31,7 @@ export interface ContextAggregatorProps extends ViewNavigationEvent {
 const ContextAggregator: FC<PropsWithChildren<ContextAggregatorProps>> = ({
   children,
   onWorkspaceChanged,
-  composerMode = 'ThreatsOnly',
+  composerMode = 'Full',
   onPreview,
   onPreviewClose,
   onImported,

packages/threat-composer-app/src/components/Notifications/index.tsx

@@ -30,7 +30,7 @@ export interface GlobalSetupContextApi {
 
 const initialState: GlobalSetupContextApi = {
   hasVisitBefore: false,
-  composerMode: 'ThreatsOnly',
+  composerMode: 'Full',
   showInfoModal: () => { },
   showImportUpdate: 0,
 };

packages/threat-composer-app/src/containers/App/index.tsx

@@ -33,7 +33,7 @@ export interface GlobalSetupContextProviderProps {
 
 const GlobalSetupContextProvider: FC<PropsWithChildren<GlobalSetupContextProviderProps>> = ({
   children,
-  composerMode = 'ThreatsOnly',
+  composerMode = 'Full',
   onPreview,
   onPreviewClose,
   onImported,