-
Notifications
You must be signed in to change notification settings - Fork 167
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Merge pull request #2287 from jpuzz0/RHOAIENG-265-pipeline-details-to…
…olbar [RHOAIENG-265] Update pipeline details page
- Loading branch information
Showing
37 changed files
with
620 additions
and
635 deletions.
There are no files selected for viewing
Large diffs are not rendered by default.
Oops, something went wrong.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1 @@ | ||
| test-yaml-content |
4 changes: 4 additions & 0 deletions
4
frontend/src/__mocks__/mockPipelineVersionTemplateResource.ts
Large diffs are not rendered by default.
Oops, something went wrong.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
52 changes: 52 additions & 0 deletions
52
frontend/src/__tests__/integration/pages/pipelines/PipelineDetails.spec.ts
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,52 @@ | ||
| import { test, expect } from '@playwright/test'; | ||
| import { navigateToStory } from '~/__tests__/integration/utils'; | ||
|
|
||
| test('page details are updated when a new pipeline version is selected', async ({ page }) => { | ||
| await page.goto(navigateToStory('pages-pipelines-pipelinedetails', 'default')); | ||
| await page.waitForSelector('[data-testid="pipeline-version-topology-content"]'); | ||
|
|
||
| const toggleButtonInput = await page.getByTestId('pipeline-version-toggle-button'); | ||
|
|
||
| // Verify default version is selected and visible by default | ||
| await expect(toggleButtonInput).toHaveText('Pipeline version: version-1'); | ||
|
|
||
| await toggleButtonInput.click(); | ||
| await page | ||
| .locator('[data-id="pipeline-selector-table-list-row"]', { hasText: 'version-2' }) | ||
| .click(); | ||
|
|
||
| // Verify new version is selected and visible after selection | ||
| await expect(toggleButtonInput).toHaveText('Pipeline version: version-2'); | ||
| }); | ||
|
|
||
| test('page details are updated after uploading a new version', async ({ page }) => { | ||
| const newVersionName = 'new-upload-version'; | ||
|
|
||
| await page.goto(navigateToStory('pages-pipelines-pipelinedetails', 'default')); | ||
| await page.waitForSelector('[data-testid="pipeline-version-topology-content"]'); | ||
|
|
||
| const toggleButtonInput = await page.getByTestId('pipeline-version-toggle-button'); | ||
|
|
||
| // Verify default version is selected and visible by default | ||
| await expect(toggleButtonInput).toHaveText('Pipeline version: version-1'); | ||
|
|
||
| await page.getByRole('button', { name: 'Actions' }).click(); | ||
| await page.getByRole('menuitem', { name: 'Upload new version' }).click(); | ||
|
|
||
| const versionNameInput = await page.getByLabel('Pipeline version name'); | ||
| await versionNameInput.clear(); | ||
| await versionNameInput.fill(newVersionName); | ||
|
|
||
| // Simulate file upload | ||
| await page.setInputFiles( | ||
| '[data-testid="pipeline-file-upload"] input[type="file"]', | ||
| './src/__mocks__/mock-upload-pipeline-version.yaml', | ||
| ); | ||
|
|
||
| const submitButton = await page.getByTestId('upload-version-submit-button'); | ||
| await submitButton.click(); | ||
| await page.waitForSelector('[data-testid="upload-version-modal"]', { state: 'hidden' }); | ||
|
|
||
| // Verify new version is selected and visible after selection | ||
| await expect(toggleButtonInput).toHaveText(`Pipeline version: ${newVersionName}`); | ||
| }); |
119 changes: 119 additions & 0 deletions
119
frontend/src/__tests__/integration/pages/pipelines/PipelineDetails.stories.tsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,119 @@ | ||
| import React from 'react'; | ||
|
|
||
| import { StoryObj } from '@storybook/react'; | ||
| import { rest } from 'msw'; | ||
|
|
||
| import PipelineDetails from '~/concepts/pipelines/content/pipelinesDetails/pipeline/PipelineDetails'; | ||
| import { mockK8sResourceList } from '~/__mocks__/mockK8sResourceList'; | ||
| import { mockProjectK8sResource } from '~/__mocks__/mockProjectK8sResource'; | ||
| import { mockDataSciencePipelineApplicationK8sResource } from '~/__mocks__/mockDataSciencePipelinesApplicationK8sResource'; | ||
| import { mockRouteK8sResource } from '~/__mocks__/mockRouteK8sResource'; | ||
| import { mockSecretK8sResource } from '~/__mocks__/mockSecretK8sResource'; | ||
| import { PipelineContextProvider } from '~/concepts/pipelines/context'; | ||
| import mockPipelineVersionTemplateResource from '~/__mocks__/mockPipelineVersionTemplateResource'; | ||
| import { | ||
| buildMockPipelineVersions, | ||
| buildMockPipelineVersion, | ||
| } from '~/__mocks__/mockPipelineVersionsProxy'; | ||
| import { mockPipelinesProxy } from '~/__mocks__/mockPipelinesProxy'; | ||
|
|
||
| const mockPipelineVersions = buildMockPipelineVersions([ | ||
| buildMockPipelineVersion({ id: '1', name: 'version-1' }), | ||
| buildMockPipelineVersion({ id: '2', name: 'version-2' }), | ||
| buildMockPipelineVersion({ id: '3', name: 'version-3' }), | ||
| ]); | ||
|
|
||
| export default { | ||
| component: PipelineDetails, | ||
| parameters: { | ||
| reactRouter: { | ||
| location: { | ||
| pathParams: { | ||
| namespace: 'test-project', | ||
| pipelineVersionId: mockPipelineVersions.versions[0].id, | ||
| }, | ||
| }, | ||
| routing: [ | ||
| { | ||
| path: '/pipelines/:namespace/pipeline/view/:pipelineVersionId', | ||
| }, | ||
| ], | ||
| }, | ||
| msw: { | ||
| handlers: [ | ||
| rest.get('/api/k8s/apis/project.openshift.io/v1/projects', (req, res, ctx) => | ||
| res(ctx.json(mockK8sResourceList([mockProjectK8sResource({})]))), | ||
| ), | ||
| rest.get( | ||
| '/api/k8s/apis/datasciencepipelinesapplications.opendatahub.io/v1alpha1/namespaces/test-project/datasciencepipelinesapplications/pipelines-definition', | ||
| (_req, res, ctx) => res(ctx.json(mockDataSciencePipelineApplicationK8sResource({}))), | ||
| ), | ||
| rest.get( | ||
| '/api/k8s/apis/route.openshift.io/v1/namespaces/test-project/routes/ds-pipeline-pipelines-definition', | ||
| (_req, res, ctx) => | ||
| res( | ||
| ctx.json(mockRouteK8sResource({ notebookName: 'ds-pipeline-pipelines-definition' })), | ||
| ), | ||
| ), | ||
| rest.get( | ||
| '/api/k8s/api/v1/namespaces/test-project/secrets/ds-pipeline-config', | ||
| (_req, res, ctx) => res(ctx.json(mockSecretK8sResource({ name: 'ds-pipeline-config' }))), | ||
| ), | ||
| rest.get( | ||
| '/api/k8s/api/v1/namespaces/test-project/secrets/aws-connection-testdb', | ||
| (_req, res, ctx) => | ||
| res(ctx.json(mockSecretK8sResource({ name: 'aws-connection-testdb' }))), | ||
| ), | ||
| rest.post('/api/proxy/apis/v1beta1/pipelines', (req, res, ctx) => | ||
| res( | ||
| ctx.json({ | ||
| ...mockPipelinesProxy, | ||
| pipelines: [ | ||
| ...mockPipelinesProxy.pipelines, | ||
| { | ||
| ...mockPipelinesProxy.pipelines[1], | ||
| id: mockPipelineVersions.versions[0].resource_references[0].key.id, | ||
| }, | ||
| ], | ||
| }), | ||
| ), | ||
| ), | ||
| rest.post('/api/proxy/apis/v1beta1/pipelines/:pipeline_id', (req, res, ctx) => | ||
| res( | ||
| ctx.json({ | ||
| ...mockPipelinesProxy.pipelines[1], | ||
| id: mockPipelineVersions.versions[0].resource_references[0].key.id, | ||
| }), | ||
| ), | ||
| ), | ||
| rest.post('/api/proxy/apis/v1beta1/pipeline_versions', (_req, res, ctx) => | ||
| res(ctx.json(mockPipelineVersions)), | ||
| ), | ||
| rest.post('/api/proxy/apis/v1beta1/pipeline_versions/:version_id', (req, res, ctx) => { | ||
| const existingMockPipelineVersion = mockPipelineVersions.versions.find( | ||
| (version) => version.id === req.params.version_id, | ||
| ); | ||
|
|
||
| const newMockPipelineVersion = buildMockPipelineVersion({ | ||
| name: 'new-upload-version', | ||
| id: 'new-version-id', | ||
| }); | ||
|
|
||
| return res(ctx.json(existingMockPipelineVersion || newMockPipelineVersion)); | ||
| }), | ||
| rest.post( | ||
| '/api/proxy/apis/v1beta1/pipeline_versions/:version_id/templates', | ||
| (_req, res, ctx) => res(ctx.json(mockPipelineVersionTemplateResource)), | ||
| ), | ||
| ], | ||
| }, | ||
| }, | ||
| }; | ||
|
|
||
| export const Default: StoryObj = { | ||
| render: () => ( | ||
| <PipelineContextProvider namespace="test-project"> | ||
| <PipelineDetails breadcrumbPath={[]} /> | ||
| </PipelineContextProvider> | ||
| ), | ||
| }; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Oops, something went wrong.