From 8d942a43ea17da2d440d23f2ad597631664c54a5 Mon Sep 17 00:00:00 2001
From: psjakubowska <psedlak-jakubowska@gitlab.com>
Date: Fri, 6 Dec 2024 12:24:40 +0100
Subject: [PATCH 1/5] Add currentUser query to LockDirectoryButton

Including alert for failed query.

Changelog: changed
EE: true
---
 .../components/lock_directory_button.vue      | 25 +++++----
 .../components/lock_directory_button_spec.js  | 53 ++++++++++++++++---
 ee/spec/frontend/repository/mock_data.js      | 14 +++++
 locale/gitlab.pot                             |  3 --
 4 files changed, 76 insertions(+), 19 deletions(-)

diff --git a/ee/app/assets/javascripts/repository/components/lock_directory_button.vue b/ee/app/assets/javascripts/repository/components/lock_directory_button.vue
index 8891767520635d..1e3e9e747d7080 100644
--- a/ee/app/assets/javascripts/repository/components/lock_directory_button.vue
+++ b/ee/app/assets/javascripts/repository/components/lock_directory_button.vue
@@ -1,7 +1,9 @@
 <script>
 import { GlButton, GlTooltipDirective, GlModal, GlModalDirective } from '@gitlab/ui';
 import { sprintf, __ } from '~/locale';
+import { createAlert } from '~/alert';
 import glFeatureFlagMixin from '~/vue_shared/mixins/gl_feature_flags_mixin';
+import currentUserQuery from '~/graphql_shared/queries/current_user.query.graphql';
 
 export default {
   name: 'LockDirectoryButton',
@@ -37,26 +39,31 @@ export default {
       required: true,
     },
   },
