feat: Update content layout and allow users to config theme

awslabs · Jul 1, 2024 · 02d236d · 02d236d
1 parent 384ae90
commit 02d236d
Show file tree

Hide file tree

Showing 15 changed files with 396 additions and 177 deletions.
diff --git a/packages/threat-composer-app/src/components/FullAppLayout/index.tsx b/packages/threat-composer-app/src/components/FullAppLayout/index.tsx
@@ -16,7 +16,6 @@
 import AppLayoutComponent, {
   AppLayoutProps as AppLayoutComponentProps,
 } from '@cloudscape-design/components/app-layout';
-import Box from '@cloudscape-design/components/box';
 import BreadcrumbGroup, { BreadcrumbGroupProps } from '@cloudscape-design/components/breadcrumb-group';
 import { CancelableEventHandler } from '@cloudscape-design/components/internal/events';
 import SideNavigation, { SideNavigationProps } from '@cloudscape-design/components/side-navigation';
@@ -163,19 +162,15 @@ const AppLayout: FC<PropsWithChildren<AppLayoutProps>> = ({
           'navigation' in props ? (
             props.navigation
           ) : (
-            <div>
-              <SideNavigation
-                header={{ text: title, href: headerHref }}
-                activeHref={activeHref}
-                onFollow={onNavigate}
-                items={props.navigationItems}
-              />
-            </div>
+            <SideNavigation
+              header={{ text: title, href: headerHref }}
+              activeHref={activeHref}
+              onFollow={onNavigate}
+              items={props.navigationItems}
+            />
           )
         }
-        content={
-          !contentType || contentType === 'default' ? <Box padding={{ top: 'l' }}>{children}</Box> : children
-        }
+        content={children}
         {...props}
         contentType={contentType}
         notifications={notifications}

diff --git a/packages/threat-composer/src/components/application/ApplicationInfo/index.tsx b/packages/threat-composer/src/components/application/ApplicationInfo/index.tsx
@@ -21,6 +21,7 @@ import SpaceBetween from '@cloudscape-design/components/space-between';
 import { FC, useState, useCallback, useMemo, useEffect } from 'react';
 import { useApplicationInfoContext } from '../../../contexts/ApplicationContext/context';
 import { ApplicationInfoSchema, EditableComponentBaseProps } from '../../../customTypes';
+import ContentLayout from '../../generic/ContentLayout';
 import Input from '../../generic/Input';
 import MarkdownEditor from '../../generic/MarkdownEditor';
 import MarkdownViewer from '../../generic/MarkdownViewer';
@@ -30,7 +31,7 @@ const ApplicationInfo: FC<EditableComponentBaseProps> = ({
   MarkdownEditorComponentType = MarkdownEditor,
 }) => {
   const { applicationInfo, setApplicationInfo } = useApplicationInfoContext();
-  const [editMode, setEditMode] = useState(!applicationInfo.name && !applicationInfo.description );
+  const [editMode, setEditMode] = useState(!applicationInfo.name && !applicationInfo.description);
   const [content, setContent] = useState('');
   const [name, setName] = useState('');
 
@@ -60,33 +61,35 @@ const ApplicationInfo: FC<EditableComponentBaseProps> = ({
     </SpaceBetween>) : (<Button onClick={handleEdit}>Edit</Button>);
   }, [editMode, handleSaveApplicationInfo, handleEdit, setEditMode]);
 
-  return (<Container
-    header={<Header actions={actions}>{applicationInfo.name || 'Application Introduction'}</Header>}
-  >{editMode ? (<SpaceBetween direction='vertical' size='s'>
-      <FormField
-        label="Application name"
-      >
-        <Input
-          value={name}
-          onChange={event =>
-            setName(event.detail.value)
-          }
-          validateData={ApplicationInfoSchema.shape.name.safeParse}
-          placeholder='Enter application name'
+  return (<ContentLayout title='Application information'>
+    <Container
+      header={<Header actions={actions}>{applicationInfo.name || 'Application Introduction'}</Header>}
+    >{editMode ? (<SpaceBetween direction='vertical' size='s'>
+        <FormField
+          label="Application name"
+        >
+          <Input
+            value={name}
+            onChange={event =>
+              setName(event.detail.value)
+            }
+            validateData={ApplicationInfoSchema.shape.name.safeParse}
+            placeholder='Enter application name'
+          />
+        </FormField>
+        <MarkdownEditorComponentType
+          value={content}
+          onChange={setContent}
+          label='Description'
+          parentHeaderLevel='h2'
+          validateData={ApplicationInfoSchema.shape.description.safeParse}
         />
-      </FormField>
-      <MarkdownEditorComponentType
-        value={content}
-        onChange={setContent}
-        label='Description'
-        parentHeaderLevel='h2'
-        validateData={ApplicationInfoSchema.shape.description.safeParse}
-      />
-    </SpaceBetween>) :
-      (<MarkdownViewer>
-        {applicationInfo.description || ''}
-      </MarkdownViewer>)}
-  </Container>);
+      </SpaceBetween>) :
+        (<MarkdownViewer>
+          {applicationInfo.description || ''}
+        </MarkdownViewer>)}
+    </Container>
+  </ContentLayout>);
 };
 
 export default ApplicationInfo;
