From acac6982368b64dadf06f60da48aad7208ed42af Mon Sep 17 00:00:00 2001
From: Darran Boyd <drboyd@example.com>
Date: Thu, 28 Nov 2024 09:34:50 +1100
Subject: [PATCH] feat(browser-extension): Config UI improvements

---
 .../src/entrypoints/content-script.ts         |  10 +-
 .../entrypoints/popup/ConfigDetailView.tsx    |  54 ++++--
 .../src/entrypoints/popup/ConfigView.tsx      | 182 ++++++------------
 .../src/entrypoints/popup/config.ts           |   7 +
 .../src/entrypoints/popup/index.html          |   2 +-
 5 files changed, 114 insertions(+), 141 deletions(-)

diff --git a/packages/threat-composer-app-browser-extension/src/entrypoints/content-script.ts b/packages/threat-composer-app-browser-extension/src/entrypoints/content-script.ts
index 59c32a9c..31513ccf 100644
--- a/packages/threat-composer-app-browser-extension/src/entrypoints/content-script.ts
+++ b/packages/threat-composer-app-browser-extension/src/entrypoints/content-script.ts
@@ -30,6 +30,7 @@ interface TCGitHubState {
 }
 
 interface TCCodeCatalystState {
+  previousUrl: string;
   stopProcessing: boolean;
 }
 
