From 5d179730e4592e6cc9d2a9c752a2f33efc84d016 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/8] Add currentUser query to LockDirectoryButton

Including alert for failed query.

Changelog: changed
EE: true
---
 .../repository/components/lock_directory_button_spec.js        | 3 +++
 1 file changed, 3 insertions(+)

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 95c27cf84fcfd0..12f5a54522e062 100644
--- a/ee/spec/frontend/repository/components/lock_directory_button_spec.js
+++ b/ee/spec/frontend/repository/components/lock_directory_button_spec.js
@@ -3,6 +3,9 @@ import { GlButton, GlSprintf, GlModal } from '@gitlab/ui';
 import Vue from 'vue';
 import VueApollo from 'vue-apollo';
 import createMockApollo from 'helpers/mock_apollo_helper';
+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 projectInfoQuery from 'ee_component/repository/queries/project_info.query.graphql';
-- 
GitLab


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

---
 .../javascripts/repository/components/lock_directory_button.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

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 5bcaa29f159700..47d1560653d357 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';
-- 
GitLab


From b2bcb26a0685e1a9bae17a2d7f2c58ba63cc143b Mon Sep 17 00:00:00 2001
From: psjakubowska <psedlak-jakubowska@gitlab.com>
Date: Tue, 10 Dec 2024 16:38:48 +0100
Subject: [PATCH 3/8] Assign type of lock based on the directory path

Changelog: added
EE: true
---
 .../components/lock_directory_button_spec.js  | 32 +++++++++++++++++
 ee/spec/frontend/repository/mock_data.js      | 36 +++++++++++++++++++
 2 files changed, 68 insertions(+)

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 12f5a54522e062..0871e295916f52 100644
--- a/ee/spec/frontend/repository/components/lock_directory_button_spec.js
+++ b/ee/spec/frontend/repository/components/lock_directory_button_spec.js
@@ -364,6 +364,38 @@ describe('LockDirectoryButton', () => {
     });
   });
 
