modifying frontend to run on any path passed as env vars during build (…

…#2983) * modifying frontend to run on any path passed as env vars during build Signed-off-by: arkajyotiMukherjee <[email protected]> * Fixed image paths and routing (#2) * image paths changed from / to ./ Signed-off-by: arkajyotiMukherjee <[email protected]> * reloading fix by considering the subPath when routing on project check Signed-off-by: arkajyotiMukherjee <[email protected]> * fixed more src from / to ./ Signed-off-by: arkajyotiMukherjee <[email protected]>
litmuschaos · Jul 12, 2021 · 0c3bad3 · 0c3bad3
1 parent e328553
commit 0c3bad3
Show file tree

Hide file tree

Showing 72 changed files with 208 additions and 180 deletions.
diff --git a/.github/workflows/push.yml b/.github/workflows/push.yml
@@ -241,13 +241,27 @@ jobs:
           username: ${{ secrets.DOCKERHUB_USERNAME }}
           password: ${{ secrets.DOCKERHUB_TOKEN }}
 
-      - name: Push frontend docker image
+      - name: Push frontend docker image (/)
         env:
           FRONTEND_IMAGE: ${FRONTEND_IMAGE}
           IMG_TAG: ${IMG_TAG}
           PLATFORMS: ${{ secrets.PLATFORMS }}
           REPONAME: ${{ secrets.REPONAME }}
           timestamp: ${timestamp}
+          PUBLIC_URL: ""
+        run: |
+          source env-vars
+          timestamp=`date "+%s"`
+          make push-frontend
+
+      - name: Push frontend docker image (/litmuschaos)
+        env:
+          FRONTEND_IMAGE: ${FRONTEND_IMAGE}-path-litmuschaos
+          IMG_TAG: ${IMG_TAG}
+          PLATFORMS: ${{ secrets.PLATFORMS }}
+          REPONAME: ${{ secrets.REPONAME }}
+          timestamp: ${timestamp}
+          PUBLIC_URL: "/litmuschaos"
         run: |
           source env-vars
           timestamp=`date "+%s"`

diff --git a/.gitignore b/.gitignore
@@ -17,4 +17,6 @@ _vendor-*
 tmp/
 .env
 litmus-portal-service
-litmus-portal-app
+litmus-portal-app
+
+**/client_id
diff --git a/litmus-portal/Makefile b/litmus-portal/Makefile
@@ -113,10 +113,10 @@ buildx.push.image:
 buildx.push.frontend:
 	@cd frontend && \
 	if [ "${IMG_TAG}" = "ci" ]; then \
-        docker build . -f Dockerfile -t $(REPONAME)/$(FRONTEND_IMAGE):$(IMG_TAG) --build-arg REACT_APP_KB_CHAOS_VERSION=$(IMG_TAG) --build-arg REACT_APP_BUILD_TIME="$(timestamp)" --build-arg REACT_APP_HUB_BRANCH_NAME="v1.13.x" --build-arg TARGETARCH=amd64;\
+        docker build . -f Dockerfile -t $(REPONAME)/$(FRONTEND_IMAGE):$(IMG_TAG) --build-arg REACT_APP_KB_CHAOS_VERSION=$(IMG_TAG) --build-arg REACT_APP_BUILD_TIME="$(timestamp)" --build-arg REACT_APP_HUB_BRANCH_NAME="v1.13.x" --build-arg PUBLIC_URL="$(PUBLIC_URL)" --build-arg TARGETARCH=amd64;\
         docker push $(REPONAME)/$(FRONTEND_IMAGE):$(IMG_TAG);\
 	else \
-	    docker buildx build . -f Dockerfile --progress plane --push --no-cache --platform $(PLATFORMS) -t $(REPONAME)/$(FRONTEND_IMAGE):$(IMG_TAG) --build-arg REACT_APP_KB_CHAOS_VERSION=$(IMG_TAG) \
+	    docker buildx build . -f Dockerfile --progress plane --push --no-cache --platform $(PLATFORMS) -t $(REPONAME)/$(FRONTEND_IMAGE):$(IMG_TAG) --build-arg REACT_APP_KB_CHAOS_VERSION=$(IMG_TAG) --build-arg PUBLIC_URL="$(PUBLIC_URL)" \
 		--build-arg REACT_APP_BUILD_TIME="$(timestamp)" --build-arg REACT_APP_HUB_BRANCH_NAME="v1.13.x";\
     fi
 
@@ -135,6 +135,6 @@ push-frontend-amd64: docker-build-frontend-amd64 docker-push-frontend-amd64
 docker-build-frontend-amd64:
 	@cd frontend && \
     docker build . -f Dockerfile -t $(REPONAME)/$(IMAGE_NAME):$(IMG_TAG) --build-arg TARGETARCH=amd64 --build-arg REACT_APP_KB_CHAOS_VERSION=$(IMG_TAG) \
-		--build-arg REACT_APP_BUILD_TIME="$(timestamp)" --build-arg REACT_APP_HUB_BRANCH_NAME="v1.13.x
+		--build-arg REACT_APP_BUILD_TIME="$(timestamp)" --build-arg PUBLIC_URL="$(PUBLIC_URL)" --build-arg REACT_APP_HUB_BRANCH_NAME="v1.13.x
 docker-push-frontend-amd64:
 	@docker push $(REPONAME)/$(IMAGE_NAME):$(IMG_TAG)
diff --git a/litmus-portal/frontend/Dockerfile b/litmus-portal/frontend/Dockerfile
@@ -10,6 +10,7 @@ ARG TARGETARCH
 ARG REACT_APP_KB_CHAOS_VERSION
 ARG REACT_APP_BUILD_TIME
 ARG REACT_APP_HUB_BRANCH_NAME
+ARG PUBLIC_URL
 
 # Checking environment variables
 RUN env

diff --git a/litmus-portal/frontend/client_id b/litmus-portal/frontend/client_id
diff --git a/litmus-portal/frontend/package.json b/litmus-portal/frontend/package.json
@@ -1,7 +1,6 @@
 {
   "name": "litmus-portal",
   "version": "0.1.0",
-  "homepage": "https://litmus-portal.com",
   "scripts": {
     "start": "react-scripts start",
     "build": "cross-env NODE_PATH=src react-scripts build",

diff --git a/litmus-portal/frontend/public/browserconfig.xml b/litmus-portal/frontend/public/browserconfig.xml
@@ -2,7 +2,7 @@
 <browserconfig>
     <msapplication>
         <tile>
-            <square150x150logo src="/mstile-150x150.png"/>
+            <square150x150logo src="./mstile-150x150.png"/>
             <TileColor>#ffc40d</TileColor>
         </tile>
     </msapplication>

diff --git a/litmus-portal/frontend/public/index.css b/litmus-portal/frontend/public/index.css
@@ -1,6 +1,6 @@
 .root {
   background: #f5f6f8;
-  font-family: 'Ubuntu', sans-serif;
+  font-family: 'Inter', 'Ubuntu', sans-serif;
 }
 
 .loaderContainer {

diff --git a/litmus-portal/frontend/public/index.html b/litmus-portal/frontend/public/index.html
@@ -2,6 +2,7 @@
 <html>
   <head>
     <meta charset="utf-8" />
+    <base href="%PUBLIC_URL%/" />
     <meta
       name="viewport"
       content="user-scalable=0, initial-scale=1, minimum-scale=1, width=device-width, height=device-height"
@@ -14,7 +15,7 @@
     <meta name="apple-mobile-web-app-capable" content="yes" />
     <meta name="apple-mobile-web-app-status-bar-style" content="black" />
     <meta name="apple-mobile-web-app-title" content="React App" />
-    <link rel="apple-touch-icon" href="./favicon.ico" />
+    <link rel="apple-touch-icon" href="%PUBLIC_URL%/favicon.ico" />
     <!-- End of: Add to home screen for Safari on iOS -->
     <!-- Start of: Add to home screen on Windows -->
     <meta name="msapplication-TileImage" content="./favicon.ico" />
@@ -26,7 +27,7 @@
     <link
       rel="apple-touch-icon"
       sizes="152x152"
-      href="./apple-touch-icon.png"
+      href="%PUBLIC_URL%/apple-touch-icon.png"
     />
 
     <link rel="manifest" href="%PUBLIC_URL%/site.webmanifest" />
@@ -38,7 +39,6 @@
       href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;700&display=swap"
       rel="stylesheet"
     />
-    <link href="https://fonts.googleapis.com/css2?family=Ubuntu&display=swap" rel="stylesheet">
     <title>Litmus Portal</title>
   </head>
 

diff --git a/litmus-portal/frontend/public/manifest.json b/litmus-portal/frontend/public/manifest.json
@@ -3,17 +3,17 @@
   "short_name": "Litmus Portal",
   "icons": [
     {
-      "src": "/favicon-16x16.png",
+      "src": "./favicon-16x16.png",
       "sizes": "16x16",
       "type": "image/png"
     },
     {
-      "src": "/favicon-32x32.png",
+      "src": "./favicon-32x32.png",
       "sizes": "16x16",
       "type": "image/png"
     },
     {
-      "src": "/android-chrome-144x144.png",
+      "src": "./android-chrome-144x144.png",
       "sizes": "144x144",
       "type": "image/png"
     }

diff --git a/litmus-portal/frontend/src/ReduxRoot.tsx b/litmus-portal/frontend/src/ReduxRoot.tsx
@@ -10,8 +10,8 @@ import createApolloClient from './utils/createApolloClient';
 const { persistor, store } = configureStore();
 
 const client = createApolloClient(
-  `${config.grahqlEndpoint}/query`,
-  `${config.grahqlEndpointSubscription}/query`
+  config.grahqlEndpoint,
+  config.grahqlEndpointSubscription
 );
 
 const ReduxRoot = () => {

diff --git a/litmus-portal/frontend/src/components/AdjustedWeights/index.tsx b/litmus-portal/frontend/src/components/AdjustedWeights/index.tsx
@@ -29,7 +29,7 @@ const AdjustedWeights: React.FC<AdjustedWeightsProps> = ({
             {icon ? (
               <div style={{ display: 'flex' }}>
                 <img
-                  src="/icons/experimentDetails.svg"
+                  src="./icons/experimentDetails.svg"
                   alt="experiment details icon"
                   className={classes.experimentIcon}
                 />
@@ -51,7 +51,7 @@ const AdjustedWeights: React.FC<AdjustedWeightsProps> = ({
             {icon ? (
               <span>
                 <img
-                  src="/icons/experimentDetails.svg"
+                  src="./icons/experimentDetails.svg"
                   alt="experiment details icon"
                   className={classes.experimentIcon}
                 />{' '}

diff --git a/litmus-portal/frontend/src/components/Button/BackButton/index.tsx b/litmus-portal/frontend/src/components/Button/BackButton/index.tsx
@@ -14,7 +14,7 @@ const BackButton: React.FC<IconButtonProps> = ({ onClick }) => {
       className={classes.btn}
       onClick={onClick ?? (() => history.goBack())}
     >
-      <img src="/icons/back.svg" alt="back" />
+      <img src="./icons/back.svg" alt="back" />
       <Typography className={classes.text}>{t('button.backButton')}</Typography>
     </IconButton>
   );

diff --git a/litmus-portal/frontend/src/components/DeveloperGuide/index.tsx b/litmus-portal/frontend/src/components/DeveloperGuide/index.tsx
@@ -1,6 +1,6 @@
-import { Typography, IconButton } from '@material-ui/core';
-import * as React from 'react';
+import { IconButton, Typography } from '@material-ui/core';
 import CloseIcon from '@material-ui/icons/Close';
+import * as React from 'react';
 import useStyles from './styles';
 
 interface DeveloperGuideProps {
@@ -34,7 +34,7 @@ const DeveloperGuide: React.FC<DeveloperGuideProps> = ({
               </Typography>
               {expAvailable ? (
                 <div className={classes.imgDiv}>
-                  <img src="/icons/guide.svg" alt="dev_guide" />
+                  <img src="./icons/guide.svg" alt="dev_guide" />
                   <a href={docs} className={classes.guideLink} target="_">
                     Developer&#39;s guide
                   </a>

diff --git a/litmus-portal/frontend/src/components/Header/ProjectDropDownItems.tsx b/litmus-portal/frontend/src/components/Header/ProjectDropDownItems.tsx
@@ -18,10 +18,10 @@ import { getProjectID } from '../../utils/getSearchParams';
 import Loader from '../Loader';
 import useStyles from './styles';
 
-interface otherProjectsType {
+type OtherProjectsType = {
   projectDetails: Project;
   currentUserProjectRole: string;
-}
+};
 
 interface CustomisedListItemProps {
   handleClick: (event: React.MouseEvent<HTMLDivElement, MouseEvent>) => void;
@@ -66,9 +66,9 @@ const CustomisedListItem: React.FC<CustomisedListItemProps> = ({
     >
       <ListItemIcon>
         {selected ? (
-          <img src="/icons/selectedProject.svg" alt="Selected Project" />
+          <img src="./icons/selectedProject.svg" alt="Selected Project" />
         ) : (
-          <img src="/icons/nonSelectedproject.svg" alt="Un-selected Project" />
+          <img src="./icons/nonSelectedproject.svg" alt="Un-selected Project" />
         )}
       </ListItemIcon>
       <ListItemText
@@ -82,7 +82,7 @@ const CustomisedListItem: React.FC<CustomisedListItemProps> = ({
           aria-label="copyProject"
         >
           {!copying ? (
-            <img src="/icons/copyProjectID.svg" alt="Copy project ID" />
+            <img src="./icons/copyProjectID.svg" alt="Copy project ID" />
           ) : (
             <DoneIcon />
           )}
@@ -98,17 +98,19 @@ const ProjectDropdownItems: React.FC = () => {
   const { data, loading } = useQuery<Projects>(LIST_PROJECTS);
   const projects = data?.listProjects ?? [];
 
-  const baseRoute = window.location.pathname.split('/')[1];
+  const baseRoute = window.location.pathname
+    .replace(process.env.PUBLIC_URL, '')
+    .split('/')[1];
 
   const userID = getUserId();
   const projectID = getProjectID();
 
   const [myProjects, setMyProjects] = useState<Project[]>([]);
-  const [otherProjects, setOtherProjects] = useState<otherProjectsType[]>([]);
+  const [otherProjects, setOtherProjects] = useState<OtherProjectsType[]>([]);
 
   useEffect(() => {
     const projectOwner: Project[] = [];
-    const projectOther: otherProjectsType[] = [];
+    const projectOther: OtherProjectsType[] = [];
 
     projects.map((project) => {
       return project.members.forEach((member: Member) => {

diff --git a/litmus-portal/frontend/src/components/Header/index.tsx b/litmus-portal/frontend/src/components/Header/index.tsx
@@ -33,7 +33,7 @@ const Header: React.FC = () => {
           >
             <div className={classes.litmusDiv}>
               <img
-                src="/icons/litmusPurple.svg"
+                src="./icons/litmusPurple.svg"
                 alt="litmus logo"
                 className={classes.logo}
               />

diff --git a/litmus-portal/frontend/src/components/InfoTooltip/index.tsx b/litmus-portal/frontend/src/components/InfoTooltip/index.tsx
@@ -50,7 +50,7 @@ const InfoTooltip: React.FC<InfoTooltipProps> = ({ value, className }) => {
               onClick={handleTooltipOpen}
             >
               <img
-                src="/icons/info.svg"
+                src="./icons/info.svg"
                 className={classes.infoImg}
                 alt="info tooltip"
               />

diff --git a/litmus-portal/frontend/src/components/InputFieldOutline/index.tsx b/litmus-portal/frontend/src/components/InputFieldOutline/index.tsx
@@ -1,10 +1,10 @@
-import React, { useState } from 'react';
 import { OutlinedInputProps, TextField } from '@material-ui/core';
 import IconButton from '@material-ui/core/IconButton';
 import InputAdornment from '@material-ui/core/InputAdornment';
 import AccountCircle from '@material-ui/icons/AccountCircle';
 import Visibility from '@material-ui/icons/Visibility';
 import VisibilityOff from '@material-ui/icons/VisibilityOff';
+import React, { useState } from 'react';
 import { useStyles, useStylesLitmus } from './styles';
 
 interface InputFieldOutlineProps {
@@ -246,7 +246,7 @@ const InputFieldOutline: React.FC<InputFieldOutlineProps> = ({
               disableUnderline: true,
               endAdornment: (
                 <InputAdornment position="end">
-                  <img src="/icons/closeFilled.svg" alt="Error" />
+                  <img src="./icons/closeFilled.svg" alt="Error" />
                 </InputAdornment>
               ),
             } as Partial<OutlinedInputProps>
@@ -309,7 +309,7 @@ const InputFieldOutline: React.FC<InputFieldOutlineProps> = ({
               ),
               endAdornment: (
                 <InputAdornment position="end">
-                  <img src="/icons/closeFilled.svg" alt="Error" />
+                  <img src="./icons/closeFilled.svg" alt="Error" />
                 </InputAdornment>
               ),
             } as Partial<OutlinedInputProps>

diff --git a/litmus-portal/frontend/src/components/InstallChaos/index.tsx b/litmus-portal/frontend/src/components/InstallChaos/index.tsx
@@ -1,8 +1,8 @@
 import { Typography } from '@material-ui/core';
 import Done from '@material-ui/icons/DoneAllTwoTone';
+import { ButtonOutlined } from 'litmus-ui';
 import React, { useState } from 'react';
 import { useTranslation } from 'react-i18next';
-import { ButtonOutlined } from 'litmus-ui';
 import useStyles from './styles';
 
 interface InstallProps {
@@ -50,7 +50,7 @@ const InstallChaos: React.FC<InstallProps> = ({
             {!copying ? (
               <div className={classes.rowDiv}>
                 <img
-                  src="/icons/copy.svg"
+                  src="./icons/copy.svg"
                   className={classes.copyBtnImg}
                   alt="copy"
                 />

diff --git a/litmus-portal/frontend/src/components/LocalQuickActionCard/index.tsx b/litmus-portal/frontend/src/components/LocalQuickActionCard/index.tsx
@@ -48,7 +48,7 @@ const LocalQuickActionCard: React.FC<LocalQuickActionCardProps> = ({
       : emptyData,
     returningHome
       ? {
-          src: '/icons/calendarWorkflowIcon.svg',
+          src: './icons/calendarWorkflowIcon.svg',
           alt: 'workflow',
           onClick: () =>
             history.push({
@@ -60,7 +60,7 @@ const LocalQuickActionCard: React.FC<LocalQuickActionCardProps> = ({
       : emptyData,
     homePage || returningHome || analytics
       ? {
-          src: '/icons/target.svg',
+          src: './icons/target.svg',
           alt: 'agent',
           onClick: () =>
             history.push({
@@ -75,7 +75,7 @@ const LocalQuickActionCard: React.FC<LocalQuickActionCardProps> = ({
     (homePage || returningHome || community || analytics) &&
     getProjectRole() === Role.owner
       ? {
-          src: '/icons/teamMember.svg',
+          src: './icons/teamMember.svg',
           alt: 'team',
           onClick: () => {
             tabs.changeSettingsTabs(1);
@@ -89,15 +89,15 @@ const LocalQuickActionCard: React.FC<LocalQuickActionCardProps> = ({
       : emptyData,
     homePage || community
       ? {
-          src: '/icons/survey.svg',
+          src: './icons/survey.svg',
           alt: 'survey',
           onClick: () => window.open(constants.FeedbackForm),
           text: t('quickActionCard.quickSurvey'),
         }
       : emptyData,
     homePage || community || analytics
       ? {
-          src: '/icons/docs.svg',
+          src: './icons/docs.svg',
           alt: 'docs',
           onClick: () =>
             window.open('https://docs.litmuschaos.io/docs/getstarted'),