Fix showing New requirement button to unauthenticated user

ee/app/assets/javascripts/requirements/components/requirements_empty_state.vue

@@ -22,6 +22,10 @@ export default {
       type: Object,
       required: true,
     },
+    canCreateRequirement: {
+      type: Boolean,
+      required: true,
+    },
   },
   computed: {
     emptyStateTitle() {
@@ -48,7 +52,7 @@ export default {
       :title="emptyStateTitle"
       :description="emptyStateDescription"
     >
-      <template v-if="emptyStateDescription" #actions>
+      <template v-if="emptyStateDescription && canCreateRequirement" #actions>
         <gl-deprecated-button
           category="primary"
           variant="success"

ee/app/assets/javascripts/requirements/components/requirements_root.vue

@@ -60,6 +60,10 @@ export default {
       type: String,
       required: true,
     },
+    canCreateRequirement: {
+      type: Boolean,
+      required: true,
+    },
     requirementsWebUrl: {
       type: String,
       required: true,
@@ -429,6 +433,7 @@ export default {
       :filter-by="filterBy"
       :empty-state-path="emptyStatePath"
       :requirements-count="requirementsCount"
+      :can-create-requirement="canCreateRequirement"
       @clickNewRequirement="handleNewRequirementClick"
     />
     <requirements-loading

ee/app/assets/javascripts/requirements/requirements_bundle.js

@@ -48,6 +48,7 @@ export default () => {
         opened,
         archived,
         all,
+        canCreateRequirement,
         requirementsWebUrl,
       } = el.dataset;
       const stateFilterBy = filterBy ? FilterState[filterBy] : FilterState.opened;
@@ -68,6 +69,7 @@ export default () => {
         next,
         emptyStatePath,
         projectPath,
+        canCreateRequirement,
         requirementsWebUrl,
       };
     },
@@ -81,6 +83,7 @@ export default () => {
           prev: this.prev,
           next: this.next,
           emptyStatePath: this.emptyStatePath,
+          canCreateRequirement: this.canCreateRequirement,
           requirementsWebUrl: this.requirementsWebUrl,
         },
       });

ee/app/views/projects/requirements/index.html.haml

@@ -50,6 +50,7 @@
   archived: requirements_count['archived'],
   all: total_requirements,
   requirements_web_url: project_requirements_path(@project),
+  can_create_requirement: can?(current_user, :create_requirement, @project),
   empty_state_path: image_path('illustrations/empty-state/empty-requirements-lg.svg') } }
   - if current_tab_count == 0
     -# Show regular spinner only when there will be no

ee/changelogs/unreleased/214991-fix-showing-new-requirement-button-to-unauthenticated-user.yml

+---
+title: Fix showing New requirement button to unauthenticated user.
+merge_request: 30085
+author: Gilang Gumilar
+type: fixed

ee/spec/frontend/requirements/components/requirements_empty_state_spec.js

@@ -4,19 +4,18 @@ import { GlEmptyState, GlDeprecatedButton } from '@gitlab/ui';
 import RequirementsEmptyState from 'ee/requirements/components/requirements_empty_state.vue';
 import { FilterState } from 'ee/requirements/constants';
 
-const createComponent = (
-  filterBy = FilterState.opened,
-  emptyStatePath = '/assets/illustrations/empty-state/requirements.svg',
-) =>
+const createComponent = (props = {}) =>
   shallowMount(RequirementsEmptyState, {
     propsData: {
-      filterBy,
-      emptyStatePath,
+      filterBy: FilterState.opened,
+      emptyStatePath: '/assets/illustrations/empty-state/requirements.svg',
       requirementsCount: {
         OPENED: 0,
         ARCHIVED: 0,
         ALL: 0,
       },
+      canCreateRequirement: true,
+      ...props,
     },
     stubs: { GlEmptyState },
   });
@@ -128,5 +127,17 @@ describe('RequirementsEmptyState', () => {
         expect(newReqButton.exists()).toBe(false);
       });
     });
+
+    it('does not render new requirement button when user is not authenticated', () => {
+      wrapper = createComponent({
+        canCreateRequirement: false,
+      });
+
+      return wrapper.vm.$nextTick(() => {
+        const newReqButton = wrapper.find(GlDeprecatedButton);
+
+        expect(newReqButton.exists()).toBe(false);
+      });
+    });
   });
 });

ee/spec/frontend/requirements/components/requirements_root_spec.js

@@ -47,6 +47,7 @@ const createComponent = ({
   showCreateRequirement = false,
   emptyStatePath = '/assets/illustrations/empty-state/requirements.svg',
   loading = false,
+  canCreateRequirement = true,
   requirementsWebUrl = '/gitlab-org/gitlab-shell/-/requirements',
 } = {}) =>
   shallowMount(RequirementsRoot, {
@@ -56,6 +57,7 @@ const createComponent = ({
       requirementsCount,
       showCreateRequirement,
       emptyStatePath,
+      canCreateRequirement,
       requirementsWebUrl,
     },
     mocks: {