diff --git a/packages/threat-composer/src/components/architecture/ArchitectureInfo/index.tsx b/packages/threat-composer/src/components/architecture/ArchitectureInfo/index.tsx
@@ -20,14 +20,15 @@ import BaseDiagramInfo from '../../generic/BaseDiagramInfo';
 
 const ArchitectureInfo: FC<EditableComponentBaseProps> = (props) => {
   const { architectureInfo, setArchitectureInfo } = useArchitectureInfoContext();
-  return <BaseDiagramInfo
-    {...props}
-    headerTitle='Architecture'
-    diagramTitle='Architecture Diagram'
-    entity={architectureInfo}
-    onConfirm={(diagram) => setArchitectureInfo(diagram)}
-    validateData={ArchitectureInfoSchema.shape.description.safeParse}
-  />;
+  return (
+    <BaseDiagramInfo
+      {...props}
+      headerTitle='Architecture'
+      diagramTitle='Architecture Diagram'
+      entity={architectureInfo}
+      onConfirm={(diagram) => setArchitectureInfo(diagram)}
+      validateData={ArchitectureInfoSchema.shape.description.safeParse}
+    />);
 };
 
 export default ArchitectureInfo;
diff --git a/packages/threat-composer/src/components/assumptions/AssumptionList/index.tsx b/packages/threat-composer/src/components/assumptions/AssumptionList/index.tsx
@@ -16,14 +16,14 @@
 import Button from '@cloudscape-design/components/button';
 import Container from '@cloudscape-design/components/container';
 import Grid from '@cloudscape-design/components/grid';
-import Header from '@cloudscape-design/components/header';
 import SpaceBetween from '@cloudscape-design/components/space-between';
 import TextFilter from '@cloudscape-design/components/text-filter';
 import { FC, useCallback, useMemo, useState } from 'react';
 import { useAssumptionLinksContext } from '../../../contexts';
 import { useAssumptionsContext } from '../../../contexts/AssumptionsContext/context';
 import { Assumption, AssumptionLink } from '../../../customTypes';
 import { addTagToEntity, removeTagFromEntity } from '../../../utils/entityTag';
+import ContentLayout from '../../generic/ContentLayout';
 import LinkedEntityFilter, { ALL, WITHOUT_NO_LINKED_ENTITY, WITH_LINKED_ENTITY } from '../../generic/LinkedEntityFilter';
 import TagSelector from '../../generic/TagSelector';
 import AssumptionCard from '../AssumptionCard';
@@ -158,11 +158,9 @@ const AssumptionList: FC = () => {
 
   }, [saveAssumption, addAssumptionLinks]);
 
-  return (<div>
+  return (<ContentLayout title='Assumption list' counter={`(${filteredList.length})`}>
     <SpaceBetween direction='vertical' size='s'>
-      <Container header={
-        <Header counter={`(${filteredList.length})`}>Assumption List</Header>
-      }>
+      <Container>
         <SpaceBetween direction='vertical' size='s'>
           <TextFilter
             filteringText={filteringText}
@@ -225,7 +223,7 @@ const AssumptionList: FC = () => {
         onSave={handleSaveNew}
       />
     </SpaceBetween>
-  </div>);
+  </ContentLayout>);
 };
 
 export default AssumptionList;
