fix(KFLUXUI-278): fixed breadcrumbs for create release and create sec… (

#87)

* fix(KFLUXUI-278): fixed breadcrumbs for create release and create secrets

* fix(KFLUXUI-278): fixed test coverage

* fix(KFLUXUI-278): update testcase for breadcrumbs link

* fix(KFLUXUI-278): added fireEvent for breadcrumbs link

* fix(KFLUXUI-278): updated testcase for create release and create secrets

src/components/ReleaseService/ReleasePlan/ReleasePlanForm/ReleasePlanForm.tsx

@@ -9,7 +9,8 @@ import { ApplicationDropdown } from '../../../../components/Secrets/SecretsForm/
 import { FormFooter } from '../../../../shared';
 import KeyValueField from '../../../../shared/components/formik-fields/key-value-input-field/KeyValueInputField';
 import { useWorkspaceBreadcrumbs } from '../../../../utils/breadcrumb-utils';
-import { ReleasePlanFormValues } from './form-utils';
+import { useWorkspaceInfo } from '../../../Workspace/useWorkspaceInfo';
+import { getReleasePlanFormBreadcrumbs, ReleasePlanFormValues } from './form-utils';
 import { RunReleasePipelineSection } from './RunReleasePipelineSection';
 
 type Props = FormikProps<ReleasePlanFormValues> & {
@@ -26,23 +27,14 @@ export const ReleasePlanForm: React.FC<Props> = ({
   edit,
 }) => {
   const breadcrumbs = useWorkspaceBreadcrumbs();
+  const { workspace } = useWorkspaceInfo();
   const [{ value: labels }] = useField<ReleasePlanFormValues['labels']>('labels');
 
   return (
     <PageLayout
       title={edit ? 'Edit release plan' : 'Create release plan'}
       description="A release plan schedules when to send your code to production."
-      breadcrumbs={[
-        ...breadcrumbs,
-        {
-          path: `/release`,
-          name: 'Releases',
-        },
-        {
-          path: '#',
-          name: edit ? 'Edit release plan' : 'Create release plan',
-        },
-      ]}
+      breadcrumbs={getReleasePlanFormBreadcrumbs(breadcrumbs, workspace, edit)}
       footer={
         <FormFooter
           submitLabel={edit ? 'Save' : 'Create'}

src/components/ReleaseService/ReleasePlan/ReleasePlanForm/__tests__/ReleasePlanForm.spec.tsx

@@ -1,10 +1,11 @@
+import { fireEvent } from '@testing-library/dom';
 import { FormikProps } from 'formik';
 import { createUseWorkspaceInfoMock, formikRenderer } from '../../../../../utils/test-utils';
 import { ReleasePlanForm } from '../ReleasePlanForm';
 
 jest.mock('react-router-dom', () => ({
   ...jest.requireActual('react-router-dom'),
-  useLocation: jest.fn(() => ({})),
+  useLocation: () => ({ pathname: '/path/name' }),
   Link: (props) => <a href={props.to}>{props.children}</a>,
   useNavigate: () => jest.fn(),
 }));
@@ -33,6 +34,9 @@ describe('ReleasePlanForm', () => {
     expect(result.getByRole('checkbox', { name: 'Auto release' })).toBeVisible();
     expect(result.getByRole('checkbox', { name: 'Standing attribution' })).toBeVisible();
     expect(result.getByRole('textbox', { name: 'Release plan name' })).toBeVisible();
+    const breadcrumbLink = result.getByRole('link', { name: /release/i });
+    fireEvent.click(breadcrumbLink);
+    expect(breadcrumbLink).toHaveAttribute('href', '/workspaces/test-ws/release');
   });
 
   it('should show edit form if edit flag is provided', () => {

src/components/ReleaseService/ReleasePlan/ReleasePlanForm/__tests__/form-utils.spec.ts

@@ -5,6 +5,7 @@ import { mockReleasePlan } from '../../__data__/release-plan.mock';
 import {
   createReleasePlan,
   editReleasePlan,
+  getReleasePlanFormBreadcrumbs,
   ReleasePipelineLocation,
   releasePlanFormParams,
 } from '../form-utils';
@@ -207,3 +208,41 @@ describe('releasePlanFormParams', () => {
     expect(result).toEqual([{ name: 'test-key', value: 'test-val' }]);
   });
 });
+
+describe('getReleasePlanFormBreadcrumbs', () => {
+  it('should return the correct breadcrumbs for creating a release plan', () => {
+    const workspace = 'testWorkspace';
+    const edit = false;
+
+    const breadcrumbs = getReleasePlanFormBreadcrumbs([], workspace, edit);
+
+    expect(breadcrumbs).toEqual([
+      {
+        path: `/workspaces/${workspace}/release`,
+        name: 'Releases',
+      },
+      {
+        path: '#',
+        name: 'Create release plan',
+      },
+    ]);
+  });
+
+  it('should return the correct breadcrumbs for editing a release plan', () => {
+    const workspace = 'testWorkspace';
+    const edit = true;
+
+    const breadcrumbs = getReleasePlanFormBreadcrumbs([], workspace, edit);
+
+    expect(breadcrumbs).toEqual([
+      {
+        path: `/workspaces/${workspace}/release`,
+        name: 'Releases',
+      },
+      {
+        path: '#',
+        name: 'Edit release plan',
+      },
+    ]);
+  });
+});

src/components/ReleaseService/ReleasePlan/ReleasePlanForm/form-utils.ts

@@ -196,3 +196,17 @@ export const editReleasePlan = async (
     resource,
   });
 };
+
+export const getReleasePlanFormBreadcrumbs = (breadcrumbs, workspace, edit) => {
+  return [
+    ...breadcrumbs,
+    {
+      path: `/workspaces/${workspace}/release`,
+      name: 'Releases',
+    },
+    {
+      path: '#',
+      name: edit ? 'Edit release plan' : 'Create release plan',
+    },
+  ];
+};

src/components/Secrets/SecretsForm/AddSecretForm.tsx

@@ -60,7 +60,7 @@ const AddSecretForm: React.FC = () => {
     >
       {({ status, isSubmitting, handleReset, dirty, errors, handleSubmit }) => (
         <PageLayout
-          breadcrumbs={getAddSecretBreadcrumbs()}
+          breadcrumbs={getAddSecretBreadcrumbs(workspace)}
           title="Add secret"
           description={
             <>

src/components/Secrets/utils/secret-utils.ts

@@ -259,9 +259,9 @@ export const createSecretResource = async (
     resource: secretResource,
   });
 
-export const getAddSecretBreadcrumbs = () => {
+export const getAddSecretBreadcrumbs = (workspace) => {
   return [
-    { path: '/secrets', name: 'Secrets' },
+    { path: `/workspaces/${workspace}/secrets`, name: 'Secrets' },
     { path: '#', name: 'Add secret' },
   ];
 };