chore(KFLUXUI-296): remove workspace dependency from Components

src/components/Components/ComponentDetails/ComponentDetailsView.tsx

@@ -7,8 +7,10 @@
 import { useComponent } from '../../../hooks/useComponents';
 import { HttpError } from '../../../k8s/error';
 import { ComponentGroupVersionKind, ComponentModel } from '../../../models';
+import { COMPONENT_LIST_PATH, COMPONENT_DETAILS_PATH } from '../../../routes/paths';
 import { RouterParams } from '../../../routes/utils';
 import ErrorEmptyState from '../../../shared/components/empty-state/ErrorEmptyState';
+import { useNamespace } from '../../../shared/providers/Namespace/useNamespaceInfo';
 import { useApplicationBreadcrumbs } from '../../../utils/breadcrumb-utils';
 import { useAccessReviewForModel } from '../../../utils/rbac';
 import { ButtonWithAccessTooltip } from '../../ButtonWithAccessTooltip';
@@ -17,7 +19,6 @@
 import { Action } from '../../DetailsPage/types';
 import { GettingStartedCard } from '../../GettingStartedCard/GettingStartedCard';
 import { useModalLauncher } from '../../modal/ModalProvider';
-import { useWorkspaceInfo } from '../../Workspace/useWorkspaceInfo';
 import { useComponentActions } from '../component-actions';
 import './ComponentDetailsView.scss';
 
@@ -26,10 +27,10 @@
 const ComponentDetailsView: React.FC = () => {
   const { componentName, applicationName } = useParams<RouterParams>();
   const navigate = useNavigate();
-  const { namespace, workspace } = useWorkspaceInfo();
+  const namespace = useNamespace();
   const applicationBreadcrumbs = useApplicationBreadcrumbs();
   const showModal = useModalLauncher();
-  const [component, loaded, componentError] = useComponent(namespace, workspace, componentName);
+  const [component, loaded, componentError] = useComponent(namespace, componentName);
   const [canPatchComponent] = useAccessReviewForModel(ComponentModel, 'patch');
 
   const componentActions = useComponentActions(loaded ? component : undefined, componentName);
@@ -112,11 +113,18 @@
         breadcrumbs={[
           ...applicationBreadcrumbs,
           {
-            path: `/workspaces/${workspace}/applications/${applicationName}/components`,
+            path: COMPONENT_LIST_PATH.createPath({
+              workspaceName: namespace,
+              applicationName,
+            }),
             name: 'components',
           },
           {
-            path: `/workspaces/${workspace}/applications/${applicationName}/components/${componentName}`,
+            path: COMPONENT_DETAILS_PATH.createPath({
+              workspaceName: namespace,
+              applicationName,
+              componentName,
+            }),
             name: component.spec.componentName,
           },
         ]}
@@ -128,7 +136,11 @@
           </Text>
         }
         actions={actions}
