Skip to content

Commit

Permalink
feat(browser-extension): Config UI improvements
Browse files Browse the repository at this point in the history
  • Loading branch information
Darran Boyd committed Nov 27, 2024
1 parent 909f32a commit acac698
Show file tree
Hide file tree
Showing 5 changed files with 114 additions and 141 deletions.
10 changes: 9 additions & 1 deletion packages/threat-composer-app-browser-extension/src/entrypoints/content-script.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -30,6 +30,7 @@ interface TCGitHubState {
}

interface TCCodeCatalystState {
previousUrl: string;
stopProcessing: boolean;
}

Expand Down Expand Up @@ -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(
Expand Down Expand Up @@ -407,6 +414,7 @@ export default defineContentScript({
};

const codeCatalystState: TCCodeCatalystState = {
previousUrl: '',
stopProcessing: false,
};

Expand Down Expand Up @@ -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)
) {
Expand Down
54 changes: 37 additions & 17 deletions packages/threat-composer-app-browser-extension/src/entrypoints/popup/ConfigDetailView.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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';
Expand All @@ -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>
);
};
182 changes: 60 additions & 122 deletions packages/threat-composer-app-browser-extension/src/entrypoints/popup/ConfigView.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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';
Expand All @@ -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) => ({
Expand All @@ -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) => ({
Expand All @@ -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) => ({
Expand All @@ -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) => ({
Expand All @@ -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) => ({
Expand All @@ -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) => ({
Expand All @@ -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) => ({
Expand All @@ -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>
);
};

Expand Down
Loading

0 comments on commit acac698

Please sign in to comment.