Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
List connected notebooks for each connection table row
- Loading branch information
1 parent
ca27d1d
commit b3682d7
There are no files selected for viewing
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,44 @@ | ||
| import * as React from 'react'; | ||
| import { SVGIconProps } from '@patternfly/react-icons/dist/esm/createIcon'; | ||
| import { ProjectObjectType, typedColor } from '~/concepts/design/utils'; | ||
| import NotebookIcon from '~/images/icons/NotebookIcon'; | ||
| import ModelIcon from '~/images/icons/ModelsIcon'; | ||
|
|
||
| type TypedObjectIconProps = SVGIconProps & { | ||
| resourceType: ProjectObjectType; | ||
| useTypedColor?: boolean; | ||
| size?: number; | ||
| }; | ||
| const TypedObjectIcon: React.FC<TypedObjectIconProps> = ({ | ||
| resourceType, | ||
| useTypedColor, | ||
| style, | ||
| ...rest | ||
| }) => { | ||
| switch (resourceType) { | ||
| case ProjectObjectType.notebook: | ||
| return ( | ||
| <NotebookIcon | ||
| style={{ | ||
| color: useTypedColor ? typedColor(resourceType) : undefined, | ||
| ...(style || {}), | ||
| }} | ||
| {...rest} | ||
| /> | ||
| ); | ||
| case ProjectObjectType.deployedModels: | ||
| return ( | ||
| <ModelIcon | ||
| style={{ | ||
| color: useTypedColor ? typedColor(resourceType) : undefined, | ||
| ...(style || {}), | ||
| }} | ||
| {...rest} | ||
| /> | ||
| ); | ||
| default: | ||
| return null; | ||
| } | ||
| }; | ||
|
|
||
| export default TypedObjectIcon; | ||
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
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,13 @@ | ||
| import { createIcon } from '@patternfly/react-icons/dist/esm/createIcon'; | ||
|
|
||
| const ModelIcon = createIcon({ | ||
| name: 'ModelIcon', | ||
| width: 32, | ||
| height: 32, | ||
| svgPath: | ||
| 'M19.5 11H12.5C11.6729 11 11 10.3271 11 9.5V2.5C11 1.6729 11.6729 1 12.5 1H19.5C20.3271 1 21 1.6729 21 2.5V9.5C21 10.3271 20.3271 11 19.5 11ZM19 3H13V9H19V3ZM12.5 25H5.5C4.6729 25 4 24.3271 4 23.5V16.5C4 15.6729 4.6729 15 5.5 15H12.5C13.3271 15 14 15.6729 14 16.5V23.5C14 24.3271 13.3271 25 12.5 25ZM12 17H6V23H12V17ZM2 29H30C30.5527 29 31 29.4478 31 30C31 30.5522 30.5527 31 30 31H2C1.4473 31 1 30.5522 1 30C1 29.4478 1.4473 29 2 29ZM18 16.5V23.5C18 24.3271 18.6729 25 19.5 25H26.5C27.3271 25 28 24.3271 28 23.5V16.5C28 15.6729 27.3271 15 26.5 15H19.5C18.6729 15 18 15.6729 18 16.5ZM20 17H26V23H20V17Z', | ||
| xOffset: 0, | ||
| yOffset: 0, | ||
| }); | ||
|
|
||
| export default ModelIcon; |
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
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,43 @@ | ||
| import * as React from 'react'; | ||
| import { LabelGroup, Spinner } from '@patternfly/react-core'; | ||
| import { | ||
| useRelatedNotebooks, | ||
| ConnectedNotebookContext, | ||
| } from '~/pages/projects/notebook/useRelatedNotebooks'; | ||
| import { Connection } from '~/concepts/connectionTypes/types'; | ||
| import { ProjectObjectType } from '~/concepts/design/utils'; | ||
| import ResourceLabel from '~/pages/projects/screens/detail/connections/ResourceLabel'; | ||
| import { getDisplayNameFromK8sResource } from '~/concepts/k8s/utils'; | ||
|
|
||
| type Props = { | ||
| connection: Connection; | ||
| }; | ||
|
|
||
| const ConnectedResources: React.FC<Props> = ({ connection }) => { | ||
| const { notebooks: connectedNotebooks, loaded: notebooksLoaded } = useRelatedNotebooks( | ||
| ConnectedNotebookContext.EXISTING_DATA_CONNECTION, | ||
| connection.metadata.name, | ||
| ); | ||
|
|
||
| if (!connectedNotebooks.length) { | ||
| return '-'; | ||
| } | ||
|
|
||
| if (!notebooksLoaded) { | ||
| return <Spinner size="sm" />; | ||
| } | ||
|
|
||
| return ( | ||
| <LabelGroup> | ||
| {connectedNotebooks.map((notebook) => ( | ||
| <ResourceLabel | ||
| key={notebook.metadata.name} | ||
| resourceType={ProjectObjectType.notebook} | ||
| title={getDisplayNameFromK8sResource(notebook)} | ||
| /> | ||
| ))} | ||
| </LabelGroup> | ||
| ); | ||
| }; | ||
|
|
||
| export default ConnectedResources; | ||
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
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,17 @@ | ||
| import * as React from 'react'; | ||
| import { Label } from '@patternfly/react-core'; | ||
| import { ProjectObjectType } from '~/concepts/design/utils'; | ||
| import TypedObjectIcon from '~/concepts/design/TypedObjectIcon'; | ||
|
|
||
| type Props = { | ||
| title: string; | ||
| resourceType: ProjectObjectType; | ||
| }; | ||
|
|
||
| const ResourceLabel: React.FC<Props> = ({ title, resourceType }) => ( | ||
| <Label variant="outline" icon={<TypedObjectIcon resourceType={resourceType} useTypedColor />}> | ||
| {title} | ||
| </Label> | ||
| ); | ||
|
|
||
| export default ResourceLabel; |
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,47 @@ | ||
| import React, { act } from 'react'; | ||
| import '@testing-library/jest-dom'; | ||
| import { fireEvent, render, screen } from '@testing-library/react'; | ||
| import { ConnectionsDeleteModal } from '~/pages/projects/screens/detail/connections/ConnectionsDeleteModal'; | ||
| import { mockConnection } from '~/__mocks__/mockConnection'; | ||
| import { useRelatedNotebooks } from '~/pages/projects/notebook/useRelatedNotebooks'; | ||
| import { mockNotebookK8sResource } from '~/__mocks__'; | ||
|
|
||
| jest.mock('~/pages/projects/notebook/useRelatedNotebooks', () => ({ | ||
| ...jest.requireActual('~/pages/projects/notebook/useRelatedNotebooks'), | ||
| useRelatedNotebooks: jest.fn(), | ||
| })); | ||
|
|
||
| const useRelatedNotebooksMock = useRelatedNotebooks as jest.Mock; | ||
|
|
||
| describe('Delete connection modal', () => { | ||
| const onDelete = jest.fn(); | ||
| const onClose = jest.fn(); | ||
|
|
||
| beforeEach(() => { | ||
| useRelatedNotebooksMock.mockReturnValue({ | ||
| notebooks: [ | ||
| mockNotebookK8sResource({ name: 'connected-notebook', displayName: 'Connected notebook' }), | ||
| mockNotebookK8sResource({ name: 'another-notebook', displayName: 'Another notebook' }), | ||
| ], | ||
| loaded: true, | ||
| }); | ||
| }); | ||
|
|
||
| it('should show related resources', async () => { | ||
| const deleteConnection = mockConnection({ displayName: 'connection1', description: 'desc1' }); | ||
|
|
||
| render( | ||
| <ConnectionsDeleteModal | ||
| deleteConnection={deleteConnection} | ||
| onClose={onClose} | ||
| onDelete={onDelete} | ||
| />, | ||
| ); | ||
|
|
||
| const notebooksCountBadge = screen.getByTestId('connections-delete-notebooks-count'); | ||
| expect(notebooksCountBadge).toHaveTextContent('2'); | ||
| await act(() => fireEvent.click(notebooksCountBadge)); | ||
|
|
||
| expect(screen.getAllByTestId('connections-delete-notebooks-item')).toHaveLength(2); | ||
| }); | ||
| }); |
Oops, something went wrong.