Added project access component and spec56992-project-access-component

Signed-off-by: Ezekiel Kigbo <ekigbo@gitlab.com>

2 files changed, 95 insertions, 0 deletions

diff --git a/app/assets/javascripts/vue_shared/components/projects_list/project_access.vue b/app/assets/javascripts/vue_shared/components/projects_list/project_access.vue
new file mode 100644
index 00000000000..f9c19e863b5
--- /dev/null
+++ b/app/assets/javascripts/vue_shared/components/projects_list/project_access.vue
@@ -0,0 +1,30 @@
+<script>
+export default {
+  props: {
+    isExploreProjectsTab: {
+      type: Boolean,
+      default: false,
+    },
+    accessLevel: {
+      type: Number, // TODO: double check
+      required: true,
+      default: 0,
+    },
+    humanAccess: {
+      type: String, // TODO: double check
+      required: true,
+      default: '',
+    },
+  },
+  computed: {
+    showAccessLevel: function() {
+      return !this.isExploreProjectsTab && this.accessLevel > 0 && this.humanAccess ? true : false;
+    },
+  },
+};
+</script>
+<template>
+  <div v-if="showAccessLevel" class="metadata-info prepend-top-8">
+    <span class="user-access-role d-block">{{humanAccess}}</span>
+  </div>
+</template>
diff --git a/spec/javascripts/vue_shared/components/projects_list/project_access_spec.js b/spec/javascripts/vue_shared/components/projects_list/project_access_spec.js
new file mode 100644
index 00000000000..1b30ee5b105
--- /dev/null
+++ b/spec/javascripts/vue_shared/components/projects_list/project_access_spec.js
@@ -0,0 +1,65 @@
+import Vue from 'vue';
+import ProjectListItem from '~/vue_shared/components/projects_list/project_list_item.vue';
+import ProjectAccess from '~/vue_shared/components/projects_list/project_access.vue';
+import mountComponent from 'spec/helpers/vue_mount_component_helper';
+
+// TODO: move to shallow mount / vue test utils ??
+
+loadJSONFixtures('projects.json');
+const projects = getJSONFixture('projects.json');
+let vm;
+
+const createComponent = (props, defaultComponent = ProjectListItem) => {
+  const Component = Vue.extend(defaultComponent);
+
+  return mountComponent(Component, props);
+};
+
+describe('ProjectAccess', () => {
+  const defaultAccess = 'Maintainer';
+  beforeEach(() => {
+    vm = createComponent(
+      {
+        isExploreProjectsTab: false,
+        accessLevel: 30,
+        humanAccess: defaultAccess,
+      },
+      ProjectAccess,
+    );
+  });
+
+  afterEach(() => {
+    vm.$destroy();
+  });
+
+  it(`renders if we are not on the explore tab and receive 'accessLevel' and 'humanAccess' props`, () => {
+    expect(vm.showAccessLevel).toBe(true);
+    expect(vm.$el.querySelector('.user-access-role').textContent).toBe(defaultAccess);
+  });
+
+  it(`does not render if 'accessLevel' is 0`, () => {
+    vm = createComponent(
+      {
+        isExploreProjectsTab: false,
+        accessLevel: 0,
+        humanAccess: defaultAccess,
+      },
+      ProjectAccess,
+    );
+
+    expect(vm.showAccessLevel).toBe(false);
+  });
+
+  it(`does not render if we are on the explore project tab`, () => {
+    vm = createComponent(
+      {
+        isExploreProjectsTab: true,
+        accessLevel: 0,
+        humanAccess: defaultAccess,
+      },
+      ProjectAccess,
+    );
+
+    expect(vm.showAccessLevel).toBe(false);
+  });
+});