miel.truyen/nx
1
0
Fork 0
Code Issues Pull Requests Actions 5 Packages Projects Releases Wiki Activity

feat(graph): toggle visibility of all projects in a folder (#12641)

Browse Source 
Co-authored-by: Philip Fulcher <philip@nrwl.io>
This commit is contained in:
Alexander Ciesielski 2022-11-02 05:32:17 +01:00 committed by GitHub
parent 2d84f2565f
commit fc6b85d986
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
3 changed files with 59 additions and 4 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

25
graph/client-e2e/src/integration/app.spec.ts
View File

@ -12,12 +12,13 @@ import {
getSelectProjectsMessage,
getTextFilterInput,
getTextFilterReset,
getToggleAllButtonForFolder,
getUncheckedProjectItems,
getUnfocusProjectButton,
} from '../support/app.po';
import * as nxExamplesJson from '../fixtures/nx-examples.json';
import * as affectedJson from '../fixtures/affected.json';
import * as nxExamplesJson from '../fixtures/nx-examples.json';
describe('graph-client', () => {
before(() => {
@ -229,6 +230,28 @@ describe('graph-client', () => {
});
});
describe('toggle all projects in folder button', () => {
it('should check all projects in folder if at least one project checked', () => {
cy.contains('shared-product-state').scrollIntoView().should('be.visible');
cy.get('[data-project="shared-product-state"]').should('be.visible');
cy.get('[data-project="shared-product-state"]').click({ force: true });
getToggleAllButtonForFolder('shared/product').click({ force: true });
getCheckedProjectItems().should('have.length', 4);
});
it('should check all projects in folder if no projects checked yet', () => {
getToggleAllButtonForFolder('shared').click({ force: true });
getCheckedProjectItems().should('have.length', 5);
});
it('should uncheck all projects in folder if all projects checked yet', () => {
getToggleAllButtonForFolder('shared').click({ force: true });
getCheckedProjectItems().should('have.length', 5);
getToggleAllButtonForFolder('shared').click({ force: true });
getCheckedProjectItems().should('have.length', 0);
});
});
describe('image download button', () => {
it('should be hidden initally', () => {
getImageDownloadButton().should('have.class', 'opacity-0');

3
graph/client-e2e/src/support/app.po.ts
View File

@ -32,3 +32,6 @@ export const getImageDownloadButton = () =>
export const getFocusButtonForProject = (projectName: string) =>
cy.get(`[data-cy="focus-button-${projectName}"]`);
export const getToggleAllButtonForFolder = (folderName: string) =>
cy.get(`[data-cy="toggle-folder-visibility-button-${folderName}"]`);

31
graph/client/src/app/sidebar/project-list.tsx
View File

@ -187,12 +187,41 @@ function SubProjectList({
}
}
function toggleAllProjects(currentlySelected: boolean) {
if (currentlySelected) {
projects.forEach((project) =>
deselectProject(project.projectGraphNode.name)
);
} else {
projects.forEach((project) =>
selectProject(project.projectGraphNode.name)
);
}
}
const allProjectsSelected = projects.every((project) => project.isSelected);
return (
<>
{headerText !== '' ? (
<h3 className="mt-4 cursor-text py-2 text-sm font-semibold uppercase tracking-wide text-slate-800 dark:text-slate-200 lg:text-xs">
<div className="relative mt-4 flex justify-between py-2 text-slate-800 dark:text-slate-200">
<h3 className="cursor-text text-sm font-semibold uppercase tracking-wide lg:text-xs">
{headerText}
</h3>
<span
title={
allProjectsSelected
? `Hide all ${headerText} projects`
: `Show all ${headerText} projects`
}
className="absolute inset-y-0 right-0 flex cursor-pointer items-center text-sm font-semibold uppercase tracking-wide lg:text-xs"
data-cy={`toggle-folder-visibility-button-${headerText}`}
onClick={() => toggleAllProjects(allProjectsSelected)}
>
<EyeIcon className="h-5 w-5"></EyeIcon>
</span>
</div>
) : null}
<ul className="mt-2 -ml-3">
{sortedProjects.map((project) => {