fix: Fix an issue where Github pages 404 redirect is not working (#38)

awslabs · Aug 30, 2023 · aa19dea · aa19dea
1 parent 1b14a6c
commit aa19dea
Show file tree

Hide file tree

Showing 8 changed files with 100 additions and 50 deletions.
diff --git a/packages/threat-composer-app/public/404.html b/packages/threat-composer-app/public/404.html
@@ -14,7 +14,6 @@
         (l.search ? '&' + l.search.slice(1).replace(/&/g, '~and~') : '') +
         l.hash
       );
-
     </script>
   </head>
   <body>

diff --git a/packages/threat-composer-app/public/index.html b/packages/threat-composer-app/public/index.html
@@ -9,21 +9,6 @@
   <meta name="theme-color" content="#000000" />
   <meta name="description" content="threat-composer" />
 
-  <script type="text/javascript">
-    if ("%REACT_APP_GITHUB_PAGES%" == "true") {
-      (function (l) {
-        if (l.search[1] === '/') {
-          var decoded = l.search.slice(1).split('&').map(function (s) {
-            return s.replace(/~and~/g, '&')
-          }).join('?');
-          window.history.replaceState(null, null,
-            l.pathname.slice(0, -1) + decoded + l.hash
-          );
-        }
-      }(window.location));
-    }
-  </script>
-
   <!--
       manifest.json provides metadata used when your web app is installed on a
       user's mobile device or desktop. See https://developers.google.com/web/fundamentals/web-app-manifest/