diff --git a/packages/threat-composer/src/components/generic/BaseDiagramInfo/index.tsx b/packages/threat-composer/src/components/generic/BaseDiagramInfo/index.tsx
@@ -21,6 +21,7 @@ import SpaceBetween from '@cloudscape-design/components/space-between';
 import { FC, useCallback, useState, useMemo, useEffect } from 'react';
 import { BaseImageInfo, EditableComponentBaseProps } from '../../../customTypes';
 import imageStyles from '../../../styles/image';
+import ContentLayout from '../../generic/ContentLayout';
 import ImageEdit from '../ImageEdit';
 import MarkdownEditor, { MarkdownEditorProps } from '../MarkdownEditor';
 import MarkdownViewer from '../MarkdownViewer';
@@ -71,27 +72,32 @@ const BaseDiagramInfo: FC<BaseDiagramInfoProps> = ({
     </SpaceBetween>) : (<Button onClick={handleEdit}>Edit</Button>);
   }, [editMode, handleSaveDiagramInfo, handleEdit, setEditMode]);
 
-  return (<Container header={<Header actions={actions}>{headerTitle}</Header>}>
-    {editMode ? (<SpaceBetween direction='vertical' size='s'>
-      <MarkdownEditorComponentType
-        label='Introduction'
-        value={content}
-        onChange={setContent}
-        parentHeaderLevel='h3'
-        validateData={validateData}
-      />
-      <Header variant='h3'>{headerTitle} Diagram</Header>
-      <ImageEdit value={image} onChange={setImage} />
-    </SpaceBetween>) :
-      (<SpaceBetween direction='vertical' size='s'>
-        <Header variant='h3' key='diagramInfo'>Introduction</Header>
-        <MarkdownViewer>
-          {entity.description || ''}
-        </MarkdownViewer>
-        <Header variant='h3' key='diagram'>{diagramTitle}</Header>
-        {entity.image && <img css={imageStyles} src={entity.image} alt={diagramTitle} />}
-      </SpaceBetween>)}
-  </Container>
+  return (<ContentLayout
+    title={headerTitle}
+    actions={actions}
+  >
+    <Container>
+      {editMode ? (<SpaceBetween direction='vertical' size='s'>
+        <MarkdownEditorComponentType
+          label='Introduction'
+          value={content}
+          onChange={setContent}
+          parentHeaderLevel='h3'
+          validateData={validateData}
+        />
+        <Header variant='h3'>{headerTitle} Diagram</Header>
+        <ImageEdit value={image} onChange={setImage} />
+      </SpaceBetween>) :
+        (<SpaceBetween direction='vertical' size='s'>
+          <Header variant='h3' key='diagramInfo'>Introduction</Header>
+          <MarkdownViewer>
+            {entity.description || ''}
+          </MarkdownViewer>
+          <Header variant='h3' key='diagram'>{diagramTitle}</Header>
+          {entity.image && <img css={imageStyles} src={entity.image} alt={diagramTitle} />}
+        </SpaceBetween>)}
+    </Container>
+  </ContentLayout>
   );
 };
 

