feat: Organizational Chart

.eslintrc

@@ -154,6 +154,7 @@
 		"before": true,
 		"beforeEach": true,
 		"onScan": true,
+		"html2canvas": true,
 		"extend_cscript": true,
 		"localforage": true,
 	}

.github/workflows/ui-tests.yml

@@ -104,7 +104,7 @@ jobs:
       - name: UI Tests
         run: cd ~/frappe-bench/ && bench --site test_site run-ui-tests erpnext --headless
         env:
-          CYPRESS_RECORD_KEY: ${{ secrets.CYPRESS_RECORD_KEY }}
+          CYPRESS_RECORD_KEY: 60a8e3bf-08f5-45b1-9269-2b207d7d30cd
 
       - name: Show bench console if tests failed
         if: ${{ failure() }}

cypress/integration/test_organizational_chart_desktop.js

@@ -0,0 +1,114 @@
+context('Organizational Chart', () => {
+	before(() => {
+		cy.login();
+		cy.visit('/app/website');
+		cy.awesomebar('Organizational Chart');
+		cy.wait(500);
+		cy.url().should('include', '/organizational-chart');
+
+		cy.window().its('frappe.csrf_token').then(csrf_token => {
+			return cy.request({
+				url: `/api/method/erpnext.tests.ui_test_helpers.create_employee_records`,
+				method: 'POST',
+				headers: {
+					Accept: 'application/json',
+					'Content-Type': 'application/json',
+					'X-Frappe-CSRF-Token': csrf_token
+				},
+				timeout: 60000
+			}).then(res => {
+				expect(res.status).eq(200);
+				cy.get('.frappe-control[data-fieldname=company] input').focus().as('input');
+
+				cy.get('@input')
+					.clear({ force: true })
+					.type('Test Org Chart{enter}', { force: true })
+					.blur({ force: true });
+			});
+		});
+	});
+
+	it('renders root nodes and loads children for the first expandable node', () => {
+		// check rendered root nodes and the node name, title, connections
+		cy.get('.hierarchy').find('.root-level ul.node-children').children()
+			.should('have.length', 2)
+			.first()
+			.as('first-child');
+
+		cy.get('@first-child').get('.node-name').contains('Test Employee 1');
+		cy.get('@first-child').get('.node-info').find('.node-title').contains('CEO');
+		cy.get('@first-child').get('.node-info').find('.node-connections').contains('· 2 Connections');
+
+		cy.call('erpnext.tests.ui_test_helpers.get_employee_records').then(employee_records => {
+			// children of 1st root visible
+			cy.get(`div[data-parent="${employee_records.message[0]}"]`).as('child-node');
+			cy.get('@child-node')
+				.should('have.length', 1)
+				.should('be.visible');
+			cy.get('@child-node').get('.node-name').contains('Test Employee 3');
+
+			// connectors between first root node and immediate child
+			cy.get(`path[data-parent="${employee_records.message[0]}"]`)
+				.should('be.visible')
+				.invoke('attr', 'data-child')
+				.should('equal', employee_records.message[2]);
+		});
+	});
+
+	it('hides active nodes children and connectors on expanding sibling node', () => {
+		cy.call('erpnext.tests.ui_test_helpers.get_employee_records').then(employee_records => {
+			// click sibling
+			cy.get(`#${employee_records.message[1]}`)
+				.click()
+				.should('have.class', 'active');
+
+			// child nodes and connectors hidden
+			cy.get(`[data-parent="${employee_records.message[0]}"]`).should('not.be.visible');
+			cy.get(`path[data-parent="${employee_records.message[0]}"]`).should('not.be.visible');
+		});
+	});
+
+	it('collapses previous level nodes and refreshes connectors on expanding child node', () => {
+		cy.call('erpnext.tests.ui_test_helpers.get_employee_records').then(employee_records => {
+			// click child node
+			cy.get(`#${employee_records.message[3]}`)
+				.click()
+				.should('have.class', 'active');
+
+			// previous level nodes: parent should be on active-path; other nodes should be collapsed
+			cy.get(`#${employee_records.message[0]}`).should('have.class', 'collapsed');
+			cy.get(`#${employee_records.message[1]}`).should('have.class', 'active-path');
+
+			// previous level connectors refreshed
+			cy.get(`path[data-parent="${employee_records.message[1]}"]`)
+				.should('have.class', 'collapsed-connector');
+
+			// child node's children and connectors rendered
+			cy.get(`[data-parent="${employee_records.message[3]}"]`).should('be.visible');
+			cy.get(`path[data-parent="${employee_records.message[3]}"]`).should('be.visible');
+		});
+	});
+
+	it('expands previous level nodes', () => {
+		cy.call('erpnext.tests.ui_test_helpers.get_employee_records').then(employee_records => {
+			cy.get(`#${employee_records.message[0]}`)
+				.click()
+				.should('have.class', 'active');
+
+			cy.get(`[data-parent="${employee_records.message[0]}"]`)
+				.should('be.visible');
+
+			cy.get('ul.hierarchy').children().should('have.length', 2);
+			cy.get(`#connectors`).children().should('have.length', 1);
+		});
+	});
+
+	it('edit node navigates to employee master', () => {
+		cy.call('erpnext.tests.ui_test_helpers.get_employee_records').then(employee_records => {
+			cy.get(`#${employee_records.message[0]}`).find('.btn-edit-node')
+				.click();
+
+			cy.url().should('include', `/employee/${employee_records.message[0]}`);
+		});
+	});
+});

