Merge pull request #510 from Normanwqn/project-visibility

Icon to indicate whether a project is published
eecs-autograder · Apr 22, 2024 · 1ba1153 · 1ba1153
2 parents f390314 + 41091bb
commit 1ba1153
Show file tree

Hide file tree

Showing 5 changed files with 78 additions and 2 deletions.
diff --git a/src/components/course_admin/manage_projects/single_project.vue b/src/components/course_admin/manage_projects/single_project.vue
@@ -2,7 +2,13 @@
   <div id="single-project-component">
     <div class="project-wrapper entity">
       <router-link :to="`/web/project/${project.pk}`" class="project-name name info">
-        {{project.name}}
+        <div class="project-name-container">
+          <span class="left-text">{{project.name}}</span>
+          <span class="right-text tool-icon">
+              <i class="fa fa-eye" aria-hidden="true" v-if="project.visible_to_students"></i>
+              <i class="fa fa-eye-slash" aria-hidden="true" v-else></i>
+            </span>
+        </div>
       </router-link>
 
       <div class="toolbox">

diff --git a/src/components/course_view.vue b/src/components/course_view.vue
@@ -14,7 +14,13 @@
         <router-link class="project-name info name"
                       :class="{'round-bottom-corners': !d_globals.user_roles.is_admin}"
                       :to="`/web/project/${project.pk}`">
-          {{project.name}}
+          <div class="project-name-container">
+            <span class="left-text">{{project.name}}</span>
+            <span class="right-text tool-icon" v-if="!d_globals.user_roles.is_student">
+              <i class="fa fa-eye" aria-hidden="true" v-if="project.visible_to_students"></i>
+              <i class="fa fa-eye-slash" aria-hidden="true" v-else></i>
+            </span>
+          </div>
         </router-link>
         <div class="toolbox" v-if="d_globals.user_roles.is_admin">
           <router-link :to="`/web/project_admin/${project.pk}`"

diff --git a/src/styles/components/entity_with_toolbox.scss b/src/styles/components/entity_with_toolbox.scss
@@ -21,6 +21,20 @@ $border-radius: 3px;
         border-bottom-right-radius: $border-radius;
     }
 
+    .project-name-container {
+        display: flex;
+        justify-content: space-between;
+        //padding: 0 .25rem;
+    }
+
+    .left-text {
+        text-align: left;
+    }
+
+    .right-text {
+        text-align: right;
+    }
+
     .name {
         color: black;
         font-size: 1.25rem;

diff --git a/tests/test_components/test_course_admin/test_manage_projects/test_single_project.ts b/tests/test_components/test_course_admin/test_manage_projects/test_single_project.ts
@@ -157,4 +157,19 @@ describe('SingleProject.vue', () => {
         let api_errors = <APIErrors> wrapper.findComponent({ref: 'api_errors'}).vm;
         expect(api_errors.d_api_errors.length).toBe(1);
     });
+
+    test('Visibility icons toggle based on project visibility to students', async () => {
+        // Test when the project is visible to students
+        wrapper.setProps({ project: make_project(course_1.pk, {visible_to_students: true})});
+        await wrapper.vm.$nextTick();
+        expect(wrapper.find('.fa-eye').exists()).toBe(true);
+        expect(wrapper.find('.fa-eye-slash').exists()).toBe(false);
+
+        // Update the project to not visible and check for correct icons
+        wrapper.setProps({ project: make_project(course_1.pk, {visible_to_students: false} )});
+        await wrapper.vm.$nextTick();
+        expect(wrapper.find('.fa-eye').exists()).toBe(false);
+        expect(wrapper.find('.fa-eye-slash').exists()).toBe(true);
+
+    });
 });
diff --git a/tests/test_components/test_course_view.ts b/tests/test_components/test_course_view.ts
@@ -107,4 +107,39 @@ describe('CourseView tests', () => {
         expect(wrapper.findAll('.project').length).toEqual(0);
         expect(wrapper.find('#no-projects-message').exists()).toBe(true);
     });
+
+    test('correct visibility icon is shown for each project', async () => {
+        project1.visible_to_students = true;
+        project2.visible_to_students = false;
+
+        wrapper = mount(CourseView, {
+            stubs: ['router-link', 'router-view'],
+            mocks: {
+                $route
+            }
+        });
+        expect(await wait_for_load(wrapper)).toBe(true);
+
+        expect(wrapper.findAll('.project').length).toEqual(2);
+        expect(wrapper.findAll('.fa-eye').length).toEqual(1);
+        expect(wrapper.findAll('.fa-eye-slash').length).toEqual(1);
+    });
+
+    test('student cannot see the eye icon', async () => {
+        user_roles_stub.returns(
+            Promise.resolve(data_ut.make_user_roles({is_student: true}))
+        );
+
+        wrapper = mount(CourseView, {
+            stubs: ['router-link', 'router-view'],
+            mocks: {
+                $route
+            }
+        });
+        expect(await wait_for_load(wrapper)).toBe(true);
+
+        expect(wrapper.findAll('.project').length).toEqual(2);
+        expect(wrapper.findAll('.fa-eye').length).toEqual(0);
+        expect(wrapper.findAll('.fa-eye-slash').length).toEqual(0);
+    });
 });