ui: use route location instead of window.location (PROJQUAY-5392) (qu…

…ay#1844)

* ui: use route location instead of window.location (PROJQUAY-5392)

window.location causes issues when running in beta or preview on console

* remove console.log

web/src/routes/NavigationPath.tsx

@@ -41,15 +41,20 @@ export enum NavigationPath {
   tagDetail = '/repository/:organizationName/:repositoryName/tag/:tagName',
 }
 
-export function getRepoDetailPath(org: string, repo: string) {
+export function getRepoDetailPath(
+  currentRoute: string,
+  org: string,
+  repo: string,
+) {
   // return relative path to repository detail page from repo list table
   let repoPath = NavigationPath.repositoryDetail.toString();
   repoPath = repoPath.replace(':organizationName', org);
   repoPath = repoPath.replace('*', repo);
-  return domainRoute(repoPath);
+  return domainRoute(currentRoute, repoPath);
 }
 
 export function getTagDetailPath(
+  currentRoute: string,
   org: string,
   repo: string,
   tagName: string,
@@ -67,51 +72,52 @@ export function getTagDetailPath(
     }
     tagPath = tagPath + '?' + params.join('&');
   }
-  return domainRoute(tagPath);
+  return domainRoute(currentRoute, tagPath);
 }
 
 export function getDomain() {
   return process.env.REACT_APP_QUAY_DOMAIN || 'quay.io';
 }
 
-function domainRoute(definedRoute) {
+function domainRoute(currentRoute, definedRoute) {
   /***
    * This function returns prefix + route.
    Eg:If quay is hosted on https://stage.foo.redhat.com:1337/settings/quay/organization,
    window.location.pathname here is `/settings/quay/organization`,
    the regex removes everything after organization and returns /settings/quay.
    So, the function returns /settings/quay/<route> .
    ***/
-  const currentRoute = window.location.pathname;
   return (
     currentRoute.replace(/\/(organization|repository|signin)(?!.*\1).*/, '') +
     definedRoute
   );
 }
 
+const currentRoute = window.location.pathname;
+
 const NavigationRoutes = [
   {
-    path: domainRoute(NavigationPath.organizationsList),
+    path: domainRoute(currentRoute, NavigationPath.organizationsList),
     Component: <OrganizationsList />,
     breadcrumb: Breadcrumb.organizationsListBreadcrumb,
   },
   {
-    path: domainRoute(NavigationPath.organizationDetail),
+    path: domainRoute(currentRoute, NavigationPath.organizationDetail),
     Component: <Organization />,
     breadcrumb: Breadcrumb.organizationDetailBreadcrumb,
   },
   {
-    path: domainRoute(NavigationPath.repositoriesList),
-    Component: <RepositoriesList />,
+    path: domainRoute(currentRoute, NavigationPath.repositoriesList),
+    Component: <RepositoriesList organizationName="" />,
     breadcrumb: Breadcrumb.repositoriesListBreadcrumb,
   },
   {
-    path: domainRoute(NavigationPath.repositoryDetail),
+    path: domainRoute(currentRoute, NavigationPath.repositoryDetail),
     Component: <RepositoryDetails />,
     breadcrumb: Breadcrumb.repositoryDetailBreadcrumb,
   },
   {
-    path: domainRoute(NavigationPath.tagDetail),
+    path: domainRoute(currentRoute, NavigationPath.tagDetail),
     Component: <TagDetails />,
     breadcrumb: Breadcrumb.tagDetailBreadcrumb,
   },

web/src/routes/RepositoriesList/RepositoriesList.tsx

@@ -14,13 +14,13 @@ import {
   Tbody,
   Td,
 } from '@patternfly/react-table';
-import {useRecoilState, useRecoilValue} from 'recoil';
+import {useRecoilState} from 'recoil';
 import {IRepository} from 'src/resources/RepositoryResource';
 import {ReactElement, useState} from 'react';
 import {Link, useLocation} from 'react-router-dom';
 import CreateRepositoryModalTemplate from 'src/components/modals/CreateRepoModalTemplate';
 import {getRepoDetailPath} from 'src/routes/NavigationPath';
-import {selectedReposState, searchRepoState} from 'src/atoms/RepositoryState';
+import {selectedReposState} from 'src/atoms/RepositoryState';
 import {formatDate, formatSize} from 'src/libs/utils';
 import {BulkDeleteModalTemplate} from 'src/components/modals/BulkDeleteModalTemplate';
 import {RepositoryToolBar} from 'src/routes/RepositoriesList/RepositoryToolBar';
@@ -69,6 +69,7 @@ export default function RepositoriesList(props: RepositoriesListProps) {
   const [makePublicModalOpen, setmakePublicModal] = useState(false);
   const [makePrivateModalOpen, setmakePrivateModal] = useState(false);
   const [err, setErr] = useState<string[]>();
+  const location = useLocation();
 
   const quayConfig = useQuayConfig();
   const {user} = useCurrentUser();
@@ -363,11 +364,23 @@ export default function RepositoriesList(props: RepositoriesListProps) {
                   />
                   <Td dataLabel={RepositoryListColumnNames.name}>
                     {currentOrg == null ? (
-                      <Link to={getRepoDetailPath(repo.namespace, repo.name)}>
+                      <Link
+                        to={getRepoDetailPath(
+                          location.pathname,
+                          repo.namespace,
+                          repo.name,
+                        )}
+                      >
                         {repo.namespace}/{repo.name}
                       </Link>
                     ) : (
-                      <Link to={getRepoDetailPath(repo.namespace, repo.name)}>
+                      <Link
+                        to={getRepoDetailPath(
+                          location.pathname,
+                          repo.namespace,
+                          repo.name,
+                        )}
+                      >
                         {repo.name}
                       </Link>
                     )}
@@ -414,3 +427,7 @@ interface RepoListTableItem {
   size: number;
   last_modified: number;
 }
+
+interface RepositoriesListProps {
+  organizationName: string;
+}

web/src/routes/RepositoryDetails/Tags/SecurityDetails.tsx

@@ -3,7 +3,7 @@ import {
   SecurityDetailsResponse,
   getSecurityDetails,
 } from 'src/resources/TagResource';
-import {Link} from 'react-router-dom';
+import {Link, useLocation} from 'react-router-dom';
 import {Skeleton} from '@patternfly/react-core';
 import {getTagDetailPath} from 'src/routes/NavigationPath';
 import {TabIndex} from 'src/routes/TagDetails/Types';
@@ -34,6 +34,7 @@ export default function SecurityDetails(props: SecurityDetailsProps) {
   const [err, setErr] = useState<string>();
   const setGlobalErr = useSetRecoilState(SecurityDetailsErrorState);
   const setGlobalData = useSetRecoilState(SecurityDetailsState);
+  const location = useLocation();
 
   const severityOrder = [
     VulnerabilitySeverity.Critical,
@@ -117,7 +118,13 @@ export default function SecurityDetails(props: SecurityDetailsProps) {
   if (vulnCount.size === 0) {
     return (
       <Link
-        to={getTagDetailPath(props.org, props.repo, props.tag, queryParams)}
+        to={getTagDetailPath(
+          location.pathname,
+          props.org,
+          props.repo,
+          props.tag,
+          queryParams,
+        )}
         className={'pf-u-display-inline-flex pf-u-align-items-center'}
         style={{textDecoration: 'none'}}
       >
@@ -137,7 +144,13 @@ export default function SecurityDetails(props: SecurityDetailsProps) {
     const highestSeverity: VulnerabilitySeverity = getHighestSeverity();
     return (
       <Link
-        to={getTagDetailPath(props.org, props.repo, props.tag, queryParams)}
+        to={getTagDetailPath(
+          location.pathname,
+          props.org,
+          props.repo,
+          props.tag,
+          queryParams,
+        )}
         className={'pf-u-display-inline-flex pf-u-align-items-center'}
         style={{textDecoration: 'none'}}
       >
@@ -178,7 +191,13 @@ export default function SecurityDetails(props: SecurityDetailsProps) {
     });
   return (
     <Link
-      to={getTagDetailPath(props.org, props.repo, props.tag, queryParams)}
+      to={getTagDetailPath(
+        location.pathname,
+        props.org,
+        props.repo,
+        props.tag,
+        queryParams,
+      )}
       style={{textDecoration: 'none'}}
     >
       {counts}

web/src/routes/RepositoryDetails/Tags/TagsTable.tsx

@@ -34,6 +34,7 @@ function SubRow(props: SubRowProps) {
           <ExpandableRowContent>
             <Link
               to={getTagDetailPath(
+                location.pathname,
                 props.org,
                 props.repo,
                 props.tag.name,
@@ -126,7 +127,12 @@ function TagsTableRow(props: RowProps) {
         />
         <Td dataLabel={ColumnNames.name}>
           <Link
-            to={getTagDetailPath(props.org, props.repo, tag.name)}
+            to={getTagDetailPath(
+              location.pathname,
+              props.org,
+              props.repo,
+              tag.name,
+            )}
             onClick={resetSecurityDetails}
           >
             {tag.name}

web/src/routes/TagDetails/TagDetailsTabs.tsx

@@ -1,5 +1,5 @@
 import {Tabs, Tab, TabTitleText} from '@patternfly/react-core';
-import {useSearchParams, useNavigate} from 'react-router-dom';
+import {useSearchParams, useNavigate, useLocation} from 'react-router-dom';
 import {useState} from 'react';
 import Details from './Details/Details';
 import SecurityReport from './SecurityReport/SecurityReport';
@@ -20,6 +20,7 @@ function getTabIndex(tab: string) {
 export default function TagTabs(props: TagTabsProps) {
   const [activeTabKey, setActiveTabKey] = useState<TabIndex>(TabIndex.Details);
   const navigate = useNavigate();
+  const location = useLocation();
 
   // Navigate to the correct tab
   const [searchParams] = useSearchParams();

web/src/tests/fake-db/data/repository/repository.ts

@@ -263,9 +263,6 @@ mock.onPost(visibilityPathRegex).reply((request: AxiosRequestConfig) => {
   const splitUrl = request.url.split('/');
   const org = splitUrl[4];
   const requestedRepo = splitUrl.slice(5, splitUrl.length - 1).join('/');
-  console.log('org', org);
-  console.log('request.url', request.url);
-  console.log('requestedRepo', requestedRepo);
 
   const repoIndex = responses[org].repositories.findIndex(
     (repo) => repo.name === requestedRepo,