+  describe('lock types', () => {
+    it.each`
+      mock                       | type                  | isExactLock  | isUpstreamLock | isDownstreamLock
+      ${exactDirectoryLock}      | ${'isExactLock'}      | ${true}      | ${undefined}   | ${undefined}
+      ${upstreamDirectoryLock}   | ${'isUpstreamLock'}   | ${undefined} | ${true}        | ${undefined}
+      ${downstreamDirectoryLock} | ${'isDownstreamLock'} | ${undefined} | ${undefined}   | ${true}
+    `(
+      'correctly assigns the lock type as $type depending on PathLock data',
+      async ({ mock, type, isExactLock, isUpstreamLock, isDownstreamLock }) => {
+        createComponent({
+          projectInfoResolver: jest.fn().mockResolvedValue({
+            data: {
+              project: {
+                ...projectMock.data.project,
+                pathLocks: {
+                  __typename: 'PathLockConnection',
+                  nodes: [mock],
+                },
+              },
+            },
+          }),
+        });
+        await waitForPromises();
+
+        expect(wrapper.vm.$data.pathLock[type]).toBe(true);
+        expect(wrapper.vm.$data.pathLock.isExactLock).toBe(isExactLock);
+        expect(wrapper.vm.pathLock.isUpstreamLock).toBe(isUpstreamLock);
+        expect(wrapper.vm.pathLock.isDownstreamLock).toBe(isDownstreamLock);
+      },
+    );
+  });
+
   describe('modal', () => {
     it('shows a modal when clicked', async () => {
       findLockDirectoryButton().trigger('click');
diff --git a/ee/spec/frontend/repository/mock_data.js b/ee/spec/frontend/repository/mock_data.js
index 84433e53f57c94..084d0f01089ae5 100644
--- a/ee/spec/frontend/repository/mock_data.js
+++ b/ee/spec/frontend/repository/mock_data.js
@@ -76,6 +76,7 @@ export const userPermissionsMock = {
 };
 
 export const projectMock = {
+<<<<<<< HEAD
   __typename: 'Project',
   id: 'gid://gitlab/Project/7',
   userPermissions: userPermissionsMock,
@@ -97,6 +98,25 @@ export const projectMock = {
   },
   repository: {
     empty: false,
+=======
+  data: {
+    project: {
+      __typename: 'Project',
+      id: 'gid://gitlab/Project/7',
+      userPermissions: userPermissionsMock,
+    },
+    pathLocks: {
+      __typename: 'PathLockConnection',
+      nodes: [
+        {
+          __typename: 'PathLock',
+          id: 'gid://gitlab/PathLock/2',
+          path: 'locked_file.js',
+          user: { id: 'gid://gitlab/User/1', username: 'root', __typename: 'UserCore' },
+        },
+      ],
+    },
+>>>>>>> 419f2612731e (Assign type of lock based on the directory path)
   },
 };
 
@@ -106,9 +126,15 @@ export const exactDirectoryLock = {
   path: 'test/component',
   user: {
     __typename: 'UserCore',
+<<<<<<< HEAD
     id: 'gid://gitlab/User/2',
     username: 'user2',
     name: 'User2',
+=======
+    id: 'gid://gitlab/User/1',
+    username: 'root',
+    name: 'Administrator',
+>>>>>>> 419f2612731e (Assign type of lock based on the directory path)
   },
 };
 
@@ -119,8 +145,13 @@ export const upstreamDirectoryLock = {
   user: {
     __typename: 'UserCore',
     id: 'gid://gitlab/User/2',
+<<<<<<< HEAD
     username: 'user2',
     name: 'User2',
+=======
+    username: 'user',
+    name: 'User',
+>>>>>>> 419f2612731e (Assign type of lock based on the directory path)
   },
 };
 
@@ -131,8 +162,13 @@ export const downstreamDirectoryLock = {
   user: {
     __typename: 'UserCore',
     id: 'gid://gitlab/User/2',
+<<<<<<< HEAD
     username: 'user2',
     name: 'User2',
+=======
+    username: 'user',
+    name: 'User',
+>>>>>>> 419f2612731e (Assign type of lock based on the directory path)
   },
 };
 
-- 
GitLab


From 434e809158b5be1a8f6dd09f7e8c9ac22c4f94af Mon Sep 17 00:00:00 2001
From: psjakubowska <psedlak-jakubowska@gitlab.com>
Date: Tue, 10 Dec 2024 19:38:40 +0100
Subject: [PATCH 4/8] Bind lock type logic to UI

Display button with correct state and copy, with correct
tooltip based on current user permissions, type of lock
and lock author.

Changelog: added
EE: true
---
 .../components/lock_directory_button.vue      |  2 +-
 .../components/lock_directory_button_spec.js  | 37 +------------------
 ee/spec/frontend/repository/mock_data.js      | 36 ------------------
 3 files changed, 2 insertions(+), 73 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 47d1560653d357..5bcaa29f159700 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 { __ } from '~/locale';
+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';
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 0871e295916f52..89f79b42c26db5 100644
--- a/ee/spec/frontend/repository/components/lock_directory_button_spec.js
+++ b/ee/spec/frontend/repository/components/lock_directory_button_spec.js
@@ -3,9 +3,6 @@ import { GlButton, GlSprintf, GlModal } from '@gitlab/ui';
 import Vue from 'vue';
 import VueApollo from 'vue-apollo';
 import createMockApollo from 'helpers/mock_apollo_helper';
-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 projectInfoQuery from 'ee_component/repository/queries/project_info.query.graphql';
@@ -263,7 +260,7 @@ describe('LockDirectoryButton', () => {
   });
 
   describe('when there is an upstream lock', () => {
-    it('renders a disabled "Unlock" button with a tooltip when user is allowed to unlock', async () => {
+    it('renders a disabled Unlock" button with a tooltip when user is allowed to unlock', async () => {
       createComponent({
         projectInfoResolver: jest.fn().mockResolvedValue({
           data: {
@@ -364,38 +361,6 @@ describe('LockDirectoryButton', () => {
     });
   });
 
-  describe('lock types', () => {
-    it.each`
-      mock                       | type                  | isExactLock  | isUpstreamLock | isDownstreamLock
-      ${exactDirectoryLock}      | ${'isExactLock'}      | ${true}      | ${undefined}   | ${undefined}
-      ${upstreamDirectoryLock}   | ${'isUpstreamLock'}   | ${undefined} | ${true}        | ${undefined}
-      ${downstreamDirectoryLock} | ${'isDownstreamLock'} | ${undefined} | ${undefined}   | ${true}
-    `(
-      'correctly assigns the lock type as $type depending on PathLock data',
-      async ({ mock, type, isExactLock, isUpstreamLock, isDownstreamLock }) => {
-        createComponent({
-          projectInfoResolver: jest.fn().mockResolvedValue({
-            data: {
-              project: {
-                ...projectMock.data.project,
-                pathLocks: {
-                  __typename: 'PathLockConnection',
-                  nodes: [mock],
-                },
-              },
-            },
-          }),
-        });
-        await waitForPromises();
-
-        expect(wrapper.vm.$data.pathLock[type]).toBe(true);
-        expect(wrapper.vm.$data.pathLock.isExactLock).toBe(isExactLock);
-        expect(wrapper.vm.pathLock.isUpstreamLock).toBe(isUpstreamLock);
-        expect(wrapper.vm.pathLock.isDownstreamLock).toBe(isDownstreamLock);
-      },
-    );
-  });
-
   describe('modal', () => {
     it('shows a modal when clicked', async () => {
       findLockDirectoryButton().trigger('click');
diff --git a/ee/spec/frontend/repository/mock_data.js b/ee/spec/frontend/repository/mock_data.js
index 084d0f01089ae5..84433e53f57c94 100644
--- a/ee/spec/frontend/repository/mock_data.js
+++ b/ee/spec/frontend/repository/mock_data.js
@@ -76,7 +76,6 @@ export const userPermissionsMock = {
 };
 
 export const projectMock = {
-<<<<<<< HEAD
   __typename: 'Project',
   id: 'gid://gitlab/Project/7',
   userPermissions: userPermissionsMock,
@@ -98,25 +97,6 @@ export const projectMock = {
   },
   repository: {
     empty: false,
-=======
-  data: {
-    project: {
-      __typename: 'Project',
-      id: 'gid://gitlab/Project/7',
-      userPermissions: userPermissionsMock,
-    },
-    pathLocks: {
-      __typename: 'PathLockConnection',
-      nodes: [
-        {
-          __typename: 'PathLock',
-          id: 'gid://gitlab/PathLock/2',
-          path: 'locked_file.js',
-          user: { id: 'gid://gitlab/User/1', username: 'root', __typename: 'UserCore' },
-        },
-      ],
-    },
->>>>>>> 419f2612731e (Assign type of lock based on the directory path)
   },
 };
 
@@ -126,15 +106,9 @@ export const exactDirectoryLock = {
   path: 'test/component',
   user: {
     __typename: 'UserCore',
-<<<<<<< HEAD
     id: 'gid://gitlab/User/2',
     username: 'user2',
     name: 'User2',
-=======
-    id: 'gid://gitlab/User/1',
-    username: 'root',
-    name: 'Administrator',
->>>>>>> 419f2612731e (Assign type of lock based on the directory path)
   },
 };
 
@@ -145,13 +119,8 @@ export const upstreamDirectoryLock = {
   user: {
     __typename: 'UserCore',
     id: 'gid://gitlab/User/2',
-<<<<<<< HEAD
     username: 'user2',
     name: 'User2',
-=======
-    username: 'user',
-    name: 'User',
->>>>>>> 419f2612731e (Assign type of lock based on the directory path)
   },
 };
 
@@ -162,13 +131,8 @@ export const downstreamDirectoryLock = {
   user: {
     __typename: 'UserCore',
     id: 'gid://gitlab/User/2',
-<<<<<<< HEAD
     username: 'user2',
     name: 'User2',
-=======
-    username: 'user',
-    name: 'User',
->>>>>>> 419f2612731e (Assign type of lock based on the directory path)
   },
 };
 
-- 
GitLab


From b51959d1cf374b61045f17af5067cf74621f8ac4 Mon Sep 17 00:00:00 2001
From: psjakubowska <psedlak-jakubowska@gitlab.com>
Date: Wed, 11 Dec 2024 16:44:08 +0100
Subject: [PATCH 5/8] Correct the UI for the exact lock type

---
 .../repository/components/lock_directory_button_spec.js         | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

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 89f79b42c26db5..95c27cf84fcfd0 100644
--- a/ee/spec/frontend/repository/components/lock_directory_button_spec.js
+++ b/ee/spec/frontend/repository/components/lock_directory_button_spec.js
@@ -260,7 +260,7 @@ describe('LockDirectoryButton', () => {
   });
 
   describe('when there is an upstream lock', () => {
-    it('renders a disabled Unlock" button with a tooltip when user is allowed to unlock', async () => {
+    it('renders a disabled "Unlock" button with a tooltip when user is allowed to unlock', async () => {
       createComponent({
         projectInfoResolver: jest.fn().mockResolvedValue({
           data: {
-- 
GitLab


From 0695a6af1bc9c554a0bf3de0136e2e921f13fc7d Mon Sep 17 00:00:00 2001
From: psjakubowska <psedlak-jakubowska@gitlab.com>
Date: Thu, 12 Dec 2024 15:45:41 +0100
Subject: [PATCH 6/8] Handle locking directory

Call mutation to lock the directory. Reload the page
to mark tree elements as locked. Make sure navigating to
another directory updates lock button to the correct state.

Changelog: added
EE: true
---
 .../components/lock_directory_button.vue      | 30 +++++++++++--
 .../components/lock_directory_button_spec.js  | 42 +++++++++++++++++++
 ee/spec/frontend/repository/mock_data.js      | 23 ++++++++++
 3 files changed, 92 insertions(+), 3 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 5bcaa29f159700..4c9ba94dd9dd63 100644
--- a/ee/app/assets/javascripts/repository/components/lock_directory_button.vue
+++ b/ee/app/assets/javascripts/repository/components/lock_directory_button.vue
@@ -5,6 +5,7 @@ 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';
+import lockPathMutation from '~/repository/mutations/lock_path.mutation.graphql';
 
 export default {
   name: 'LockDirectoryButton',
@@ -116,7 +117,7 @@ export default {
           locker: this.locker,
         });
       }
-      return this.pathLock.user.id === this.user.id
+      return this.pathLock.user?.id === this.user.id
         ? ''
         : sprintf(__('Locked by %{locker}'), { locker: this.locker });
     },
@@ -170,6 +171,15 @@ export default {
         : __('Are you sure you want to lock this directory?');
     },
   },
+  watch: {
+    async path() {
+      try {
+        await this.$apollo.queries.projectInfo.refetch();
+      } catch {
+        this.onFetchError();
+      }
+    },
+  },
   methods: {
     onFetchError() {
       createAlert({ message: this.$options.i18n.fetchError });
@@ -196,8 +206,22 @@ export default {
       return lock;
     },
     toggleLock() {
-      // will be handled in a following MR
-      return true;
+      const locked = !this.isLocked;
+      this.$apollo
+        .mutate({
+          mutation: lockPathMutation,
+          variables: {
+            filePath: this.path,
+            projectPath: this.projectPath,
+            lock: locked,
+          },
+        })
+        .then(() => {
+          window.location.reload();
+        })
+        .catch((error) => {
+          createAlert({ message: this.$options.i18n.mutationError, error, captureError: true });
+        });
     },
   },
 };
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 95c27cf84fcfd0..ed7e1d9bf54e2e 100644
--- a/ee/spec/frontend/repository/components/lock_directory_button_spec.js
+++ b/ee/spec/frontend/repository/components/lock_directory_button_spec.js
@@ -7,6 +7,8 @@ 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 lockPathMutation from '~/repository/mutations/lock_path.mutation.graphql';
+import { useMockLocationHelper } from 'helpers/mock_window_location_helper';
 import LockDirectoryButton from 'ee_component/repository/components/lock_directory_button.vue';
 import {
   projectMock,
@@ -15,6 +17,7 @@ import {
   downstreamDirectoryLock,
   userPermissionsMock,
   userMock,
+  lockPathMutationMock,
 } from 'ee_jest/repository/mock_data';
 
 Vue.use(VueApollo);
@@ -33,15 +36,20 @@ describe('LockDirectoryButton', () => {
     .mockResolvedValue({ data: { project: projectMock } });
   const projectInfoQueryErrorResolver = jest.fn().mockRejectedValue(new Error('Request failed'));
 
+  const lockPathMutationMockResolver = jest.fn().mockResolvedValue(lockPathMutationMock);
+  const lockPathMutationErrorResolver = jest.fn().mockRejectedValue(new Error('Request failed'));
+
   const createComponent = ({
     fileLocks = true,
     props = {},
     projectInfoResolver = projectInfoQueryMockResolver,
     currentUserResolver = currentUserMockResolver,
+    lockPathMutationResolver = lockPathMutationMockResolver,
   } = {}) => {
     fakeApollo = createMockApollo([
       [projectInfoQuery, projectInfoResolver],
       [currentUserQuery, currentUserResolver],
+      [lockPathMutation, lockPathMutationResolver],
     ]);
 
     wrapper = shallowMount(LockDirectoryButton, {
@@ -401,6 +409,40 @@ describe('LockDirectoryButton', () => {
     });
   });
 
+  describe('when the user confirms the action in the modal', () => {
+    useMockLocationHelper();
+
+    it('calls the mutation and reloads the page, when mutation is successful', async () => {
+      findLockDirectoryButton().trigger('click');
+      await waitForPromises();
+      findModal().vm.$emit('primary');
+      await waitForPromises();
+      expect(lockPathMutationMockResolver).toHaveBeenCalledWith({
+        filePath: 'test/component',
+        projectPath: 'group/project',
+        lock: true,
+      });
+      expect(window.location.reload).toHaveBeenCalled();
+    });
+
+    it('calls the mutation and and creates an alert with the correct message, when mutation fails', async () => {
+      createComponent({
+        lockPathMutationResolver: lockPathMutationErrorResolver,
+      });
+      await waitForPromises();
+      findLockDirectoryButton().trigger('click');
+      await waitForPromises();
+      findModal().vm.$emit('primary');
+      await waitForPromises();
+      expect(createAlert).toHaveBeenCalledWith({
+        message: 'An error occurred while editing lock information, please try again.',
+        captureError: true,
+        error: expect.any(Error),
+      });
+      expect(window.location.reload).not.toHaveBeenCalled();
+    });
+  });
+
   describe('alert', () => {
     it('creates an alert with the correct message, when projectInfo query fails', async () => {
       createComponent({
diff --git a/ee/spec/frontend/repository/mock_data.js b/ee/spec/frontend/repository/mock_data.js
index 84433e53f57c94..a6bbb254519a34 100644
--- a/ee/spec/frontend/repository/mock_data.js
+++ b/ee/spec/frontend/repository/mock_data.js
@@ -149,3 +149,26 @@ export const userMock = {
     },
   },
 };
+
+export const lockPathMutationMock = {
+  data: {
+    projectSetLocked: {
+      project: {
+        id: 'gid://gitlab/Project/28',
+        pathLocks: {
+          nodes: [
+            {
+              id: 'gid://gitlab/PathLock/26',
+              path: 'test/component',
+              __typename: 'PathLock',
+            },
+          ],
+          __typename: 'PathLockConnection',
+        },
+        __typename: 'Project',
+      },
+      errors: [],
+      __typename: 'ProjectSetLockedPayload',
+    },
+  },
+};
-- 
GitLab


From 3783168b08cfb9bbbf2576cfbd304989a6c5b46f Mon Sep 17 00:00:00 2001
From: psjakubowska <psedlak-jakubowska@gitlab.com>
Date: Fri, 13 Dec 2024 16:27:45 +0100
Subject: [PATCH 7/8] Update Lock tooltip on a location change

Using the tooltip component rather than a directive,
to make sure that the new tooltip is rendered every time
the path changes and so the conditions for the tooltip text
change as well. When using directive, a previous tooltip would
show where there should not be one.

Changelog: fixed
EE: true
---
 .../components/lock_directory_button.vue      | 42 ++++++++-----------
 .../components/lock_directory_button_spec.js  | 32 +++++++-------
 2 files changed, 34 insertions(+), 40 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 4c9ba94dd9dd63..0d5456794deb2b 100644
--- a/ee/app/assets/javascripts/repository/components/lock_directory_button.vue
+++ b/ee/app/assets/javascripts/repository/components/lock_directory_button.vue
@@ -1,5 +1,5 @@
 <script>
-import { GlButton, GlTooltipDirective, GlModal, GlModalDirective } from '@gitlab/ui';
+import { GlButton, GlTooltip, GlModal, GlModalDirective } from '@gitlab/ui';
 import { sprintf, __ } from '~/locale';
 import { createAlert } from '~/alert';
 import glFeatureFlagMixin from '~/vue_shared/mixins/gl_feature_flags_mixin';
@@ -25,9 +25,9 @@ export default {
   components: {
     GlButton,
     GlModal,
+    GlTooltip,
   },
   directives: {
-    GlTooltip: GlTooltipDirective,
     GlModalDirective,
   },
   mixins: [glFeatureFlagMixin()],
@@ -147,20 +147,21 @@ export default {
       );
     },
     tooltipText() {
+      let tooltipText = '';
       if (this.pathLock.isExactLock) {
-        return this.getExactLockTooltip;
+        tooltipText = this.getExactLockTooltip;
       }
       if (this.pathLock.isUpstreamLock) {
-        return this.getUpstreamLockTooltip;
+        tooltipText = this.getUpstreamLockTooltip;
       }
       if (this.pathLock.isDownstreamLock) {
-        return this.getDownstreamLockTooltip;
+        tooltipText = this.getDownstreamLockTooltip;
       }
       if (!this.canPushCode) {
-        return __('You do not have permission to lock this');
+        tooltipText = __('You do not have permission to lock this');
       }
 
-      return '';
+      return tooltipText;
     },
     modalId() {
       return `lock-directory-modal-${this.path.replaceAll('/', '-')}`;
@@ -194,16 +195,12 @@ export default {
       return lock.path.startsWith(this.path) && this.path !== lock.path;
     },
     mapPathLocks(lock) {
-      if (this.isExactLock(lock)) {
-        return { ...lock, isExactLock: true };
-      }
-      if (this.isUpstreamLock(lock)) {
-        return { ...lock, isUpstreamLock: true };
-      }
-      if (this.isDownstreamLock(lock)) {
-        return { ...lock, isDownstreamLock: true };
-      }
-      return lock;
+      return {
+        ...lock,
+        isExactLock: this.isExactLock(lock),
+        isUpstreamLock: this.isUpstreamLock(lock),
+        isDownstreamLock: this.isDownstreamLock(lock),
+      };
     },
     toggleLock() {
       const locked = !this.isLocked;
@@ -227,13 +224,10 @@ export default {
 };
 </script>
 <template>
-  <span
-    v-if="showLockButton"
-    class="btn-group"
-    :class="{ 'has-tooltip': tooltipText }"
-    gl-tooltip
-    :title="tooltipText"
-  >
+  <span v-if="showLockButton" ref="buttonWrapper" class="btn-group">
+    <gl-tooltip v-if="tooltipText" :target="() => $refs.buttonWrapper">
+      {{ tooltipText }}
+    </gl-tooltip>
     <gl-button
       v-gl-modal-directive="modalId"
       :loading="isLoading"
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 ed7e1d9bf54e2e..c9bebe3c26a934 100644
--- a/ee/spec/frontend/repository/components/lock_directory_button_spec.js
+++ b/ee/spec/frontend/repository/components/lock_directory_button_spec.js
@@ -1,5 +1,5 @@
 import { shallowMount } from '@vue/test-utils';
-import { GlButton, GlSprintf, GlModal } from '@gitlab/ui';
+import { GlButton, GlSprintf, GlModal, GlTooltip } from '@gitlab/ui';
 import Vue from 'vue';
 import VueApollo from 'vue-apollo';
 import createMockApollo from 'helpers/mock_apollo_helper';
@@ -68,12 +68,14 @@ describe('LockDirectoryButton', () => {
         GlSprintf,
         GlButton,
         GlModal,
+        GlTooltip,
       },
     });
   };
 
   const findLockDirectoryButton = () => wrapper.findComponent(GlButton);
   const findModal = () => wrapper.findComponent(GlModal);
+  const findTooltip = () => wrapper.findComponent(GlTooltip);
 
   beforeEach(async () => {
     createComponent();
@@ -134,7 +136,7 @@ describe('LockDirectoryButton', () => {
 
       expect(findLockDirectoryButton().text()).toBe('Lock');
       expect(findLockDirectoryButton().props('disabled')).toBe(true);
-      expect(wrapper.attributes('title')).toBe('You do not have permission to lock this');
+      expect(findTooltip().text()).toBe('You do not have permission to lock this');
     });
 
     it('renders enabled without a tooltip when user can push code', async () => {
@@ -151,16 +153,16 @@ describe('LockDirectoryButton', () => {
 
       expect(findLockDirectoryButton().text()).toBe('Lock');
       expect(findLockDirectoryButton().props('disabled')).toBe(false);
-      expect(wrapper.attributes('title')).toBe('');
+      expect(findTooltip().exists()).toBe(false);
     });
   });
 
   describe('lock types', () => {
     it.each`
-      mock                       | type                  | isExactLock  | isUpstreamLock | isDownstreamLock
-      ${exactDirectoryLock}      | ${'isExactLock'}      | ${true}      | ${undefined}   | ${undefined}
-      ${upstreamDirectoryLock}   | ${'isUpstreamLock'}   | ${undefined} | ${true}        | ${undefined}
-      ${downstreamDirectoryLock} | ${'isDownstreamLock'} | ${undefined} | ${undefined}   | ${true}
+      mock                       | type                  | isExactLock | isUpstreamLock | isDownstreamLock
+      ${exactDirectoryLock}      | ${'isExactLock'}      | ${true}     | ${false}       | ${false}
+      ${upstreamDirectoryLock}   | ${'isUpstreamLock'}   | ${false}    | ${true}        | ${false}
+      ${downstreamDirectoryLock} | ${'isDownstreamLock'} | ${false}    | ${false}       | ${true}
     `(
       'correctly assigns the lock type as $type depending on PathLock data',
       async ({ mock, type, isExactLock, isUpstreamLock, isDownstreamLock }) => {
@@ -205,7 +207,7 @@ describe('LockDirectoryButton', () => {
       await waitForPromises();
       expect(findLockDirectoryButton().text()).toBe('Unlock');
       expect(findLockDirectoryButton().props('disabled')).toBe(false);
-      expect(wrapper.attributes('title')).toContain('Locked by User2');
+      expect(findTooltip().text()).toContain('Locked by User2');
     });
 
     it('renders an enabled "Unlock" button when lock author is allowed to unlock', async () => {
@@ -236,7 +238,7 @@ describe('LockDirectoryButton', () => {
 
       expect(findLockDirectoryButton().text()).toBe('Unlock');
       expect(findLockDirectoryButton().props('disabled')).toBe(false);
-      expect(wrapper.attributes('title')).toEqual('');
+      expect(findTooltip().exists()).toBe(false);
     });
 
     it('renders a disabled "Unlock" button with a tooltip when user is not allowed to unlock', async () => {
@@ -261,7 +263,7 @@ describe('LockDirectoryButton', () => {
       await waitForPromises();
       expect(findLockDirectoryButton().text()).toBe('Unlock');
       expect(findLockDirectoryButton().props('disabled')).toBe(true);
-      expect(wrapper.attributes('title')).toContain(
+      expect(findTooltip().text()).toContain(
         'Locked by User2. You do not have permission to unlock this',
       );
     });
@@ -286,9 +288,7 @@ describe('LockDirectoryButton', () => {
 
       expect(findLockDirectoryButton().text()).toBe('Unlock');
       expect(findLockDirectoryButton().props('disabled')).toBe(true);
-      expect(wrapper.attributes('title')).toContain(
-        'Unlock that directory in order to unlock this',
-      );
+      expect(findTooltip().text()).toContain('Unlock that directory in order to unlock this');
     });
 
     it('renders a disabled "Unlock" button with a tooltip when user is not allowed to unlock', async () => {
@@ -313,7 +313,7 @@ describe('LockDirectoryButton', () => {
 
       expect(findLockDirectoryButton().text()).toBe('Unlock');
       expect(findLockDirectoryButton().props('disabled')).toBe(true);
-      expect(wrapper.attributes('title')).toContain('You do not have permission to unlock it');
+      expect(findTooltip().text()).toContain('You do not have permission to unlock it');
     });
   });
 
@@ -336,7 +336,7 @@ describe('LockDirectoryButton', () => {
 
       expect(findLockDirectoryButton().text()).toBe('Lock');
       expect(findLockDirectoryButton().props('disabled')).toBe(true);
-      expect(wrapper.attributes('title')).toContain(
+      expect(findTooltip().text()).toContain(
         'This directory cannot be locked while User2 has a lock on "test/component/icon". Unlock this in order to proceed',
       );
     });
@@ -363,7 +363,7 @@ describe('LockDirectoryButton', () => {
 
       expect(findLockDirectoryButton().text()).toBe('Lock');
       expect(findLockDirectoryButton().props('disabled')).toBe(true);
-      expect(wrapper.attributes('title')).toContain(
+      expect(findTooltip().text()).toContain(
         'This directory cannot be locked while User2 has a lock on "test/component/icon". You do not have permission to unlock it',
       );
     });
-- 
GitLab


From 641512a49ad974ac35ca8f337e3afffbb6a98759 Mon Sep 17 00:00:00 2001
From: psjakubowska <psedlak-jakubowska@gitlab.com>
Date: Fri, 13 Dec 2024 18:12:08 +0100
Subject: [PATCH 8/8] Address review feedback

---
 .../components/lock_directory_button.vue      | 25 ++++++++++---------
 .../components/lock_directory_button_spec.js  | 10 ++++++++
 2 files changed, 23 insertions(+), 12 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 0d5456794deb2b..8f8b02618bb078 100644
--- a/ee/app/assets/javascripts/repository/components/lock_directory_button.vue
+++ b/ee/app/assets/javascripts/repository/components/lock_directory_button.vue
@@ -77,6 +77,7 @@ export default {
   },
   data() {
     return {
+      isUpdating: false,
       canAdminLocks: false,
       canPushCode: false,
       allPathLocks: [],
@@ -108,7 +109,8 @@ export default {
         this.pathLock.isUpstreamLock ||
         this.pathLock.isDownstreamLock ||
         !this.canAdminLocks ||
-        !this.canPushCode
+        !this.canPushCode ||
+        this.isUpdating
       );
     },
     getExactLockTooltip() {
@@ -147,21 +149,19 @@ export default {
       );
     },
     tooltipText() {
-      let tooltipText = '';
-      if (this.pathLock.isExactLock) {
-        tooltipText = this.getExactLockTooltip;
-      }
-      if (this.pathLock.isUpstreamLock) {
-        tooltipText = this.getUpstreamLockTooltip;
+      if (!this.canPushCode) {
+        return __('You do not have permission to lock this');
       }
       if (this.pathLock.isDownstreamLock) {
-        tooltipText = this.getDownstreamLockTooltip;
+        return this.getDownstreamLockTooltip;
       }
-      if (!this.canPushCode) {
-        tooltipText = __('You do not have permission to lock this');
+      if (this.pathLock.isUpstreamLock) {
+        return this.getUpstreamLockTooltip;
       }
-
-      return tooltipText;
+      if (this.pathLock.isExactLock) {
+        return this.getExactLockTooltip;
+      }
+      return '';
     },
     modalId() {
       return `lock-directory-modal-${this.path.replaceAll('/', '-')}`;
@@ -204,6 +204,7 @@ export default {
     },
     toggleLock() {
       const locked = !this.isLocked;
+      this.isUpdating = true;
       this.$apollo
         .mutate({
           mutation: lockPathMutation,
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 c9bebe3c26a934..60f0ce30f86e3d 100644
--- a/ee/spec/frontend/repository/components/lock_directory_button_spec.js
+++ b/ee/spec/frontend/repository/components/lock_directory_button_spec.js
@@ -443,6 +443,16 @@ describe('LockDirectoryButton', () => {
     });
   });
 
+  describe('when user cancels the action in the modal', () => {
+    it('does not call the mutation', async () => {
+      findLockDirectoryButton().trigger('click');
+      await waitForPromises();
+      findModal().vm.$emit('cancel');
+      await waitForPromises();
+      expect(lockPathMutationMockResolver).not.toHaveBeenCalled();
+    });
+  });
+
   describe('alert', () => {
     it('creates an alert with the correct message, when projectInfo query fails', async () => {
       createComponent({
-- 
GitLab