diff --git a/packages/threat-composer-app/src/components/GithubPagesNavigationHelper/index.tsx b/packages/threat-composer-app/src/components/GithubPagesNavigationHelper/index.tsx
@@ -0,0 +1,47 @@
+/** *******************************************************************************************************************
+  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 { useEffect, FC, PropsWithChildren } from 'react';
+import { useNavigate } from 'react-router-dom';
+
+const requiredRewriteUrl = (search: string) => {
+  return search && (search.startsWith('?/') || search.startsWith('?%2F'));
+};
+
+const ROUTE_BASE_PATH = process.env.REACT_APP_ROUTE_BASE_PATH || '';
+
+const GithubPagesNavigationHelper: FC<PropsWithChildren<{}>> = ({
+  children,
+}) => {
+  const navigate = useNavigate();
+  useEffect(() => {
+    const l = window.location;
+    if (requiredRewriteUrl(l.search)) {
+      let search = decodeURIComponent(l.search);
+      if (search.indexOf('=') === search.length - 1) {
+        search = search.slice(0, search.length - 1);
+      }
+      var decoded = search.slice(1).split('&').map(function (s) {
+        return s.replace(/~and~/g, '&');
+      }).join('?');
+
+      navigate(ROUTE_BASE_PATH + '/' + decoded + l.hash);
+    }
+  }, [window.location.search]);
+
+  return requiredRewriteUrl(window.location.search) ? <></> : <>{children}</>;
+};
+
+export default GithubPagesNavigationHelper;
diff --git a/packages/threat-composer-app/src/components/Notifications/index.tsx b/packages/threat-composer-app/src/components/Notifications/index.tsx
@@ -22,42 +22,51 @@ export interface NotificationsProps {
   addPadding?: boolean;
 }
 
+const NOTIFICATIONS_VERSION = 1;
+
+const LOCAL_STORAGE_KEY = 'ThreatComposer.GithubNotificationsVersion';
+
 const Notifications: FC<NotificationsProps> = ({ addPadding }) => {
   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',
-      },
-    ]);
+    const key = window.sessionStorage.getItem(LOCAL_STORAGE_KEY);
+    if (key !== NOTIFICATIONS_VERSION.toString()) {
+      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',
+        },
+      ]);
+    }
+
+    window.sessionStorage.setItem(LOCAL_STORAGE_KEY, NOTIFICATIONS_VERSION.toString());
   }, []);
 
   return items && items.length > 0 ? (<div style={addPadding ? {

diff --git a/packages/threat-composer-app/src/containers/App/index.tsx b/packages/threat-composer-app/src/containers/App/index.tsx
@@ -17,8 +17,10 @@ import { FC } from 'react';
 import { useSearchParams } from 'react-router-dom';
 import Full from './components/Full';
 import Standalone from './components/Standalone';
+import GithubPagesNavigationHelper from '../../components/GithubPagesNavigationHelper';
 
 const DEFAULT_MODE = process.env.REACT_APP_DEFAULT_MODE;
+const isGithubPages = process.env.REACT_APP_GITHUB_PAGES === 'true';
 
 /**
  * Demo app for threat-composer
@@ -30,7 +32,9 @@ const App: FC = () => {
   return composerMode === 'ThreatsOnly' || composerMode === 'EditorOnly' ? (
     <Standalone composeMode={composerMode} />
   ) : (
-    <Full />
+    isGithubPages ?
+      (<GithubPagesNavigationHelper><Full /></GithubPagesNavigationHelper>) :
+      <Full />
   );
 };
 

diff --git a/packages/threat-composer-app/src/containers/ThreatModelReport/index.tsx b/packages/threat-composer-app/src/containers/ThreatModelReport/index.tsx
@@ -48,6 +48,7 @@ const ThreatModelReport: FC = () => {
   return (data
     ? (<ThreatModelView composerMode='Full' data={data} onPrintButtonClick={isPreview ? undefined : handlePrintButtonClick} />)
     : (<ThreatModel
+      isPreview={isPreview}
       onPrintButtonClick={isPreview ? undefined : handlePrintButtonClick}
     />));
 };

diff --git a/...es/threat-composer/src/components/report/ThreatModel/components/ThreatModelView/index.tsx b/...es/threat-composer/src/components/report/ThreatModel/components/ThreatModelView/index.tsx
@@ -55,6 +55,7 @@ const styles = {
 };
 
 export interface ThreatModelViewProps extends ViewNavigationEvent {
+  isPreview?: boolean;
   composerMode: string;
   data: DataExchangeFormat;
   downloadFileName?: string;
@@ -64,6 +65,7 @@ export interface ThreatModelViewProps extends ViewNavigationEvent {
 
 const ThreatModelView: FC<ThreatModelViewProps> = ({
   data,
+  isPreview = false,
   composerMode,
   downloadFileName,
   onPrintButtonClick,
@@ -161,7 +163,7 @@ const ThreatModelView: FC<ThreatModelViewProps> = ({
         (<MarkdownViewer allowHtml>{content}</MarkdownViewer>) :
         (<Box fontSize='body-m' margin='xxl' fontWeight="bold" css={styles.noData}>{loading ? <Spinner /> : 'No data available'}</Box>)
       }
-      {composerMode === 'Full' && hasContentDetails && Object.values(hasContentDetails).some(x => !x) && <div css={printStyles.hiddenPrint}>
+      {!isPreview && composerMode === 'Full' && hasContentDetails && Object.values(hasContentDetails).some(x => !x) && <div css={printStyles.hiddenPrint}>
         <Box css={styles.nextStepsContainer}>
           <SpaceBetween direction="horizontal" size="xs">
             <Box fontWeight="bold" css={styles.text}>Suggested next steps: </Box>

diff --git a/packages/threat-composer/src/components/report/ThreatModel/index.tsx b/packages/threat-composer/src/components/report/ThreatModel/index.tsx
@@ -22,10 +22,12 @@ import getExportFileName from '../../../utils/getExportFileName';
 
 export interface ThreatModelProps {
   onPrintButtonClick?: () => void;
+  isPreview?: boolean;
 }
 
 const ThreatModel: FC<ThreatModelProps> = ({
   onPrintButtonClick,
+  ...props
 }) => {
   const { getWorkspaceData } = useImportExport();
   const { composerMode } = useGlobalSetupContext();
@@ -45,6 +47,7 @@ const ThreatModel: FC<ThreatModelProps> = ({
     onMitigationListView,
   } = useWorkspacesContext();
   return <ThreatModelView
+    {...props}
     onPrintButtonClick={onPrintButtonClick}
     composerMode={composerMode}
     data={getWorkspaceData()}
-Original file line number
+Diff line change
@@ Expand Up / @@ -14,7 +14,6 @@ @@
             (l.search ? '&' + l.search.slice(1).replace(/&/g, '~and~') : '') +
             l.hash
           );
         </script>
       </head>
       <body>
@@ Expand Down @@