cypress/integration/test_organizational_chart_mobile.js

@@ -0,0 +1,190 @@
+context('Organizational Chart Mobile', () => {
+	before(() => {
+		cy.login();
+		cy.viewport(375, 667);
+		cy.visit('/app/website');
+		cy.awesomebar('Organizational Chart');
+
+		cy.window().its('frappe.csrf_token').then(csrf_token => {
+			return cy.request({
+				url: `/api/method/erpnext.tests.ui_test_helpers.create_employee_records`,
+				method: 'POST',
+				headers: {
+					Accept: 'application/json',
+					'Content-Type': 'application/json',
+					'X-Frappe-CSRF-Token': csrf_token
+				},
+				timeout: 60000
+			}).then(res => {
+				expect(res.status).eq(200);
+				cy.get('.frappe-control[data-fieldname=company] input').focus().as('input');
+				cy.get('@input')
+					.clear({ force: true })
+					.type('Test Org Chart{enter}', { force: true })
+					.blur({ force: true });
+			});
+		});
+	});
+
+	it('renders root nodes', () => {
+		// check rendered root nodes and the node name, title, connections
+		cy.get('.hierarchy-mobile').find('.root-level').children()
+			.should('have.length', 2)
+			.first()
+			.as('first-child');
+
+		cy.get('@first-child').get('.node-name').contains('Test Employee 1');
+		cy.get('@first-child').get('.node-info').find('.node-title').contains('CEO');
+		cy.get('@first-child').get('.node-info').find('.node-connections').contains('· 2');
+	});
+
+	it('expands root node', () => {
+		cy.call('erpnext.tests.ui_test_helpers.get_employee_records').then(employee_records => {
+			cy.get(`#${employee_records.message[1]}`)
+				.click()
+				.should('have.class', 'active');
+
+			// other root node removed
+			cy.get(`#${employee_records.message[0]}`).should('not.exist');
+
+			// children of active root node
+			cy.get('.hierarchy-mobile').find('.level').first().find('ul.node-children').children()
+				.should('have.length', 2);
+
+			cy.get(`div[data-parent="${employee_records.message[1]}"]`).first().as('child-node');
+			cy.get('@child-node').should('be.visible');
+
+			cy.get('@child-node')
+				.get('.node-name')
+				.contains('Test Employee 4');
+
+			// connectors between root node and immediate children
+			cy.get(`path[data-parent="${employee_records.message[1]}"]`).as('connectors');
+			cy.get('@connectors')
+				.should('have.length', 2)
+				.should('be.visible');
+
+			cy.get('@connectors')
+				.first()
+				.invoke('attr', 'data-child')
+				.should('eq', employee_records.message[3]);
+		});
+	});
+
+	it('expands child node', () => {
+		cy.call('erpnext.tests.ui_test_helpers.get_employee_records').then(employee_records => {
+			cy.get(`#${employee_records.message[3]}`)
+				.click()
+				.should('have.class', 'active')
+				.as('expanded_node');
+
+			// 2 levels on screen; 1 on active path; 1 collapsed
+			cy.get('.hierarchy-mobile').children().should('have.length', 2);
+			cy.get(`#${employee_records.message[1]}`).should('have.class', 'active-path');
+
+			// children of expanded node visible
+			cy.get('@expanded_node')
+				.next()
+				.should('have.class', 'node-children')
+				.as('node-children');
+
+			cy.get('@node-children').children().should('have.length', 1);
+			cy.get('@node-children')
+				.first()
+				.get('.node-card')
+				.should('have.class', 'active-child')
+				.contains('Test Employee 7');
+
+			// orphan connectors removed
+			cy.get(`#connectors`).children().should('have.length', 2);
+		});
+	});
+
+	it('renders sibling group', () => {
+		cy.call('erpnext.tests.ui_test_helpers.get_employee_records').then(employee_records => {
+			// sibling group visible for parent
+			cy.get(`#${employee_records.message[1]}`)
+				.next()
+				.as('sibling_group');
+
+			cy.get('@sibling_group')
+				.should('have.attr', 'data-parent', 'undefined')
+				.should('have.class', 'node-group')
+				.and('have.class', 'collapsed');
+
+			cy.get('@sibling_group').get('.avatar-group').children().as('siblings');
+			cy.get('@siblings').should('have.length', 1);
+			cy.get('@siblings')
+				.first()
+				.should('have.attr', 'title', 'Test Employee 1');
+
+		});
+	});
+
+	it('expands previous level nodes', () => {
+		cy.call('erpnext.tests.ui_test_helpers.get_employee_records').then(employee_records => {
+			cy.get(`#${employee_records.message[6]}`)
+				.click()
+				.should('have.class', 'active');
+
+			// clicking on previous level node should remove all the nodes ahead
+			// and expand that node
+			cy.get(`#${employee_records.message[3]}`).click();
+			cy.get(`#${employee_records.message[3]}`)
+				.should('have.class', 'active')
+				.should('not.have.class', 'active-path');
+
+			cy.get(`#${employee_records.message[6]}`).should('have.class', 'active-child');
+			cy.get('.hierarchy-mobile').children().should('have.length', 2);
+			cy.get(`#connectors`).children().should('have.length', 2);
+		});
+	});
+
+	it('expands sibling group', () => {
+		cy.call('erpnext.tests.ui_test_helpers.get_employee_records').then(employee_records => {
+			// sibling group visible for parent
+			cy.get(`#${employee_records.message[6]}`).click();
+
+			cy.get(`#${employee_records.message[3]}`)
+				.next()
+				.click();
+
+			// siblings of parent should be visible
+			cy.get('.hierarchy-mobile').prev().as('sibling_group');
+			cy.get('@sibling_group')
+				.should('exist')
+				.should('have.class', 'sibling-group')
+				.should('not.have.class', 'collapsed');
+
+			cy.get(`#${employee_records.message[1]}`)
+				.should('be.visible')
+				.should('have.class', 'active');
+
+			cy.get(`[data-parent="${employee_records.message[1]}"]`)
+				.should('be.visible')
+				.should('have.length', 2)
+				.should('have.class', 'active-child');
+		});
+	});
+
+	it('goes to the respective level after clicking on non-collapsed sibling group', () => {
+		cy.call('erpnext.tests.ui_test_helpers.get_employee_records').then(() => {
+			// click on non-collapsed sibling group
+			cy.get('.hierarchy-mobile')
+				.prev()
+				.click();
+
+			// should take you to that level
+			cy.get('.hierarchy-mobile').find('li.level .node-card').should('have.length', 2);
+		});
+	});
+
+	it('edit node navigates to employee master', () => {
+		cy.call('erpnext.tests.ui_test_helpers.get_employee_records').then(employee_records => {
+			cy.get(`#${employee_records.message[0]}`).find('.btn-edit-node')
+				.click();
+
+			cy.url().should('include', `/employee/${employee_records.message[0]}`);
+		});
+	});
+});