+  apollo: {
+    // eslint-disable-next-line @gitlab/vue-no-undef-apollo-properties
+    currentUser: {
+      query: currentUserQuery,
+      update({ currentUser }) {
+        this.user = { ...currentUser };
+      },
+      error() {
+        createAlert({ message: this.$options.i18n.fetchError });
+      },
+    },
+  },
   data() {
     return {
       canAdminLocks: false,
       canPushCode: false,
       allPathLocks: [],
       pathLock: {},
-      user: {
-        id: 'gid://gitlab/User/1',
-        username: 'root',
-        name: __('Administrator'),
-        avatarUrl: 'https://www.gravatar.com/avatar/e64c7d89f26bd1972efa854d13d7dd61?s=80',
-        webUrl: '/root',
-        webPath: '/root',
-      },
+      user: {},
       isLocked: false,
     };
   },
   computed: {
     showLockButton() {
-      return Boolean(this.glFeatures.fileLocks && this.user.id);
+      return Boolean(this.glFeatures.fileLocks && this.user?.id);
     },
     isLoading() {
       return false;
diff --git a/ee/spec/frontend/repository/components/lock_directory_button_spec.js b/ee/spec/frontend/repository/components/lock_directory_button_spec.js
index 21d9b008ded214..c1208768939789 100644
--- a/ee/spec/frontend/repository/components/lock_directory_button_spec.js
+++ b/ee/spec/frontend/repository/components/lock_directory_button_spec.js
@@ -1,13 +1,34 @@
 import { shallowMount } from '@vue/test-utils';
 import { GlButton, GlSprintf, GlModal } from '@gitlab/ui';
+import Vue from 'vue';
+import VueApollo from 'vue-apollo';
+import createMockApollo from 'helpers/mock_apollo_helper';
 import waitForPromises from 'helpers/wait_for_promises';
+import { createAlert } from '~/alert';
+import currentUserQuery from '~/graphql_shared/queries/current_user.query.graphql';
 import LockDirectoryButton from 'ee_component/repository/components/lock_directory_button.vue';
+import { userMock } from 'ee_jest/repository/mock_data';
+
+Vue.use(VueApollo);
+jest.mock('~/alert');
 
 describe('LockDirectoryButton', () => {
   let wrapper;
+  let fakeApollo;
+
+  const currentUserMockResolver = jest.fn().mockResolvedValue(userMock);
+  const signedOutUserResolver = jest.fn().mockResolvedValue({ data: { currentUser: null } });
+  const currentUserErrorResolver = jest.fn().mockRejectedValue(new Error('Request failed'));
+
+  const createComponent = ({
+    fileLocks = true,
+    props = {},
+    currentUserResolver = currentUserMockResolver,
+  } = {}) => {
+    fakeApollo = createMockApollo([[currentUserQuery, currentUserResolver]]);
 
-  const createComponent = ({ fileLocks = true, props = {} } = {}) => {
     wrapper = shallowMount(LockDirectoryButton, {
+      apolloProvider: fakeApollo,
       provide: {
         glFeatures: {
           fileLocks,
@@ -29,28 +50,34 @@ describe('LockDirectoryButton', () => {
   const findLockDirectoryButton = () => wrapper.findComponent(GlButton);
   const findModal = () => wrapper.findComponent(GlModal);
 
-  beforeEach(() => {
+  beforeEach(async () => {
     createComponent();
+    await waitForPromises();
+  });
+
+  afterEach(() => {
+    fakeApollo = null;
   });
 
   describe('component rendering', () => {
     it('does not render when fileLocks feature is not available', async () => {
       createComponent({ fileLocks: false });
       await waitForPromises();
+
+      expect(currentUserMockResolver).toHaveBeenCalled();
       expect(findLockDirectoryButton().exists()).toBe(false);
     });
 
     it('does not render when user is not logged in', async () => {
-      // temporarily setting the user this way,
-      // will change to mocked query in https://gitlab.com/gitlab-org/gitlab/-/merge_requests/173576
-      wrapper.vm.user = { id: null };
+      createComponent({
+        currentUserResolver: signedOutUserResolver,
+      });
       await waitForPromises();
 
       expect(findLockDirectoryButton().exists()).toBe(false);
     });
 
-    it('renders lock button when feature is available and user logged in', async () => {
-      await waitForPromises();
+    it('renders lock button when feature is available and user logged in', () => {
       expect(findLockDirectoryButton().exists()).toBe(true);
     });
   });
@@ -74,4 +101,16 @@ describe('LockDirectoryButton', () => {
       expect(findModal().text()).toContain(expectedContent);
     });
   });
+
+  describe('alert', () => {
+    it('creates an alert with the correct message, when currentUser query fails', async () => {
+      createComponent({
+        currentUserResolver: currentUserErrorResolver,
+      });
+      await waitForPromises();
+      expect(createAlert).toHaveBeenCalledWith({
+        message: 'An error occurred while fetching lock information, please try again.',
+      });
+    });
+  });
 });
diff --git a/ee/spec/frontend/repository/mock_data.js b/ee/spec/frontend/repository/mock_data.js
index 93d91c1d6b121d..5729e611722832 100644
--- a/ee/spec/frontend/repository/mock_data.js
+++ b/ee/spec/frontend/repository/mock_data.js
@@ -65,3 +65,17 @@ export const headerAppInjected = {
     'https://gitlab.com/example-group/example-project/-/jobs/artifacts/main/download?job=build',
   ],
 };
+
+export const userMock = {
+  data: {
+    currentUser: {
+      __typename: 'CurrentUser',
+      id: 'gid://gitlab/User/1',
+      username: 'root',
+      name: 'Administrator',
+      avatarUrl: 'https://www.gravatar.com/avatar/e64c7d89f26bd1972efa854d13d7dd61?s=80',
+      webUrl: '/root',
+      webPath: '/root',
+    },
+  },
+};
diff --git a/locale/gitlab.pot b/locale/gitlab.pot
index e55303ac214568..2720e93eb759ff 100644
--- a/locale/gitlab.pot
+++ b/locale/gitlab.pot
@@ -4928,9 +4928,6 @@ msgstr ""
 msgid "AdminUsers|user cap"
 msgstr ""
 
-msgid "Administrator"
-msgstr ""
-
 msgid "Administrator Account Setup"
 msgstr ""
 
-- 
GitLab


From 122857a0e0a704d02ce551ff41bcb9fa39dde67d Mon Sep 17 00:00:00 2001
From: psjakubowska <psedlak-jakubowska@gitlab.com>
Date: Fri, 6 Dec 2024 15:28:37 +0100
Subject: [PATCH 2/5] Add projectInfo query for LockDirectoryButton

Changelog: added
EE: true
---
 .../components/lock_directory_button.vue      | 25 +++++++-
 .../queries/project_info.query.graphql        | 12 ++++
 .../components/lock_directory_button_spec.js  | 64 +++++++++++++++++--
 ee/spec/frontend/repository/mock_data.js      | 19 ++++++
 locale/gitlab.pot                             |  3 +
 5 files changed, 117 insertions(+), 6 deletions(-)
 create mode 100644 ee/app/assets/javascripts/repository/queries/project_info.query.graphql

diff --git a/ee/app/assets/javascripts/repository/components/lock_directory_button.vue b/ee/app/assets/javascripts/repository/components/lock_directory_button.vue
index 1e3e9e747d7080..495ee41f2b3dae 100644
--- a/ee/app/assets/javascripts/repository/components/lock_directory_button.vue
+++ b/ee/app/assets/javascripts/repository/components/lock_directory_button.vue
@@ -4,6 +4,7 @@ import { sprintf, __ } from '~/locale';
 import { createAlert } from '~/alert';
 import glFeatureFlagMixin from '~/vue_shared/mixins/gl_feature_flags_mixin';
 import currentUserQuery from '~/graphql_shared/queries/current_user.query.graphql';
+import projectInfoQuery from 'ee_else_ce/repository/queries/project_info.query.graphql';
 
 export default {
   name: 'LockDirectoryButton',
@@ -40,6 +41,22 @@ export default {
     },
   },
   apollo: {
+    // eslint-disable-next-line @gitlab/vue-no-undef-apollo-properties
+    projectInfo: {
+      query: projectInfoQuery,
+      variables() {
+        return {
+          projectPath: this.projectPath,
+        };
+      },
+      update({ project }) {
+        this.canAdminLocks = project.userPermissions.adminPathLocks;
+        this.canPushCode = project.userPermissions.pushCode;
+      },
+      error() {
+        createAlert({ message: this.$options.i18n.fetchError });
+      },
+    },
     // eslint-disable-next-line @gitlab/vue-no-undef-apollo-properties
     currentUser: {
       query: currentUserQuery,
@@ -66,7 +83,7 @@ export default {
       return Boolean(this.glFeatures.fileLocks && this.user?.id);
     },
     isLoading() {
-      return false;
+      return this.$apollo?.queries.projectInfo.loading;
     },
     buttonLabel() {
       return this.isLocked ? __('Unlock') : __('Lock');
@@ -75,9 +92,13 @@ export default {
       return this.isLocked ? 'unlock' : 'lock';
     },
     isDisabled() {
-      return false;
+      return !this.canAdminLocks || !this.canPushCode;
     },
     tooltipText() {
+      if (!this.canPushCode) {
+        return __('You do not have permission to lock this');
+      }
+
       return '';
     },
     modalId() {
diff --git a/ee/app/assets/javascripts/repository/queries/project_info.query.graphql b/ee/app/assets/javascripts/repository/queries/project_info.query.graphql
new file mode 100644
index 00000000000000..712471c4d1b2ec
--- /dev/null
+++ b/ee/app/assets/javascripts/repository/queries/project_info.query.graphql
@@ -0,0 +1,12 @@
+query getProjectInfoEE($projectPath: ID!) {
+  project(fullPath: $projectPath) {
+    id
+    userPermissions {
+      pushCode
+      downloadCode
+      createMergeRequestIn
+      forkProject
+      adminPathLocks
+    }
+  }
+}
diff --git a/ee/spec/frontend/repository/components/lock_directory_button_spec.js b/ee/spec/frontend/repository/components/lock_directory_button_spec.js
index c1208768939789..fd4574defc7ae8 100644
--- a/ee/spec/frontend/repository/components/lock_directory_button_spec.js
+++ b/ee/spec/frontend/repository/components/lock_directory_button_spec.js
@@ -5,9 +5,10 @@ import VueApollo from 'vue-apollo';
 import createMockApollo from 'helpers/mock_apollo_helper';
 import waitForPromises from 'helpers/wait_for_promises';
 import { createAlert } from '~/alert';
+import projectInfoQuery from 'ee_component/repository/queries/project_info.query.graphql';
 import currentUserQuery from '~/graphql_shared/queries/current_user.query.graphql';
 import LockDirectoryButton from 'ee_component/repository/components/lock_directory_button.vue';
-import { userMock } from 'ee_jest/repository/mock_data';
+import { projectMock, userPermissionsMock, userMock } from 'ee_jest/repository/mock_data';
 
 Vue.use(VueApollo);
 jest.mock('~/alert');
@@ -20,12 +21,19 @@ describe('LockDirectoryButton', () => {
   const signedOutUserResolver = jest.fn().mockResolvedValue({ data: { currentUser: null } });
   const currentUserErrorResolver = jest.fn().mockRejectedValue(new Error('Request failed'));
 
+  const projectInfoQueryMockResolver = jest.fn().mockResolvedValue(projectMock);
+  const projectInfoQueryErrorResolver = jest.fn().mockRejectedValue(new Error('Request failed'));
+
   const createComponent = ({
     fileLocks = true,
     props = {},
+    projectInfoResolver = projectInfoQueryMockResolver,
     currentUserResolver = currentUserMockResolver,
   } = {}) => {
-    fakeApollo = createMockApollo([[currentUserQuery, currentUserResolver]]);
+    fakeApollo = createMockApollo([
+      [projectInfoQuery, projectInfoResolver],
+      [currentUserQuery, currentUserResolver],
+    ]);
 
     wrapper = shallowMount(LockDirectoryButton, {
       apolloProvider: fakeApollo,
@@ -59,7 +67,7 @@ describe('LockDirectoryButton', () => {
     fakeApollo = null;
   });
 
-  describe('component rendering', () => {
+  describe('lock button', () => {
     it('does not render when fileLocks feature is not available', async () => {
       createComponent({ fileLocks: false });
       await waitForPromises();
@@ -77,9 +85,41 @@ describe('LockDirectoryButton', () => {
       expect(findLockDirectoryButton().exists()).toBe(false);
     });
 
-    it('renders lock button when feature is available and user logged in', () => {
+    it('renders when feature is available and user logged in', () => {
       expect(findLockDirectoryButton().exists()).toBe(true);
     });
+
+    it('renders with loading state util query fetches projects info', async () => {
+      createComponent({
+        projectInfoResolver: projectInfoQueryMockResolver.mockReturnValue(new Promise(() => {})),
+      });
+      await waitForPromises();
+      expect(projectInfoQueryMockResolver).toHaveBeenCalled();
+      expect(findLockDirectoryButton().props('loading')).toBe(true);
+    });
+
+    it('renders disabled with correct tooltip if user does not have permissions to push code', async () => {
+      const projectWithNoPushPermission = {
+        ...projectMock,
+        data: {
+          project: {
+            ...projectMock.data.project,
+            userPermissions: {
+              ...userPermissionsMock,
+              pushCode: false,
+            },
+          },
+        },
+      };
+      createComponent({
+        projectInfoResolver: jest.fn().mockResolvedValue(projectWithNoPushPermission),
+      });
+      await waitForPromises();
+
+      expect(findLockDirectoryButton().text()).toBe('Lock');
+      expect(findLockDirectoryButton().props('disabled')).toBe(true);
+      expect(wrapper.attributes('title')).toBe('You do not have permission to lock this');
+    });
   });
 
   describe('modal', () => {
@@ -89,6 +129,12 @@ describe('LockDirectoryButton', () => {
       expect(findModal().exists()).toBe(true);
     });
 
+    it('has a unique modal id', async () => {
+      findLockDirectoryButton().trigger('click');
+      await waitForPromises();
+      expect(findModal().props('modalId')).toBe('lock-directory-modal-app-models');
+    });
+
     it.each`
       locked   | expectedContent
       ${true}  | ${'Are you sure you want to unlock this directory?'}
@@ -103,6 +149,16 @@ describe('LockDirectoryButton', () => {
   });
 
   describe('alert', () => {
+    it('creates an alert with the correct message, when projectInfo query fails', async () => {
+      createComponent({
+        projectInfoResolver: projectInfoQueryErrorResolver,
+      });
+      await waitForPromises();
+      expect(createAlert).toHaveBeenCalledWith({
+        message: 'An error occurred while fetching lock information, please try again.',
+      });
+    });
+
     it('creates an alert with the correct message, when currentUser query fails', async () => {
       createComponent({
         currentUserResolver: currentUserErrorResolver,
diff --git a/ee/spec/frontend/repository/mock_data.js b/ee/spec/frontend/repository/mock_data.js
index 5729e611722832..8740d7dcc12551 100644
--- a/ee/spec/frontend/repository/mock_data.js
+++ b/ee/spec/frontend/repository/mock_data.js
@@ -66,6 +66,25 @@ export const headerAppInjected = {
   ],
 };
 
+export const userPermissionsMock = {
+  pushCode: true,
+  forkProject: true,
+  downloadCode: true,
+  createMergeRequestIn: true,
+  adminPathLocks: true,
+  __typename: 'ProjectPermissions',
+};
+
+export const projectMock = {
+  data: {
+    project: {
+      __typename: 'Project',
+      id: 'gid://gitlab/Project/7',
+      userPermissions: userPermissionsMock,
+    },
+  },
+};
+
 export const userMock = {
   data: {
     currentUser: {
diff --git a/locale/gitlab.pot b/locale/gitlab.pot
index 2720e93eb759ff..0eb34c9cfd867a 100644
--- a/locale/gitlab.pot
+++ b/locale/gitlab.pot
@@ -64109,6 +64109,9 @@ msgstr ""
 msgid "You do not have permission to leave this %{namespaceType}."
 msgstr ""
 
+msgid "You do not have permission to lock this"
+msgstr ""
+
 msgid "You do not have permission to run a pipeline on this branch."
 msgstr ""
 
-- 
GitLab


From 519df109275eb2f70c5fd79d78a15710f80ea05b Mon Sep 17 00:00:00 2001
From: psjakubowska <psedlak-jakubowska@gitlab.com>
Date: Mon, 9 Dec 2024 14:06:01 +0100
Subject: [PATCH 3/5] Reduce complexity for modal content

---
 .../repository/components/lock_directory_button.vue       | 8 ++++----
 locale/gitlab.pot                                         | 3 ---
 2 files changed, 4 insertions(+), 7 deletions(-)

diff --git a/ee/app/assets/javascripts/repository/components/lock_directory_button.vue b/ee/app/assets/javascripts/repository/components/lock_directory_button.vue
index 495ee41f2b3dae..f7a390682d841e 100644
--- a/ee/app/assets/javascripts/repository/components/lock_directory_button.vue
+++ b/ee/app/assets/javascripts/repository/components/lock_directory_button.vue
@@ -1,6 +1,6 @@
 <script>
 import { GlButton, GlTooltipDirective, GlModal, GlModalDirective } from '@gitlab/ui';
-import { sprintf, __ } from '~/locale';
+import { __ } from '~/locale';
 import { createAlert } from '~/alert';
 import glFeatureFlagMixin from '~/vue_shared/mixins/gl_feature_flags_mixin';
 import currentUserQuery from '~/graphql_shared/queries/current_user.query.graphql';
@@ -105,9 +105,9 @@ export default {
       return `lock-directory-modal-${this.path.replaceAll('/', '-')}`;
     },
     modalContent() {
-      return sprintf(__('Are you sure you want to %{action} this directory?'), {
-        action: this.buttonLabel.toLowerCase(),
-      });
+      return this.isLocked
+        ? __('Are you sure you want to unlock this directory?')
+        : __('Are you sure you want to lock this directory?');
     },
   },
   methods: {
diff --git a/locale/gitlab.pot b/locale/gitlab.pot
index 0eb34c9cfd867a..88ecb3a09eaf7f 100644
--- a/locale/gitlab.pot
+++ b/locale/gitlab.pot
@@ -7449,9 +7449,6 @@ msgstr ""
 msgid "Are you sure you want to %{action} %{name}?"
 msgstr ""
 
-msgid "Are you sure you want to %{action} this directory?"
-msgstr ""
-
 msgid "Are you sure you want to approve %{user}?"
 msgstr ""
 
-- 
GitLab


From 31d42f8aa392ec928cd4d4d824853e3b2cdf05c0 Mon Sep 17 00:00:00 2001
From: psjakubowska <psedlak-jakubowska@gitlab.com>
Date: Tue, 10 Dec 2024 15:28:32 +0100
Subject: [PATCH 4/5] Address review feedback

---
 .../javascripts/repository/queries/project_info.query.graphql  | 3 +++
 .../repository/components/lock_directory_button_spec.js        | 2 +-
 2 files changed, 4 insertions(+), 1 deletion(-)

diff --git a/ee/app/assets/javascripts/repository/queries/project_info.query.graphql b/ee/app/assets/javascripts/repository/queries/project_info.query.graphql
index 712471c4d1b2ec..cf52f41597a522 100644
--- a/ee/app/assets/javascripts/repository/queries/project_info.query.graphql
+++ b/ee/app/assets/javascripts/repository/queries/project_info.query.graphql
@@ -1,3 +1,5 @@
+#import "ee_else_ce/repository/queries/path_locks.fragment.graphql"
+
 query getProjectInfoEE($projectPath: ID!) {
   project(fullPath: $projectPath) {
     id
@@ -8,5 +10,6 @@ query getProjectInfoEE($projectPath: ID!) {
       forkProject
       adminPathLocks
     }
+    ...ProjectPathLocksFragment
   }
 }
diff --git a/ee/spec/frontend/repository/components/lock_directory_button_spec.js b/ee/spec/frontend/repository/components/lock_directory_button_spec.js
index fd4574defc7ae8..8eee7a5b553a40 100644
--- a/ee/spec/frontend/repository/components/lock_directory_button_spec.js
+++ b/ee/spec/frontend/repository/components/lock_directory_button_spec.js
@@ -89,7 +89,7 @@ describe('LockDirectoryButton', () => {
       expect(findLockDirectoryButton().exists()).toBe(true);
     });
 
-    it('renders with loading state util query fetches projects info', async () => {
+    it('renders with loading state until query fetches projects info', async () => {
       createComponent({
         projectInfoResolver: projectInfoQueryMockResolver.mockReturnValue(new Promise(() => {})),
       });
-- 
GitLab


From 760f7da202047630a001d4d17532d6b8bae7fdec Mon Sep 17 00:00:00 2001
From: psjakubowska <psedlak-jakubowska@gitlab.com>
Date: Wed, 11 Dec 2024 12:59:04 +0100
Subject: [PATCH 5/5] Refactor alerts to one method

---
 .../repository/components/lock_directory_button.vue        | 7 +++++--
 1 file changed, 5 insertions(+), 2 deletions(-)

diff --git a/ee/app/assets/javascripts/repository/components/lock_directory_button.vue b/ee/app/assets/javascripts/repository/components/lock_directory_button.vue
index f7a390682d841e..30d4ccab03b1a2 100644
--- a/ee/app/assets/javascripts/repository/components/lock_directory_button.vue
+++ b/ee/app/assets/javascripts/repository/components/lock_directory_button.vue
@@ -54,7 +54,7 @@ export default {
         this.canPushCode = project.userPermissions.pushCode;
       },
       error() {
-        createAlert({ message: this.$options.i18n.fetchError });
+        this.onFetchError();
       },
     },
     // eslint-disable-next-line @gitlab/vue-no-undef-apollo-properties
@@ -64,7 +64,7 @@ export default {
         this.user = { ...currentUser };
       },
       error() {
-        createAlert({ message: this.$options.i18n.fetchError });
+        this.onFetchError();
       },
     },
   },
@@ -111,6 +111,9 @@ export default {
     },
   },
   methods: {
+    onFetchError() {
+      createAlert({ message: this.$options.i18n.fetchError });
+    },
     toggleLock() {
       this.isLocked = !this.isLocked;
     },
-- 
GitLab