-
Notifications
You must be signed in to change notification settings - Fork 358
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
feat: [M3-8229] - Volume & Images search and filtering (#10570)
* Initial commit: search implementation * Cleaner logic * improve code and expand to images * e2e coverage * cleanup * type fixes post rebase * feedback @bnussman-akamai * Added changeset: Volume & Images landing pages search and filtering * feedback @bnussman-akamai * more changes from feedback * cleanup * fix empty state * moar cleanup * moar cleanup * code readability
- Loading branch information
1 parent
b078966
commit 4ac62db
Showing
7 changed files
with
321 additions
and
38 deletions.
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,5 @@ | ||
| --- | ||
| "@linode/manager": Added | ||
| --- | ||
|
|
||
| Volume & Images landing pages search and filtering ([#10570](https://github.com/linode/manager/pull/10570)) |
79 changes: 79 additions & 0 deletions
79
packages/manager/cypress/e2e/core/images/search-images.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,79 @@ | ||
| import { createImage } from '@linode/api-v4/lib/images'; | ||
| import { createTestLinode } from 'support/util/linodes'; | ||
| import { ui } from 'support/ui'; | ||
|
|
||
| import { authenticate } from 'support/api/authentication'; | ||
| import { randomLabel } from 'support/util/random'; | ||
| import { cleanUp } from 'support/util/cleanup'; | ||
| import type { Image, Linode } from '@linode/api-v4'; | ||
| import { interceptGetLinodeDisks } from 'support/intercepts/linodes'; | ||
|
|
||
| authenticate(); | ||
| describe('Search Images', () => { | ||
| before(() => { | ||
| cleanUp(['linodes', 'images']); | ||
| }); | ||
|
|
||
| /* | ||
| * - Confirm that images are API searchable and filtered in the UI. | ||
| */ | ||
| it('creates two images and make sure they show up in the table and are searchable', () => { | ||
| cy.defer( | ||
| () => | ||
| createTestLinode( | ||
| { image: 'linode/debian10', region: 'us-east' }, | ||
| { waitForDisks: true } | ||
| ), | ||
| 'create linode' | ||
| ).then((linode: Linode) => { | ||
| interceptGetLinodeDisks(linode.id).as('getLinodeDisks'); | ||
|
|
||
| cy.visitWithLogin(`/linodes/${linode.id}/storage`); | ||
| cy.wait('@getLinodeDisks').then((xhr) => { | ||
| const disks = xhr.response?.body.data; | ||
| const disk_id = disks[0].id; | ||
|
|
||
| const createTwoImages = async (): Promise<[Image, Image]> => { | ||
| return Promise.all([ | ||
| createImage({ | ||
| disk_id, | ||
| label: randomLabel(), | ||
| }), | ||
| createImage({ | ||
| disk_id, | ||
| label: randomLabel(), | ||
| }), | ||
| ]); | ||
| }; | ||
|
|
||
| cy.defer(() => createTwoImages(), 'creating images').then( | ||
| ([image1, image2]) => { | ||
| cy.visitWithLogin('/images'); | ||
|
|
||
| // Confirm that both images are listed on the landing page. | ||
| cy.contains(image1.label).should('be.visible'); | ||
| cy.contains(image2.label).should('be.visible'); | ||
|
|
||
| // Search for the first image by label, confirm it's the only one shown. | ||
| cy.findByPlaceholderText('Search Images').type(image1.label); | ||
| expect(cy.contains(image1.label).should('be.visible')); | ||
| expect(cy.contains(image2.label).should('not.exist')); | ||
|
|
||
| // Clear search, confirm both images are shown. | ||
| cy.findByTestId('clear-images-search').click(); | ||
| cy.contains(image1.label).should('be.visible'); | ||
| cy.contains(image2.label).should('be.visible'); | ||
|
|
||
| // Use the main search bar to search and filter images | ||
| cy.get('[id="main-search"').type(image2.label); | ||
| ui.autocompletePopper.findByTitle(image2.label).click(); | ||
|
|
||
| // Confirm that only the second image is shown. | ||
| cy.contains(image1.label).should('not.exist'); | ||
| cy.contains(image2.label).should('be.visible'); | ||
| } | ||
| ); | ||
| }); | ||
| }); | ||
| }); | ||
| }); |
62 changes: 62 additions & 0 deletions
62
packages/manager/cypress/e2e/core/volumes/search-volumes.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,62 @@ | ||
| import { createVolume } from '@linode/api-v4/lib/volumes'; | ||
| import { Volume } from '@linode/api-v4'; | ||
| import { ui } from 'support/ui'; | ||
|
|
||
| import { authenticate } from 'support/api/authentication'; | ||
| import { randomLabel } from 'support/util/random'; | ||
| import { cleanUp } from 'support/util/cleanup'; | ||
|
|
||
| authenticate(); | ||
| describe('Search Volumes', () => { | ||
| before(() => { | ||
| cleanUp(['volumes']); | ||
| }); | ||
|
|
||
| /* | ||
| * - Confirm that volumes are API searchable and filtered in the UI. | ||
| */ | ||
| it('creates two volumes and make sure they show up in the table and are searchable', () => { | ||
| const createTwoVolumes = async (): Promise<[Volume, Volume]> => { | ||
| return Promise.all([ | ||
| createVolume({ | ||
| label: randomLabel(), | ||
| region: 'us-east', | ||
| size: 10, | ||
| }), | ||
| createVolume({ | ||
| label: randomLabel(), | ||
| region: 'us-east', | ||
| size: 10, | ||
| }), | ||
| ]); | ||
| }; | ||
|
|
||
| cy.defer(() => createTwoVolumes(), 'creating volumes').then( | ||
| ([volume1, volume2]) => { | ||
| cy.visitWithLogin('/volumes'); | ||
|
|
||
| // Confirm that both volumes are listed on the landing page. | ||
| cy.findByText(volume1.label).should('be.visible'); | ||
| cy.findByText(volume2.label).should('be.visible'); | ||
|
|
||
| // Search for the first volume by label, confirm it's the only one shown. | ||
| cy.findByPlaceholderText('Search Volumes').type(volume1.label); | ||
| expect(cy.findByText(volume1.label).should('be.visible')); | ||
| expect(cy.findByText(volume2.label).should('not.exist')); | ||
|
|
||
| // Clear search, confirm both volumes are shown. | ||
| cy.findByTestId('clear-volumes-search').click(); | ||
| cy.findByText(volume1.label).should('be.visible'); | ||
| cy.findByText(volume2.label).should('be.visible'); | ||
|
|
||
| // Use the main search bar to search and filter volumes | ||
| cy.get('[id="main-search"').type(volume2.label); | ||
| ui.autocompletePopper.findByTitle(volume2.label).click(); | ||
|
|
||
| // Confirm that only the second volume is shown. | ||
| cy.findByText(volume1.label).should('not.exist'); | ||
| cy.findByText(volume2.label).should('be.visible'); | ||
| } | ||
| ); | ||
| }); | ||
| }); |
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.