Skip to content

Commit

Permalink
Updating Software/Packages tab on Import Notebook image (#3655)
Browse files Browse the repository at this point in the history
  • Loading branch information
@pnaik1
pnaik1 authored Jan 17, 2025
1 parent 9daf658 commit a489b77
Show file tree
Hide file tree
Showing 7 changed files with 145 additions and 322 deletions.
40 changes: 25 additions & 15 deletions frontend/src/__tests__/cypress/cypress/pages/notebookImageSettings.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -71,12 +71,12 @@ class NotebookImageSettings {

class TabRow extends TableRow {
shouldHaveVersionColumn(name: string) {
this.find().find(`[data-label="Version"]`).contains(name);
this.find().find(`[data-label="Version"]`).find('input').should('have.value', name);
return this;
}

findRemoveContentButton() {
return this.find().findByTestId('remove-displayed-content-button');
findRemoveContentButton(index: number) {
return this.find().findByTestId(`remove-displayed-content-button-${index}`);
}
}

Expand Down Expand Up @@ -118,12 +118,12 @@ class ImportUpdateNotebookImageModal extends Modal {
return this.find().findByTestId('add-software-button');
}

findSoftwareNameInput() {
return this.find().findByTestId('Software-name-input');
findSoftwareNameInput(index: number) {
return this.find().findByTestId(`Software-name-input-${index}`);
}

findSoftwareVersionInput() {
return this.find().findByTestId('Software-version-input');
findSoftwareVersionInput(index: number) {
return this.find().findByTestId(`Software-version-input-${index}`);
}

findErrorMessageAlert() {
Expand All @@ -139,12 +139,12 @@ class ImportUpdateNotebookImageModal extends Modal {
return this.find().findByTestId('add-packages-button');
}

findPackagesNameInput() {
return this.find().findByTestId('Packages-name-input');
findPackagesNameInput(index: number) {
return this.find().findByTestId(`Packages-name-input-${index}`);
}

findPackagesVersionInput() {
return this.find().findByTestId('Packages-version-input');
findPackagesVersionInput(index: number) {
return this.find().findByTestId(`Packages-version-input-${index}`);
}

findSoftwareTable() {
Expand All @@ -155,15 +155,25 @@ class ImportUpdateNotebookImageModal extends Modal {
return cy.findByTestId(`displayed-content-table-packages`);
}

getPackagesRow(name: string) {
getPackagesRow(name: string, index: number) {
return new TabRow(() =>
this.findPackagesTable().find(`[data-label=Packages]`).contains(name).parents('tr'),
this.findPackagesTable()
.find(`[data-label=Packages]`)
.eq(index)
.find('input')
.should('have.value', name)
.parents('tr'),
);
}

getSoftwareRow(name: string) {
getSoftwareRow(name: string, index: number) {
return new TabRow(() =>
this.findSoftwareTable().find(`[data-label=Software]`).contains(name).parents('tr'),
this.findSoftwareTable()
.find(`[data-label=Software]`)
.eq(index)
.find('input')
.should('have.value', name)
.parents('tr'),
);
}

Expand Down
65 changes: 17 additions & 48 deletions .../__tests__/cypress/cypress/tests/mocked/notebookImageSettings/notebookImageSettings.cy.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -122,14 +122,11 @@ describe('Notebook image settings', () => {

// test form is disabled after entering software add form
importNotebookImageModal.findAddSoftwareButton().click();
importNotebookImageModal.findSubmitButton().should('be.disabled');

// test form is enabled after submitting software
importNotebookImageModal.findSoftwareNameInput().type('software');

importNotebookImageModal.findSoftwareVersionInput().type('version');
importNotebookImageModal.findSoftwareNameInput(0).type('software');
importNotebookImageModal.findSoftwareVersionInput(0).type('version');

importNotebookImageModal.findSaveResourceButton('Software').click();
importNotebookImageModal.findSubmitButton().should('be.enabled');

// test resource name validation
Expand All @@ -149,65 +146,38 @@ describe('Notebook image settings', () => {
importNotebookImageModal.k8sNameDescription.findResourceNameInput().clear().type('image');
importNotebookImageModal.findSubmitButton().should('be.enabled');

let notebookImageTabRow = importNotebookImageModal.getSoftwareRow('software');
let notebookImageTabRow = importNotebookImageModal.getSoftwareRow('software', 0);
notebookImageTabRow.shouldHaveVersionColumn('version');

// test adding another software using Enter
importNotebookImageModal.findAddSoftwareResourceButton().click();
importNotebookImageModal.findSoftwareNameInput().type('software-1');
importNotebookImageModal.findSoftwareVersionInput().type('version-1{enter}');
importNotebookImageModal.findSubmitButton().should('be.disabled');
notebookImageTabRow = importNotebookImageModal.getSoftwareRow('software-1');
notebookImageTabRow.shouldHaveVersionColumn('version-1');

// test escaping from the form doesnt add the software
importNotebookImageModal.findSoftwareNameInput().type('software-2{esc}');
importNotebookImageModal.findSoftwareRows().should('not.contain', 'software-2');
importNotebookImageModal.findSoftwareNameInput(1).type('software-1');
importNotebookImageModal.findSoftwareVersionInput(1).type('version-1');

importNotebookImageModal.findSubmitButton().should('be.enabled');
notebookImageTabRow = importNotebookImageModal.getSoftwareRow('software-1', 1);
notebookImageTabRow.shouldHaveVersionColumn('version-1');

// test deleting software
notebookImageTabRow.findRemoveContentButton().click();
notebookImageTabRow.findRemoveContentButton(1).click();
importNotebookImageModal.findSoftwareRows().should('not.contain', 'software-1');

// test packages tab
importNotebookImageModal.findPackagesTab().click();

// test adding packages
// test form is disabled after entering packages add form
// test adding package
importNotebookImageModal.findAddPackagesButton().click();
importNotebookImageModal.findSubmitButton().should('be.disabled');

// test form is enabled after submitting packages
importNotebookImageModal.findPackagesNameInput().type('packages');
importNotebookImageModal.findPackagesVersionInput().type('version');
importNotebookImageModal.findSaveResourceButton('Packages').click();
importNotebookImageModal.findPackagesNameInput(0).type('packages');
importNotebookImageModal.findPackagesVersionInput(0).type('version');
importNotebookImageModal.findSubmitButton().should('be.enabled');
notebookImageTabRow = importNotebookImageModal.getPackagesRow('packages');
notebookImageTabRow = importNotebookImageModal.getPackagesRow('packages', 0);
notebookImageTabRow.shouldHaveVersionColumn('version');

// test adding another packages using Enter
importNotebookImageModal.findAddPackagesResourceButton().click();
importNotebookImageModal.findPackagesNameInput().type('packages-1');
importNotebookImageModal.findPackagesVersionInput().type('version-1{enter}');
importNotebookImageModal.findSubmitButton().should('be.disabled');
notebookImageTabRow = importNotebookImageModal.getPackagesRow('packages-1');
notebookImageTabRow.shouldHaveVersionColumn('version-1');

// test escaping from the form doesnt add the packages
importNotebookImageModal.findPackagesNameInput().type('packages-2{esc}');
importNotebookImageModal.findPackagesRows().should('not.contain', 'packages-2');
importNotebookImageModal.findSubmitButton().should('be.enabled');

// test open packages form blocks cancel, import, close, and tabbing
importNotebookImageModal.findAddPackagesResourceButton().click();
importNotebookImageModal.findCancelButton().should('be.disabled');
importNotebookImageModal.findSubmitButton().should('be.disabled');

//succesfully import notebook image
importNotebookImageModal.findPackagesNameInput().type('packages-3');
importNotebookImageModal.findPackagesVersionInput().type('version');
importNotebookImageModal.findSaveResourceButton('Packages').click();
importNotebookImageModal.findAddPackagesResourceButton().click();
importNotebookImageModal.findPackagesNameInput(1).type('packages-1');
importNotebookImageModal.findPackagesVersionInput(1).type('version-1');
importNotebookImageModal.findSubmitButton().should('be.enabled');

importNotebookImageModal.findSubmitButton().click();
Expand All @@ -224,7 +194,6 @@ describe('Notebook image settings', () => {
packages: [
{ name: 'packages', version: 'version', visible: true },
{ name: 'packages-1', version: 'version-1', visible: true },
{ name: 'packages-3', version: 'version', visible: true },
],
software: [{ name: 'software', version: 'version', visible: true }],
});
Expand All @@ -250,11 +219,11 @@ describe('Notebook image settings', () => {
updateNotebookImageModal.findDescriptionInput().should('have.value', 'A custom notebook image');

// test software and packages have correct values
let notebookImageTabRow = importNotebookImageModal.getSoftwareRow('test-software');
let notebookImageTabRow = importNotebookImageModal.getSoftwareRow('test-software', 0);
notebookImageTabRow.shouldHaveVersionColumn('2.0');

updateNotebookImageModal.findPackagesTab().click();
notebookImageTabRow = importNotebookImageModal.getPackagesRow('test-package');
notebookImageTabRow = importNotebookImageModal.getPackagesRow('test-package', 0);
notebookImageTabRow.shouldHaveVersionColumn('1.0');

// test edit notebook image
Expand Down
52 changes: 5 additions & 47 deletions frontend/src/pages/BYONImages/BYONImageModal/DisplayedContentTabContent.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -17,44 +17,24 @@ type DisplayedContentTabContentProps = {
tabKey: DisplayedContentTab;
resources: BYONImagePackage[];
setResources: React.Dispatch<React.SetStateAction<BYONImagePackage[]>>;
tempResources: BYONImagePackage[];
setTempResources: React.Dispatch<React.SetStateAction<BYONImagePackage[]>>;
editIndex?: number;
setEditIndex: (index?: number) => void;
};

const DisplayedContentTabContent: React.FC<DisplayedContentTabContentProps> = ({
activeKey,
tabKey,
resources,
setResources,
tempResources,
setTempResources,
editIndex,
setEditIndex,
}) => {
const resourceType = tabKey === DisplayedContentTab.SOFTWARE ? 'software' : 'packages';

const addEmptyRow = React.useCallback(() => {
setTempResources((prev) => [
...prev,
{
name: '',
version: '',
visible: true,
},
]);
setEditIndex(tempResources.length);
}, [tempResources.length, setTempResources, setEditIndex]);

return (
<TabContent
id={`tabContent-${tabKey}`}
eventKey={tabKey}
activeKey={activeKey}
hidden={tabKey !== activeKey}
>
{tempResources.length === 0 ? (
{resources.length === 0 ? (
<EmptyState
headingLevel="h2"
icon={PlusCircleIcon}
Expand All @@ -70,38 +50,16 @@ const DisplayedContentTabContent: React.FC<DisplayedContentTabContentProps> = ({
<Button
data-testid={`add-${resourceType}-button`}
variant="secondary"
onClick={addEmptyRow}
onClick={() => {
setResources([...resources, { name: '', version: '', visible: true }]);
}}
>
Add {resourceType}
</Button>
</EmptyStateFooter>
</EmptyState>
) : (
<DisplayedContentTable
tabKey={tabKey}
onReset={() => {
setTempResources([...resources]);
setEditIndex(undefined);
}}
onConfirm={(rowIndex, name, version) => {
const copiedArray = [...tempResources];
copiedArray[rowIndex].name = name;
copiedArray[rowIndex].version = version;
setTempResources(copiedArray);
setResources(copiedArray);
setEditIndex(undefined);
}}
resources={tempResources}
onAdd={addEmptyRow}
editIndex={editIndex}
onEdit={setEditIndex}
onDelete={(index) => {
const copiedArray = [...resources];
copiedArray.splice(index, 1);
setTempResources(copiedArray);
setResources(copiedArray);
}}
/>
<DisplayedContentTable tabKey={tabKey} resources={resources} setResources={setResources} />
)}
</TabContent>
);
Expand Down
Loading

0 comments on commit a489b77

Please sign in to comment.