-        baseURL={`/workspaces/${workspace}/applications/${applicationName}/components/${componentName}`}
+        baseURL={COMPONENT_DETAILS_PATH.createPath({
+          workspaceName: namespace,
+          applicationName,
+          componentName,
+        })}
         tabs={[
           {
             key: 'index',

src/components/Components/ComponentDetails/__tests__/ComponentActivityTab.spec.tsx

@@ -1,10 +1,10 @@
 import { useNavigate, useParams } from 'react-router-dom';
 import { screen, fireEvent, act } from '@testing-library/react';
 import { useComponent, useComponents } from '../../../../hooks/useComponents';
+import { mockUseNamespaceHook } from '../../../../unit-test-utils/mock-namespace';
 import {
   createK8sWatchResourceMock,
   createUseApplicationMock,
-  createUseWorkspaceInfoMock,
   routerRenderer,
 } from '../../../../utils/test-utils';
 import { pipelineWithCommits } from '../../../Commits/__data__/pipeline-with-commits';
@@ -39,7 +39,7 @@ const useParamsMock = useParams as jest.Mock;
 describe('ComponentActivityTab', () => {
   let navigateMock: jest.Mock;
 
-  createUseWorkspaceInfoMock({ namespace: 'test-ns', workspace: 'test-ws' });
+  mockUseNamespaceHook('test-ns');
 
   beforeEach(() => {
     watchResourceMock.mockReturnValue([pipelineWithCommits.slice(0, 4), true]);
@@ -49,7 +49,6 @@ describe('ComponentActivityTab', () => {
     useNavigateMock.mockImplementation(() => navigateMock);
     useParamsMock.mockReturnValue({
       activityTab: 'latest-commits',
-      workspaceName: 'test-ws',
       componentName: 'test-component',
     });
   });
@@ -73,7 +72,7 @@ describe('ComponentActivityTab', () => {
 
     await act(() => fireEvent.click(plrTab));
     expect(navigateMock).toHaveBeenCalledWith(
-      '/workspaces/test-ws/applications/my-test-output/components/test-component/activity/pipelineruns',
+      '/workspaces/test-ns/applications/my-test-output/components/test-component/activity/pipelineruns',
     );
   });
 });

src/components/Components/ComponentDetails/__tests__/ComponentDetails.spec.tsx

@@ -2,9 +2,9 @@ import { useNavigate, useParams } from 'react-router-dom';
 import { screen, fireEvent, act } from '@testing-library/react';
 import { useComponent } from '../../../../hooks/useComponents';
 import { PACState } from '../../../../hooks/usePACState';
+import { mockUseNamespaceHook } from '../../../../unit-test-utils/mock-namespace';
 import {
   createK8sWatchResourceMock,
-  createUseWorkspaceInfoMock,
   renderWithQueryClientAndRouter,
   WithTestWorkspaceContext,
 } from '../../../../utils/test-utils';
@@ -63,7 +63,7 @@ describe('ComponentDetailsView', () => {
   let navigateMock: jest.Mock;
   const showModalMock = jest.fn();
 
-  createUseWorkspaceInfoMock({ namespace: 'test-ns', workspace: 'test-ws' });
+  mockUseNamespaceHook('test-ns');
 
   beforeEach(() => {
     useComponentMock.mockReturnValue([mockComponent, true]);
@@ -108,7 +108,7 @@ describe('ComponentDetailsView', () => {
 
     await act(() => fireEvent.click(activityTab));
     expect(navigateMock).toHaveBeenCalledWith(
-      '/workspaces/test-ws/applications/test-application/components/human-resources/activity',
+      '/workspaces/test-ns/applications/test-application/components/human-resources/activity',
     );
   });
 });

src/components/Components/ComponentDetails/tabs/ComponentActivityTab.tsx

@@ -4,20 +4,21 @@
 import { PipelineRunLabel } from '../../../../consts/pipelinerun';
 import { useComponent } from '../../../../hooks/useComponents';
 import { useLocalStorage } from '../../../../hooks/useLocalStorage';
+import { COMPONENT_ACTIVITY_CHILD_TAB_PATH } from '../../../../routes/paths';
 import { RouterParams } from '../../../../routes/utils';
+import { useNamespace } from '../../../../shared/providers/Namespace/useNamespaceInfo';
 import { PipelineRunKind } from '../../../../types';
 import PipelineRunsTab from '../../../Activity/PipelineRunsTab';
 import CommitsListView from '../../../Commits/CommitsListPage/CommitsListView';
 import { DetailsSection } from '../../../DetailsPage';
-import { useWorkspaceInfo } from '../../../Workspace/useWorkspaceInfo';
 
 export const ACTIVITY_SECONDARY_TAB_KEY = 'activity-secondary-tab';
 
 export const ComponentActivityTab: React.FC = () => {
   const params = useParams<RouterParams>();
-  const { activityTab, workspaceName, componentName } = params;
-  const { namespace } = useWorkspaceInfo();
-  const [component] = useComponent(namespace, workspaceName, componentName);
+  const { activityTab, componentName } = params;
+  const namespace = useNamespace();
+  const [component] = useComponent(namespace, componentName);
   const applicationName = component.spec.application;
   const [lastSelectedTab, setLocalStorageItem] = useLocalStorage<string>(
     `${component ? `${component.spec.componentName}_` : ''}${ACTIVITY_SECONDARY_TAB_KEY}`,
@@ -26,8 +27,13 @@
 
   const getActivityTabRoute = React.useCallback(
     (tab: string) =>
-      `/workspaces/${workspaceName}/applications/${applicationName}/components/${componentName}/activity/${tab}`,
-    [applicationName, componentName, workspaceName],
+      COMPONENT_ACTIVITY_CHILD_TAB_PATH.createPath({
+        workspaceName: namespace,
+        applicationName,
+        componentName,
+        activityTab: tab,
+      }),
+    [applicationName, componentName, namespace],
   );
 
   const navigate = useNavigate();

src/components/Components/ComponentDetails/tabs/ComponentDetails.tsx

@@ -10,11 +10,11 @@ import {
 import yamlParser from 'js-yaml';
 import { useLatestPushBuildPipelineRunForComponent } from '../../../../hooks/usePipelineRuns';
 import ExternalLink from '../../../../shared/components/links/ExternalLink';
+import { useNamespace } from '../../../../shared/providers/Namespace/useNamespaceInfo';
 import { ComponentKind } from '../../../../types';
 import { getLastestImage } from '../../../../utils/component-utils';
 import { getPipelineRunStatusResults } from '../../../../utils/pipeline-utils';
 import GitRepoLink from '../../../GitLink/GitRepoLink';
-import { useWorkspaceInfo } from '../../../Workspace/useWorkspaceInfo';
 
 type ComponentDetailsProps = {
   component: ComponentKind;
@@ -25,7 +25,7 @@ const RESULT_NAME = 'IMAGE_URL';
 const ComponentDetails: React.FC<React.PropsWithChildren<ComponentDetailsProps>> = ({
   component,
 }) => {
-  const { namespace } = useWorkspaceInfo();
+  const namespace = useNamespace();
   const [latestPushBuildPLR, pipelineRunLoaded, error] = useLatestPushBuildPipelineRunForComponent(
     namespace,
     component.metadata.name,

src/components/Components/ComponentDetails/tabs/ComponentDetailsTab.tsx

@@ -3,29 +3,29 @@ import { useParams } from 'react-router-dom';
 import { Button, ButtonVariant } from '@patternfly/react-core';
 import { useComponent } from '../../../../hooks/useComponents';
 import { RouterParams } from '../../../../routes/utils';
+import { useNamespace } from '../../../../shared/providers/Namespace/useNamespaceInfo';
 import { TrackEvents, useTrackEvent } from '../../../../utils/analytics';
 import ComponentNudgesDependencies from '../../../ComponentRelation/details-page/ComponentNudgesDependencies';
 import { createCustomizeComponentPipelineModalLauncher } from '../../../CustomizedPipeline/CustomizePipelinesModal';
 import { DetailsSection } from '../../../DetailsPage';
 import { useModalLauncher } from '../../../modal/ModalProvider';
-import { useWorkspaceInfo } from '../../../Workspace/useWorkspaceInfo';
 import ComponentBuildSettings from './ComponentBuildSettings';
 import ComponentDetails from './ComponentDetails';
 import ComponentLatestBuild from './ComponentLatestBuild';
 
 const ComponentDetailsTab: React.FC = () => {
+  const namespace = useNamespace();
   const { componentName } = useParams<RouterParams>();
-  const { workspace, namespace } = useWorkspaceInfo();
   const track = useTrackEvent();
   const showModal = useModalLauncher();
-  const [component] = useComponent(namespace, workspace, componentName);
+  const [component] = useComponent(namespace, componentName);
   const customizePipeline = () => {
     track(TrackEvents.ButtonClicked, {
       link_name: 'manage-build-pipeline',
       link_location: 'component-list-label',
       component_name: component.metadata.name,
       app_name: component.spec.application,
-      workspace,
+      namespace,
     });
     showModal(
       createCustomizeComponentPipelineModalLauncher(

src/components/Components/ComponentDetails/tabs/ComponentLatestBuild.tsx

@@ -15,15 +15,16 @@ import {
 import { useLatestSuccessfulBuildPipelineRunForComponent } from '../../../../hooks/usePipelineRuns';
 import { useTaskRuns } from '../../../../hooks/useTaskRuns';
 import { HttpError } from '../../../../k8s/error';
+import { COMMIT_DETAILS_PATH } from '../../../../routes/paths';
 import ErrorEmptyState from '../../../../shared/components/empty-state/ErrorEmptyState';
 import { Timestamp } from '../../../../shared/components/timestamp/Timestamp';
+import { useNamespace } from '../../../../shared/providers/Namespace/useNamespaceInfo';
 import { ComponentKind } from '../../../../types';
 import { getCommitsFromPLRs } from '../../../../utils/commits-utils';
 import { getLastestImage } from '../../../../utils/component-utils';
 import CommitLabel from '../../../Commits/commit-label/CommitLabel';
 import { useBuildLogViewerModal } from '../../../LogViewer/BuildLogViewer';
 import ScanDescriptionListGroup from '../../../PipelineRun/PipelineRunDetailsView/tabs/ScanDescriptionListGroup';
-import { useWorkspaceInfo } from '../../../Workspace/useWorkspaceInfo';
 
 type ComponentLatestBuildProps = {
   component: ComponentKind;
@@ -32,7 +33,7 @@ type ComponentLatestBuildProps = {
 const ComponentLatestBuild: React.FC<React.PropsWithChildren<ComponentLatestBuildProps>> = ({
   component,
 }) => {
-  const { namespace, workspace } = useWorkspaceInfo();
+  const namespace = useNamespace();
   const [pipelineRun, pipelineRunLoaded, error] = useLatestSuccessfulBuildPipelineRunForComponent(
     namespace,
     component.metadata.name,
@@ -101,7 +102,11 @@ const ComponentLatestBuild: React.FC<React.PropsWithChildren<ComponentLatestBuil
               {commit ? (
                 <>
                   <Link
-                    to={`/workspaces/${workspace}/applications/${commit.application}/commit/${commit.sha}`}
+                    to={COMMIT_DETAILS_PATH.createPath({
+                      workspaceName: namespace,
+                      applicationName: commit.application,
+                      commitName: commit.sha,
+                    })}
                   >
                     {commit.isPullRequest ? `#${commit.pullRequestNumber}` : ''} {commit.shaTitle}
                   </Link>

src/components/Components/ComponentsListView/ComponentListView.tsx

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { Link } from 'react-router-dom';
+import { Link, useParams } from 'react-router-dom';
 import {
   Alert,
   AlertActionCloseButton,
@@ -24,18 +24,20 @@ import { PACState } from '../../../hooks/usePACState';
 import usePACStatesForComponents from '../../../hooks/usePACStatesForComponents';
 import { useSearchParam } from '../../../hooks/useSearchParam';
 import { ComponentModel } from '../../../models';
+import { IMPORT_PATH } from '../../../routes/paths';
+import { RouterParams } from '../../../routes/utils';
 import { Table } from '../../../shared';
 import AppEmptyState from '../../../shared/components/empty-state/AppEmptyState';
 import FilteredEmptyState from '../../../shared/components/empty-state/FilteredEmptyState';
 import ExternalLink from '../../../shared/components/links/ExternalLink';
+import { useNamespace } from '../../../shared/providers/Namespace/useNamespaceInfo';
 import { ComponentKind } from '../../../types';
 import { useURLForComponentPRs } from '../../../utils/component-utils';
 import { useAccessReviewForModel } from '../../../utils/rbac';
 import { ButtonWithAccessTooltip } from '../../ButtonWithAccessTooltip';
 import { createCustomizeAllPipelinesModalLauncher } from '../../CustomizedPipeline/CustomizePipelinesModal';
 import { GettingStartedCard } from '../../GettingStartedCard/GettingStartedCard';
 import { useModalLauncher } from '../../modal/ModalProvider';
-import { useWorkspaceInfo } from '../../Workspace/useWorkspaceInfo';
 import ComponentsListHeader from './ComponentsListHeader';
 import ComponentsListRow from './ComponentsListRow';
 import ComponentsToolbar, { pipelineRunStatusFilterId } from './ComponentsToolbar';
@@ -51,15 +53,16 @@ type ComponentListViewProps = {
 const ComponentListView: React.FC<React.PropsWithChildren<ComponentListViewProps>> = ({
   applicationName,
 }) => {
-  const { namespace, workspace } = useWorkspaceInfo();
+  const namespace = useNamespace();
+  const { workspaceName } = useParams<RouterParams>();
 
   const [nameFilter, setNameFilter] = useSearchParam('name', '');
   const [statusFiltersParam, setStatusFiltersParam] = useSearchParam('status', '');
   const [mergeAlertHidden, setMergeAlertHidden] = React.useState<boolean>(false);
 
   const [components, componentsLoaded, componentsError] = useComponents(
     namespace,
-    workspace,
+    workspaceName,
     applicationName,
     true,
   );
@@ -130,15 +133,20 @@ const ComponentListView: React.FC<React.PropsWithChildren<ComponentListViewProps
       <ButtonWithAccessTooltip
         variant="primary"
         component={(props) => (
-          <Link {...props} to={`/workspaces/${workspace}/import?application=${applicationName}`} />
+          <Link
+            {...props}
+            to={`${IMPORT_PATH.createPath({
+              workspaceName: namespace,
+            })}?application=${applicationName}`}
+          />
         )}
         isDisabled={!canCreateComponent}
         tooltip="You don't have access to add a component"
         analytics={{
           link_name: 'add-component',
           link_location: 'components-list-empty-state',
           app_name: applicationName,
-          workspace,
+          namespace,
         }}
       >
         Add component

src/components/Components/ComponentsListView/ComponentsListRow.tsx

@@ -2,9 +2,11 @@
 import { Link } from 'react-router-dom';
 import { Button, Flex, FlexItem, Skeleton } from '@patternfly/react-core';
 import { PacStatesForComponents } from '../../../hooks/usePACStatesForComponents';
+import { COMPONENT_DETAILS_PATH, COMMIT_DETAILS_PATH } from '../../../routes/paths';
 import { RowFunctionArgs, TableData } from '../../../shared';
 import ActionMenu from '../../../shared/components/action-menu/ActionMenu';
 import ExternalLink from '../../../shared/components/links/ExternalLink';
+import { useNamespace } from '../../../shared/providers/Namespace/useNamespaceInfo';
 import { ComponentKind, PipelineRunKind } from '../../../types';
 import { getCommitsFromPLRs } from '../../../utils/commits-utils';
 import { getLastestImage } from '../../../utils/component-utils';
@@ -13,7 +15,6 @@
 import GitRepoLink from '../../GitLink/GitRepoLink';
 import { useBuildLogViewerModal } from '../../LogViewer/BuildLogViewer';
 import PipelineRunStatus from '../../PipelineRun/PipelineRunStatus';
-import { useWorkspaceInfo } from '../../Workspace/useWorkspaceInfo';
 import { useComponentActions } from '../component-actions';
 import { componentsTableColumnClasses } from './ComponentsListHeader';
 
@@ -29,7 +30,7 @@
 const ComponentsListRow: React.FC<
   RowFunctionArgs<ComponentWithLatestBuildPipeline, PacStatesForComponents>
 > = ({ obj: component, customData }) => {
-  const { workspace } = useWorkspaceInfo();
+  const namespace = useNamespace();
   const applicationName = component.spec.application;
   const name = component.metadata.name;
   const actions = useComponentActions(component, name);
@@ -50,7 +51,11 @@
         <Flex direction={{ default: 'column' }}>
           <FlexItem data-test="component-list-item-name" style={{ minWidth: '30%' }}>
             <Link
-              to={`/workspaces/${workspace}/applications/${applicationName}/components/${name}`}
+              to={COMPONENT_DETAILS_PATH.createPath({
+                workspaceName: namespace,
+                applicationName,
+                componentName: name,
+              })}
             >
               <b>{name}</b>{' '}
               <ComponentRelationStatusIcon
@@ -92,7 +97,11 @@
             {commit ? (
               <>
                 <Link
-                  to={`/workspaces/${workspace}/applications/${commit.application}/commit/${commit.sha}`}
+                  to={COMMIT_DETAILS_PATH.createPath({
+                    workspaceName: namespace,
+                    applicationName: commit.application,
+                    commitName: commit.sha,
+                  })}
                 >
                   {commit.isPullRequest ? `#${commit.pullRequestNumber}` : ''} {commit.shaTitle}
                 </Link>