@@ -298,6 +299,12 @@ async function handleGitLabBrowser(gitLabState: TCGitLabState, tcConfig: TCConfi
 
 async function handleCodeCatalystCodeViewer(codeCatalystState: TCCodeCatalystState, config: TCConfig) {
 
+  if (window.location.href != codeCatalystState.previousUrl) {
+    //Handle CodeCatalyst being a SPA
+    codeCatalystState.previousUrl = window.location.href;
+    codeCatalystState.stopProcessing = false;
+  }
+
   if (ViewInThreatComposerButtonExists()) {return;}
 
   const element = document.getElementsByClassName(
@@ -407,6 +414,7 @@ export default defineContentScript({
     };
 
     const codeCatalystState: TCCodeCatalystState = {
+      previousUrl: '',
       stopProcessing: false,
     };
 
@@ -471,7 +479,7 @@ export default defineContentScript({
         let observerForCodeCatalystCodeViewer = new MutationObserver(
           () => handleCodeCatalystCodeViewer(codeCatalystState, tcConfig),
         );
-        observerForCodeCatalystCodeViewer.observe(document.body, config);
+        observerForCodeCatalystCodeViewer.observe(document, config);
       } else if (
         tcConfig.integrations[IntegrationTypes.CODEAMAZON].enabled && isAmazonCodeBrowser(tcConfig)
       ) {
diff --git a/packages/threat-composer-app-browser-extension/src/entrypoints/popup/ConfigDetailView.tsx b/packages/threat-composer-app-browser-extension/src/entrypoints/popup/ConfigDetailView.tsx
index ecfcfbb7..5a4cb311 100644
--- a/packages/threat-composer-app-browser-extension/src/entrypoints/popup/ConfigDetailView.tsx
+++ b/packages/threat-composer-app-browser-extension/src/entrypoints/popup/ConfigDetailView.tsx
@@ -13,10 +13,13 @@
   See the License for the specific language governing permissions and
   limitations under the License.
  ******************************************************************************************************************** */
-import { Button, SpaceBetween } from '@cloudscape-design/components';
+import { Button, Header, SpaceBetween } from '@cloudscape-design/components';
+import Box from '@cloudscape-design/components/box';
+import Container from '@cloudscape-design/components/container';
+import ContentLayout from '@cloudscape-design/components/content-layout';
 import Form from '@cloudscape-design/components/form';
 import { FC, useCallback, useContext, useMemo } from 'react';
-import { Navigate, useNavigate, useParams } from 'react-router-dom';
+import { useNavigate, useParams } from 'react-router-dom';
 import { IntegrationConfig } from './config';
 import { ExtensionConfigContext } from './ExtensionConfigProvider';
 import { RegexArrayForm } from './RegexArrayForm';
@@ -37,25 +40,42 @@ export const ConfigDetailView: FC<ConfigDetailViewProps> = () => {
         integrations: {
           ...prev.integrations,
           [integrationType!]:
-                        { ...prev.integrations[integrationType!], ...newIntegrationConfig },
+            { ...prev.integrations[integrationType!], ...newIntegrationConfig },
         },
       };
     });
   }, [integrationType, setConfig]);
   return (
-    <Form actions={(
-      <SpaceBetween size="s" direction="horizontal">
-        <Button onClick={() => {
-          navigate('/');
-        }}>Back</Button>
-      </SpaceBetween>
-    )}>
-      <RegexArrayForm placeholder="Regex to apply to URL" strings={integrationConfig.urlRegexes} setStrings={(newRegexes) => { setIntegrationConfig({ urlRegexes: newRegexes }); }}>
-
-      </RegexArrayForm>
-
-
-    </Form>
-
+    <ContentLayout
+      header={
+        <Box margin={'s'}>
+          <Header
+            variant="h1"
+            description="View Threat Composer exports with a single click"
+          >
+            Threat Composer extension
+          </Header>
+        </Box>
+      }>
+      <Box padding={'m'}>
+        <Container>
+          <SpaceBetween size="xs">
+            <Header variant='h2'>{integrationConfig.name} integration</Header>
+            <p>{integrationConfig.name} integration will be <i>attempted</i> for URLs that match
+              <strong>any</strong> of the specified regular expressions.</p>
+            <Form actions={(
+              <SpaceBetween size="xs" direction="horizontal">
+                <Button onClick={() => {
+                  navigate('/');
+                }}>Back</Button>
+              </SpaceBetween>
+            )}>
+              <RegexArrayForm placeholder="Regex to add" strings={integrationConfig.urlRegexes} setStrings={(newRegexes) => { setIntegrationConfig({ urlRegexes: newRegexes }); }}>
+              </RegexArrayForm>
+            </Form>
+          </SpaceBetween>
+        </Container>
+      </Box>
+    </ContentLayout>
   );
 };
\ No newline at end of file
diff --git a/packages/threat-composer-app-browser-extension/src/entrypoints/popup/ConfigView.tsx b/packages/threat-composer-app-browser-extension/src/entrypoints/popup/ConfigView.tsx
index 6ccaa4fe..30db7973 100644
--- a/packages/threat-composer-app-browser-extension/src/entrypoints/popup/ConfigView.tsx
+++ b/packages/threat-composer-app-browser-extension/src/entrypoints/popup/ConfigView.tsx
@@ -17,15 +17,14 @@ import Box from '@cloudscape-design/components/box';
 import Button from '@cloudscape-design/components/button';
 import ColumnLayout from '@cloudscape-design/components/column-layout';
 import Container from '@cloudscape-design/components/container';
+import ContentLayout from '@cloudscape-design/components/content-layout';
 import Header from '@cloudscape-design/components/header';
+import Link from '@cloudscape-design/components/link';
 import SpaceBetween from '@cloudscape-design/components/space-between';
 import Toggle from '@cloudscape-design/components/toggle';
 import { FC, useContext } from 'react';
 import { useNavigate } from 'react-router-dom';
 import {
-  TCConfig,
-  useExtensionConfig,
-  ThreatComposerTarget,
   DefaultConfig,
   IntegrationTypes,
 } from './config';
@@ -34,49 +33,30 @@ import { ExtensionConfigContext } from './ExtensionConfigProvider';
 interface ConfigProps {
 }
 
-// function createTargetOption(target: ThreatComposerTarget) {
-//   switch (target) {
-//     case ThreatComposerTarget.GITHUB_PAGES:
-//       return {
-//         value: ThreatComposerTarget.GITHUB_PAGES,
-//         label: "GitHub pages hosted version (threat-composer.github.io)",
-//       };
-//     case ThreatComposerTarget.CUSTOM_HOST:
-//       return {
-//         value: ThreatComposerTarget.CUSTOM_HOST,
-//         label: "Self hosted version",
-//       };
-//     case ThreatComposerTarget.BUILT_IN:
-//     default:
-//       return {
-//         value: ThreatComposerTarget.BUILT_IN,
-//         label: "Built-in, extension hosted version",
-//       };
-//   }
-// }
-
 const Config: FC<ConfigProps> = ({ }) => {
   const navigate = useNavigate();
   const { config, setConfig } = useContext(ExtensionConfigContext);
 
   return (
-    <Box>
-      <SpaceBetween size="xs">
-        <div>
-          <Header variant="h1">Threat Composer extension</Header>
-          <small>
-            View web accessible Threat Composer exports (.tc.json) with one
-            click
-          </small>
-        </div>
-        <Container>
-          <SpaceBetween size="xs">
-            <div>
+
+    <ContentLayout
+      header={
+        <Box margin={'s'}>
+          <Header
+            variant="h1"
+            description="View Threat Composer exports with a single click"
+          >
+          Threat Composer extension
+          </Header>
+        </Box>
+      }>
+      <Box padding={'m'}>
+        <SpaceBetween size="m">
+          <Container>
+            <SpaceBetween size="xxs">
               <Header variant="h3">'View Raw' file integration</Header>
-            </div>
-            <ColumnLayout columns={2}>
-              <div>
-                <SpaceBetween size="xs" direction="horizontal">
+              <ColumnLayout columns={2}>
+                <SpaceBetween size="xxs" direction="horizontal">
                   <Toggle
                     onChange={({ detail }) =>
                       setConfig((prev) => ({
@@ -96,17 +76,13 @@ const Config: FC<ConfigProps> = ({ }) => {
                   </Toggle>
                   <Button iconName="settings" variant="inline-icon" onClick={() => { navigate(`/integration/${IntegrationTypes.RAW}`); }} />
                 </SpaceBetween>
-              </div>
-            </ColumnLayout>
-          </SpaceBetween>
-        </Container>
-        <Container>
-          <SpaceBetween size="xs">
-            <div>
+              </ColumnLayout>
+            </SpaceBetween>
+          </Container>
+          <Container>
+            <SpaceBetween size="xxs">
               <Header variant="h3">Code browser integrations</Header>
-            </div>
-            <div>
-              <SpaceBetween size="xs" direction="horizontal">
+              <SpaceBetween size="xxs" direction="horizontal">
                 <Toggle
                   onChange={({ detail }) =>
                     setConfig((prev) => ({
@@ -125,7 +101,7 @@ const Config: FC<ConfigProps> = ({ }) => {
                 </Toggle>
                 <Button iconName="settings" variant="inline-icon" onClick={() => { navigate(`/integration/${IntegrationTypes.GITHUB}`); }} />
               </SpaceBetween>
-              <SpaceBetween size="xs" direction="horizontal">
+              <SpaceBetween size="xxs" direction="horizontal">
                 <Toggle
                   onChange={({ detail }) =>
                     setConfig((prev) => ({
@@ -145,7 +121,7 @@ const Config: FC<ConfigProps> = ({ }) => {
                 </Toggle>
                 <Button iconName="settings" variant="inline-icon" onClick={() => { navigate(`/integration/${IntegrationTypes.CODEAMAZON}`); }} />
               </SpaceBetween>
-              <SpaceBetween size="xs" direction="horizontal">
+              <SpaceBetween size="xxs" direction="horizontal">
                 <Toggle
                   onChange={({ detail }) =>
                     setConfig((prev) => ({
@@ -165,7 +141,7 @@ const Config: FC<ConfigProps> = ({ }) => {
                 </Toggle>
                 <Button iconName="settings" variant="inline-icon" onClick={() => { navigate(`/integration/${IntegrationTypes.CODECATALYST}`); }} />
               </SpaceBetween>
-              <SpaceBetween size="xs" direction="horizontal">
+              <SpaceBetween size="xxs" direction="horizontal">
                 <Toggle
                   onChange={({ detail }) =>
                     setConfig((prev) => ({
@@ -184,7 +160,7 @@ const Config: FC<ConfigProps> = ({ }) => {
                 </Toggle>
                 <Button iconName="settings" variant="inline-icon" onClick={() => { navigate(`/integration/${IntegrationTypes.BITBUCKET}`); }} />
               </SpaceBetween>
-              <SpaceBetween size="xs" direction="horizontal">
+              <SpaceBetween size="xxs" direction="horizontal">
                 <Toggle
                   onChange={({ detail }) =>
                     setConfig((prev) => ({
@@ -203,15 +179,12 @@ const Config: FC<ConfigProps> = ({ }) => {
                 </Toggle>
                 <Button iconName="settings" variant="inline-icon" onClick={() => { navigate(`/integration/${IntegrationTypes.GITLAB}`); }} />
               </SpaceBetween>
-            </div>
-          </SpaceBetween>
-        </Container>
-        <Container>
-          <SpaceBetween size="xs">
-            <div>
+
+            </SpaceBetween>
+          </Container>
+          <Container>
+            <SpaceBetween size="xxs">
               <Header variant="h3">Debug</Header>
-            </div>
-            <div>
               <Toggle
                 onChange={({ detail }) =>
                   setConfig((prev) => ({
@@ -223,67 +196,32 @@ const Config: FC<ConfigProps> = ({ }) => {
               >
                 Debug mode <small>(output to console)</small>
               </Toggle>
-            </div>
-          </SpaceBetween>
-        </Container>
-        {/* <Container>
-          <SpaceBetween size="xs">
-            <div>
-              <Header variant="h3">Open with</Header>
-            </div>
-            <div>
-              <Select
-                selectedOption={createTargetOption(config.target)}
-                options={[
-                  ThreatComposerTarget.BUILT_IN,
-                  ThreatComposerTarget.GITHUB_PAGES,
-                  ThreatComposerTarget.CUSTOM_HOST,
-                ].map(createTargetOption)}
-                onChange={({ detail }) =>
-                  setConfig((prev) => ({
-                    ...prev,
-                    target: detail.selectedOption.value as ThreatComposerTarget,
-                  }))
-                }
-              />
-              {config.target == ThreatComposerTarget.CUSTOM_HOST ? (
-                <FormField label="URL of self hosted version">
-                  <Input
-                    onChange={({ detail }) =>
-                      setConfig((prev) => ({
-                        ...prev,
-                        customUrl: detail.value,
-                      }))
-                    }
-                    value={config.customUrl ?? ""}
-                    placeholder="https://"
-                  />
-                </FormField>
-              ) : null}
-            </div>
-          </SpaceBetween>
-        </Container> */}
-        <Box textAlign="center">
-          <Button
-            onClick={() => {
-              setConfig(() => DefaultConfig);
-            }}
-          >
-            Restore defaults
-          </Button>
-          <p>
-            <small>
-              <a
-                href="https://github.com/awslabs/threat-composer"
-                target="_blank"
+            </SpaceBetween>
+          </Container>
+          <Box textAlign="center">
+            <SpaceBetween size='xs' direction='horizontal' alignItems='center' >
+              <Button
+                onClick={() => {
+                  setConfig(() => DefaultConfig);
+                }}
               >
-                GitHub Project
-              </a>
-            </small>
-          </p>
-        </Box>
-      </SpaceBetween>
-    </Box>
+            Restore defaults
+              </Button>
+              <Link external href="https://github.com/awslabs/threat-composer">GitHub Project</Link>
+            </SpaceBetween>
+            {/* <p>
+              <small>
+                <a
+                  href="https://github.com/awslabs/threat-composer"
+                  target="_blank"
+                >
+                </a>
+              </small>
+            </p> */}
+          </Box>
+        </SpaceBetween>
+      </Box>
+    </ContentLayout>
   );
 };
 
diff --git a/packages/threat-composer-app-browser-extension/src/entrypoints/popup/config.ts b/packages/threat-composer-app-browser-extension/src/entrypoints/popup/config.ts
index c19fab0c..654bc491 100644
--- a/packages/threat-composer-app-browser-extension/src/entrypoints/popup/config.ts
+++ b/packages/threat-composer-app-browser-extension/src/entrypoints/popup/config.ts
@@ -32,6 +32,7 @@ export interface TCConfig {
 }
 
 export interface IntegrationConfig {
+  name: string;
   enabled: boolean;
   urlRegexes: string[];
 }
@@ -51,26 +52,32 @@ export const DefaultConfig: TCConfig = {
   fileExtension: '.tc.json',
   integrations: {
     [IntegrationTypes.GITHUB]: {
+      name: 'GitHub',
       enabled: true,
       urlRegexes: ['github.com'],
     },
     [IntegrationTypes.GITLAB]: {
+      name: 'GitLab',
       enabled: true,
       urlRegexes: ['gitlab.com'],
     },
     [IntegrationTypes.BITBUCKET]: {
+      name: 'Bitbucket',
       enabled: true,
       urlRegexes: ['bitbucket.org'],
     },
     [IntegrationTypes.CODEAMAZON]: {
+      name: 'Amazon Code Browser',
       enabled: true,
       urlRegexes: ['code.amazon.com'],
     },
     [IntegrationTypes.CODECATALYST]: {
+      name: 'Amazon CodeCatalyst',
       enabled: true,
       urlRegexes: ['codecatalyst.aws'],
     },
     [IntegrationTypes.RAW]: {
+      name: 'Raw',
       enabled: true,
       urlRegexes: ['raw.githubusercontent.com', 'raw=1', 'raw'],
     },
diff --git a/packages/threat-composer-app-browser-extension/src/entrypoints/popup/index.html b/packages/threat-composer-app-browser-extension/src/entrypoints/popup/index.html
index 76462115..bbd39dbc 100644
--- a/packages/threat-composer-app-browser-extension/src/entrypoints/popup/index.html
+++ b/packages/threat-composer-app-browser-extension/src/entrypoints/popup/index.html
@@ -6,7 +6,7 @@
     <title>Threat Composer extension</title>
     <meta name="manifest.type" content="browser_action" />
   </head>
-  <body style="width: 400px; height: 600px">
+  <body style="width: 350px; height: 600px; margin:0px">
     <div id="root"></div>
     <script type="module" src="./main.tsx"></script>
   </body>