erpnext/hr/page/organizational_chart/organizational_chart.js

@@ -0,0 +1,21 @@
+frappe.pages['organizational-chart'].on_page_load = function(wrapper) {
+	frappe.ui.make_app_page({
+		parent: wrapper,
+		title: __('Organizational Chart'),
+		single_column: true
+	});
+
+	$(wrapper).bind('show', () => {
+		frappe.require('hierarchy-chart.bundle.js', () => {
+			let organizational_chart = undefined;
+			let method = 'erpnext.hr.page.organizational_chart.organizational_chart.get_children';
+
+			if (frappe.is_mobile()) {
+				organizational_chart = new erpnext.HierarchyChartMobile('Employee', wrapper, method);
+			} else {
+				organizational_chart = new erpnext.HierarchyChart('Employee', wrapper, method);
+			}
+			organizational_chart.show();
+		});
+	});
+};

erpnext/hr/page/organizational_chart/organizational_chart.json

@@ -0,0 +1,26 @@
+{
+ "content": null,
+ "creation": "2021-05-25 10:53:10.107241",
+ "docstatus": 0,
+ "doctype": "Page",
+ "idx": 0,
+ "modified": "2021-05-25 10:53:18.201931",
+ "modified_by": "Administrator",
+ "module": "HR",
+ "name": "organizational-chart",
+ "owner": "Administrator",
+ "page_name": "Organizational Chart",
+ "roles": [
+  {
+   "role": "HR User"
+  },
+  {
+   "role": "HR Manager"
+  }
+ ],
+ "script": null,
+ "standard": "Yes",
+ "style": null,
+ "system_page": 0,
+ "title": "Organizational Chart"
+}