feat(Landing page): Example workspace guidance (#34)

* chore(LandingPage): Animated gif

* feat(LandingPage): Example workspace guidance

* fix(build): declare *.gif

.projenrc.ts

@@ -158,7 +158,7 @@ uiProject.addTask('storybook:build', {
 });
 
 uiProject.preCompileTask.reset('rm -rf {lib,dist}')
-uiProject.postCompileTask.reset('rsync -arv --prune-empty-dirs --include=*/ --include=*.css --include=*.png --exclude=* ./src/* ./lib');
+uiProject.postCompileTask.reset('rsync -arv --prune-empty-dirs --include=*/ --include=*.css --include=*.png --include=*.gif --exclude=* ./src/* ./lib');
 uiProject.postCompileTask.exec('yarn run storybook:build');
 
 uiProject.eslint?.addPlugins('header');

packages/threat-composer/src/components/workspaces/LandingPage/index.tsx

@@ -24,6 +24,7 @@ import SpaceBetween from '@cloudscape-design/components/space-between';
 import TextContent from '@cloudscape-design/components/text-content';
 import { FC } from 'react';
 import HowItWorks from '../../../assets/how-it-works.png';
+import SwitchToExample from '../../../assets/switch-to-example-workspace.gif';
 import { useGlobalSetupContext } from '../../../contexts';
 
 const LandingPage: FC = () => {
@@ -38,12 +39,12 @@ const LandingPage: FC = () => {
             <SpaceBetween direction="horizontal" size="s">
               <Button onClick={onShowImport}>Import existing</Button>
               <Button variant="primary" onClick={onDefineWorkload}>
-                Define workload or feature
+                  Define workload or feature
               </Button>
             </SpaceBetween>
           }
         >
-          Threat Composer
+            Threat Composer
         </Header>
       }
     >
@@ -61,50 +62,83 @@ const LandingPage: FC = () => {
             />
           </Box>
         </Container>
+        <Container
+          header={<Header variant="h2">View an example threat model</Header>}
+        >
+          <ColumnLayout columns={2}>
+            <TextContent>
+              <p>
+                  We've included a base threat model of the Threat Composer tool
+                  itself as an example. The aim is to provide a common reference
+                  point for people who are starting off with Threat Composer. You
+                  may want to use this as the base threat model as a starting
+                  point to generate a contextualised threat model for your own
+                  specific needs and deployment of Threat Composer.
+              </p>
+              <ul>
+                <li>
+                    To access the example threat model switching to the
+                    system-defined <b>Example</b> Workspace.
+                </li>
+                <li>
+                    If you wish to use is a base, it's recommended you export it, create a new
+                    Workspace and import it.
+                </li>
+              </ul>
+            </TextContent>
+            <img
+              style={{
+                display: 'block',
+              }}
+              src={SwitchToExample}
+            />
+          </ColumnLayout>
+        </Container>
         <Container header={<Header variant="h2">Benefits and features</Header>}>
           <ColumnLayout columns={2} variant="text-grid">
             <TextContent>
               <h3>Reduce time-to-value when performing threat modeling</h3>
               <p>
-                Helps you focus on brainstorming and collaboration. Guides you
-                through the threat model process. Inspires you with examples.
+                  Helps you focus on brainstorming and collaboration. Guides you
+                  through the threat model process. Inspires you with examples.
               </p>
             </TextContent>
             <TextContent>
               <h3>Threat models-as-code</h3>
               <p>
-                Produces threat models that can be exported and shared as
-                structured JSON, making it easy to version control your threat
-                models. Additionally supports Markdown and PDF (browser dependant)
+                  Produces threat models that can be exported and shared as
+                  structured JSON, making it easy to version control your threat
+                  models. Additionally supports Markdown and PDF (browser
+                  dependant)
               </p>
             </TextContent>
             <TextContent>
               <h3>Opinionated threat statement structure</h3>
               <p>
-                Helps you create useful threat statements that help you devise
-                mitigations and to prioritize.
+                  Helps you create useful threat statements that help you devise
+                  mitigations and to prioritize.
               </p>
             </TextContent>
             <TextContent>
               <h3>Client-side storage and workspace separation</h3>
               <p>
-                Data persisted only client-side with the browser, with workspace
-                separation to allow you to work across multiple threat models.
+                  Data persisted only client-side with the browser, with workspace
+                  separation to allow you to work across multiple threat models.
               </p>
             </TextContent>
             <TextContent>
               <h3>Self hosted</h3>
               <p>
-                AWS CDK project with optional continuous deployment and
-                continuous integration pipeline to self host in your AWS
-                account.
+                  AWS CDK project with optional continuous deployment and
+                  continuous integration pipeline to self host in your AWS
+                  account.
               </p>
             </TextContent>
             <TextContent>
               <h3>Open source</h3>
               <p>
-                Source code is available for your inspection, forking and
-                modifications to suit your specific organizational needs.
+                  Source code is available for your inspection, forking and
+                  modifications to suit your specific organizational needs.
               </p>
             </TextContent>
           </ColumnLayout>
@@ -113,32 +147,34 @@ const LandingPage: FC = () => {
           <ColumnLayout columns={2} variant="text-grid">
             <TextContent>
               <Link external href="https://github.com/awslabs/threat-composer">
-                Threat Composer - GitHub Repository
+                  Threat Composer - GitHub Repository
               </Link>
               <p>
-                Get access to the latest source code, raise bugs, and make feature requests.
+                  Get access to the latest source code, raise bugs, and make
+                  feature requests.
               </p>
             </TextContent>
             <TextContent>
               <Link
                 external
                 href="https://explore.skillbuilder.aws/learn/course/external/view/elearning/13274/threat-modeling-the-right-way-for-builders-workshop"
               >
-                Threat modeling for builders - AWS Skills Builder eLearning
+                  Threat modeling for builders - AWS Skills Builder eLearning
               </Link>
               <p>
-                Learn how to threat model using this eLearning training course.
+                  Learn how to threat model using this eLearning training course.
               </p>
             </TextContent>
             <TextContent>
               <Link
                 external
                 href="https://aws.amazon.com/blogs/security/how-to-approach-threat-modeling"
               >
-                How to approach threat modeling - AWS Security Blog
+                  How to approach threat modeling - AWS Security Blog
               </Link>
               <p>
-                Learn about approaches to integrate threat modeling into your organization.
+                  Learn about approaches to integrate threat modeling into your
+                  organization.
               </p>
             </TextContent>
           </ColumnLayout>

packages/threat-composer/src/types.ts

@@ -16,4 +16,9 @@
 declare module '*.png' {
   const value: string;
   export default value;
+}
+
+declare module '*.gif' {
+  const value: string;
+  export default value;
 }