From 66d8f55c878fcc12adb4f1abaeaf10f1064f1f8a Mon Sep 17 00:00:00 2001 From: Baban Faraj Date: Mon, 30 Aug 2021 14:05:26 +0000 Subject: [PATCH] Removed confluence, jira, and latest pipeline icon until the links are sent from the backend. It is currently not being sent thus its better not to display icons without href --- src/components/ProjectsSummary.vue | 139 +++++++++++++++++- src/components/Section.vue | 1 + src/views/Projects.vue | 38 +++++ src/views/user/LaunchboardUser.vue | 39 +++++ tests/unit/components/ProjectsSummary.spec.js | 95 ++++++++++++ tests/unit/views/Projects.spec.js | 12 ++ tests/unit/views/user/LaunchboardUser.spec.js | 53 ++++++- 7 files changed, 375 insertions(+), 2 deletions(-) diff --git a/src/components/ProjectsSummary.vue b/src/components/ProjectsSummary.vue index 0cab6f8..c731513 100644 --- a/src/components/ProjectsSummary.vue +++ b/src/components/ProjectsSummary.vue @@ -25,7 +25,13 @@ and star the projects that you are interested in. - + + + + +
+ +
+

+ {{ project.name }} +

+ + + + GitLab repository + + +
+ +
+ + + +
+ Pipeline: {{ project.latestPipeline.name }} +
+ + + + + Latest Pipeline: {{ project.latestPipeline.status }} + + + + {{ job.name }}; + + + + + + @@ -258,6 +351,8 @@ export default { }, data: () => ({ loading: false, + panelView: false, + cardView: true, emptyString: false, error: false, errorMessage: "", @@ -286,6 +381,7 @@ export default { this.emptyString = false; try { const projects = await ProjectService.getProjectsSummary(); + this.failedProjectJobs = this.projects; if (projects) { this.setProjects(projects); } @@ -301,6 +397,21 @@ export default { this.setProjectLoading(false); } }, + setCardView() { + this.panelView = false; + this.cardView = true; + }, + setPanelView() { + this.panelView = true; + this.cardView = false; + }, + retrieveFailedProjectJobsFromFailedPipeline(project) { + if (project.latestPipeline.status === "failed") { + return (project.latestPipeline.jobs || []).filter( + (o) => o.status === "failed" + ); + } + }, }, computed: { filteredProjects() { @@ -330,6 +441,32 @@ export default { .status-icon { width: 24px; height: 24px; + margin-right: 10px; + } + .project-card-header-passed { + background-color: map-get($material-light, "background-accent-1"); + color: map-get($material-light, "secondary-text-color"); + fill: map-get($material-light, "secondary-text-color"); + } + .project-card-header-failed { + background-color: #ff3838; + color: map-get($material-light, "secondary-text-color"); + fill: map-get($material-light, "secondary-text-color"); + } + .project-card-title { + padding-bottom: 20px; + } + .project-card-detail { + padding-top:30px; + padding-bottom: 45px; + padding-left:45px; + padding-right:45px; + } + .card { + min-height: 100%; + min-width: 100%; + max-width: 400px; + margin: auto; } } diff --git a/src/components/Section.vue b/src/components/Section.vue index 6ded8f4..1572826 100644 --- a/src/components/Section.vue +++ b/src/components/Section.vue @@ -20,6 +20,7 @@ Refresh + +
+ + + Card View + + + + Panel View + +
+
+ + + Card View + + + + Panel View + +
@@ -135,6 +168,12 @@ export default { refreshProjectData() { this.$refs.projectSummary.refreshProjects(); }, + cardViewProjects() { + this.$refs.projectSummary.setCardView(); + }, + panelViewProjects() { + this.$refs.projectSummary.setPanelView(); + }, refreshCurriculumSchedule() { this.$refs.curriculumSchedule.refreshCurriculumSchedule(); }, diff --git a/tests/unit/components/ProjectsSummary.spec.js b/tests/unit/components/ProjectsSummary.spec.js index 0c1eb37..c5d9df5 100644 --- a/tests/unit/components/ProjectsSummary.spec.js +++ b/tests/unit/components/ProjectsSummary.spec.js @@ -35,6 +35,101 @@ describe("ProjectsSummary", () => { expect(wrapper.find(".error").exists()).toBe(false); }); + it("should set panelView true and cardView false", () => { + ProjectService.getProjectsSummary = jest.fn(); + // render the component + const wrapper = shallowMount(ProjectsSummary, { + mocks: { + $store: { + state: { + error: {}, + projects: { + list: [], + }, + }, + commit: jest.fn(), + }, + }, + data() { + return { + cardView: true, + panelView: false, + }; + }, + localVue, + vuetify, + }); + wrapper.vm.setPanelView(); + expect( + wrapper.vm.panelView === true && wrapper.vm.cardView === false + ).toBeTruthy(); + }); + + it("should set panelView false and cardView true", () => { + ProjectService.getProjectsSummary = jest.fn(); + // render the component + const wrapper = shallowMount(ProjectsSummary, { + mocks: { + $store: { + state: { + error: {}, + projects: { + list: [], + }, + }, + commit: jest.fn(), + }, + }, + data() { + return { + cardView: true, + panelView: false, + }; + }, + localVue, + vuetify, + }); + wrapper.vm.setCardView(); + expect( + wrapper.vm.panelView === false && wrapper.vm.cardView === true + ).toBeTruthy(); + }); + it("should return only failed jobs from a failed pipeline given a project", () => { + ProjectService.getProjectsSummary = jest.fn(); + // render the component + const wrapper = shallowMount(ProjectsSummary, { + mocks: { + $store: { + state: { + error: {}, + projects: { + list: [], + }, + }, + commit: jest.fn(), + }, + }, + localVue, + vuetify, + }); + const failedProjectJobs = + wrapper.vm.retrieveFailedProjectJobsFromFailedPipeline({ + id: "1", + links: {}, + latestPipeline: { + name: "testPipeline", + status: "failed", + latestPipeline: "", + message: "test", + jobs: [ + { name: "e2e-test", status: "failed", link: "" }, + { name: "e2e-test2", status: "passed", link: "" }, + ], + }, + favorite: true, + }); + expect(failedProjectJobs.length === 1).toBeTruthy(); + }); it("should filter by favorited projects", () => { ProjectService.getProjectsSummary = jest.fn(); // render the component diff --git a/tests/unit/views/Projects.spec.js b/tests/unit/views/Projects.spec.js index 028f4f2..e577958 100644 --- a/tests/unit/views/Projects.spec.js +++ b/tests/unit/views/Projects.spec.js @@ -27,6 +27,18 @@ describe("Projects", () => { wrapper.vm.refreshProjectData(); expect(wrapper.vm.$refs.projectSummary.refreshProjects).toHaveBeenCalled(); }); + it("should call setCardView", async () => { + const wrapper = shallowMount(Projects, { store, localVue }); + wrapper.vm.$refs.projectSummary.setCardView = jest.fn(); + wrapper.vm.cardViewProjects(); + expect(wrapper.vm.$refs.projectSummary.setCardView).toHaveBeenCalled(); + }); + it("should call setPanelView", async () => { + const wrapper = shallowMount(Projects, { store, localVue }); + wrapper.vm.$refs.projectSummary.setPanelView = jest.fn(); + wrapper.vm.panelViewProjects(); + expect(wrapper.vm.$refs.projectSummary.setPanelView).toHaveBeenCalled(); + }); it("should call setProjectLoading", async () => { const wrapper = shallowMount(Projects, { store, localVue }); wrapper.vm.setProjectLoading(true); diff --git a/tests/unit/views/user/LaunchboardUser.spec.js b/tests/unit/views/user/LaunchboardUser.spec.js index ef402c7..d0dc231 100644 --- a/tests/unit/views/user/LaunchboardUser.spec.js +++ b/tests/unit/views/user/LaunchboardUser.spec.js @@ -67,7 +67,58 @@ describe("LaunchboardUser", () => { }; expect(wrapper.vm.showWelcomeMessage).toBe(true); }); - + it("should call setCardView", async () => { + const store = new Vuex.Store({ + state: { + user: { + user: { name: "mock user", permission: Permission.USER }, + }, + userPreferences: { + userPreference: { + darkMode: true, + welcomeMessage: true, + }, + }, + }, + }); + const wrapper = shallowMount(LaunchboardUser, { + mocks: { + $vuetify: { breakpoint: { xsOnly: true } }, + }, + vuetify, + store, + localVue, + }); + wrapper.vm.$refs.projectSummary.setCardView = jest.fn(); + wrapper.vm.cardViewProjects(); + expect(wrapper.vm.$refs.projectSummary.setCardView).toHaveBeenCalled(); + }); + it("should call setPanelView", async () => { + const store = new Vuex.Store({ + state: { + user: { + user: { name: "mock user", permission: Permission.USER }, + }, + userPreferences: { + userPreference: { + darkMode: true, + welcomeMessage: true, + }, + }, + }, + }); + const wrapper = shallowMount(LaunchboardUser, { + mocks: { + $vuetify: { breakpoint: { xsOnly: true } }, + }, + vuetify, + store, + localVue, + }); + wrapper.vm.$refs.projectSummary.setPanelView = jest.fn(); + wrapper.vm.panelViewProjects(); + expect(wrapper.vm.$refs.projectSummary.setPanelView).toHaveBeenCalled(); + }); it("should refresh project data", async () => { const store = new Vuex.Store({ state: { -- GitLab