diff --git a/packages/threat-composer/src/components/generic/ContentLayout/index.tsx b/packages/threat-composer/src/components/generic/ContentLayout/index.tsx
@@ -0,0 +1,48 @@
+/** *******************************************************************************************************************
+  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 ContentLayoutComponent from '@cloudscape-design/components/content-layout';
+import Header, { HeaderProps } from '@cloudscape-design/components/header';
+import { FC, PropsWithChildren } from 'react';
+import { useApplicationInfoContext } from '../../../contexts/ApplicationContext';
+
+export interface ContentLayoutProps extends HeaderProps {
+  /**
+   * The title of the header.
+   */
+  title?: string;
+}
+
+const ContentLayout: FC<PropsWithChildren<ContentLayoutProps>> = ({
+  title,
+  children,
+  ...props
+}) => {
+  const { applicationInfo } = useApplicationInfoContext();
+
+  return (<ContentLayoutComponent
+    header={<Header
+      variant="h1"
+      {...props}
+    >
+      {applicationInfo.name ? `${title} for: ` + applicationInfo.name : 'Insights dashboard'}
+    </Header>}
+  >
+    {children}
+  </ContentLayoutComponent>);
+};
+
+export default ContentLayout;
diff --git a/packages/threat-composer/src/components/generic/ThemeToggle/index.tsx b/packages/threat-composer/src/components/generic/ThemeToggle/index.tsx
@@ -0,0 +1,53 @@
+/** *******************************************************************************************************************
+  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.
+ ******************************************************************************************************************** */
+/** @jsxImportSource @emotion/react */
+import Icon from '@cloudscape-design/components/icon';
+import SpaceBetween from '@cloudscape-design/components/space-between';
+import Toggle from '@cloudscape-design/components/toggle';
+import { Mode } from '@cloudscape-design/global-styles';
+import { css } from '@emotion/react';
+import { useThemeContext } from '../ThemeProvider';
+
+const styles = {
+  container: css({
+    height: '100%',
+    display: 'flex',
+    alignItems: 'center',
+  }),
+  svg: css({
+    color: 'grey !important',
+    fill: 'grey !important',
+  }),
+};
+
+const ThemeToggle = () => {
+  const { theme, setTheme } = useThemeContext();
+  return (<div css={styles.container}>
+    <SpaceBetween direction="horizontal" size="xs">
+      <Toggle
+        onChange={({ detail }) =>
+          setTheme(detail.checked ? Mode.Dark : Mode.Light)
+        }
+        checked={theme === Mode.Dark}
+      />
+      <Icon svg={<svg focusable="false" aria-hidden="true" viewBox="0 0 24 24" css={styles.svg}>
+        <path d="M12 3c-4.97 0-9 4.03-9 9s4.03 9 9 9 9-4.03 9-9c0-.46-.04-.92-.1-1.36-.98 1.37-2.58 2.26-4.4 2.26-2.98 0-5.4-2.42-5.4-5.4 0-1.81.89-3.42 2.26-4.4-.44-.06-.9-.1-1.36-.1"></path>
+      </svg>} />
+    </SpaceBetween>
+  </div>);
+};
+
+export default ThemeToggle;
diff --git a/packages/threat-composer/src/components/mitigations/MitigationList/index.tsx b/packages/threat-composer/src/components/mitigations/MitigationList/index.tsx
@@ -16,13 +16,13 @@
 import Button from '@cloudscape-design/components/button';
 import Container from '@cloudscape-design/components/container';
 import Grid from '@cloudscape-design/components/grid';
-import Header from '@cloudscape-design/components/header';
 import SpaceBetween from '@cloudscape-design/components/space-between';
 import TextFilter from '@cloudscape-design/components/text-filter';
 import { FC, useCallback, useMemo, useState } from 'react';
 import { useAssumptionLinksContext, useMitigationLinksContext } from '../../../contexts';
 import { useMitigationsContext } from '../../../contexts/MitigationsContext/context';
 import { AssumptionLink, Mitigation, MitigationLink } from '../../../customTypes';
+import ContentLayout from '../../generic/ContentLayout';
 import LinkedEntityFilter, { ALL, WITHOUT_NO_LINKED_ENTITY, WITH_LINKED_ENTITY } from '../../generic/LinkedEntityFilter';
 import TagSelector from '../../generic/TagSelector';
 import MitigationCard from '../MitigationCard';
@@ -175,13 +175,9 @@ const MitigationList: FC = () => {
 
   }, [saveMitigation, addMitigationLinks, addAssumptionLinks]);
 
-  return (<div>
+  return (<ContentLayout title='Mitigation list' counter={`(${filteredList.length})`}>
     <SpaceBetween direction='vertical' size='s'>
-      <Container header={
-        <Header
-          counter={`(${filteredList.length})`}
-        >Mitigation List</Header>
-      }>
+      <Container>
         <SpaceBetween direction='vertical' size='s'>
           <TextFilter
             filteringText={filteringText}
@@ -244,7 +240,7 @@ const MitigationList: FC = () => {
         onSave={handleSaveNew}
       />
     </SpaceBetween>
-  </div>);
+  </ContentLayout>);
 };
 
 export default MitigationList;