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

Including alert for failed query.

Changelog: changed
EE: true
---
 .../repository/components/lock_directory_button.vue            | 2 +-
 .../repository/components/lock_directory_button_spec.js        | 3 +++
 2 files changed, 4 insertions(+), 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 30d4ccab03b1a2..9948f6d67e171e 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 8eee7a5b553a40..706c53e879f9ab 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 b4a6025a461fd9d75ec7333006aced35213348fc 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/7] 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 9948f6d67e171e..30d4ccab03b1a2 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 419f2612731e574382879ba136ecad3116fa4259 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/7] Assign type of lock based on the directory path

Changelog: added
EE: true
---
 .../components/lock_directory_button.vue      | 26 ++++++++++
 .../components/lock_directory_button_spec.js  | 45 ++++++++++++++++--
 ee/spec/frontend/repository/mock_data.js      | 47 +++++++++++++++++++
 3 files changed, 115 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 30d4ccab03b1a2..927e6dbc5a95b6 100644
--- a/ee/app/assets/javascripts/repository/components/lock_directory_button.vue
+++ b/ee/app/assets/javascripts/repository/components/lock_directory_button.vue
@@ -52,6 +52,11 @@ export default {
       update({ project }) {
         this.canAdminLocks = project.userPermissions.adminPathLocks;
         this.canPushCode = project.userPermissions.pushCode;
+        this.allPathLocks = project.pathLocks?.nodes.map((lock) => this.mapPathLocks(lock));
+        this.pathLock = this.allPathLocks.find(
+          (lock) =>
+            this.isDownstreamLock(lock) || this.isUpstreamLock(lock) || this.isExactLock(lock),
+        );
       },
       error() {
         this.onFetchError();
@@ -114,6 +119,27 @@ export default {
     onFetchError() {
       createAlert({ message: this.$options.i18n.fetchError });
     },
+    isExactLock(lock) {
+      return lock.path === this.path;
+    },
+    isUpstreamLock(lock) {
+      return this.path.startsWith(lock.path) && this.path !== lock.path;
+    },
+    isDownstreamLock(lock) {
+      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;
+    },
     toggleLock() {
       this.isLocked = !this.isLocked;
     },
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 706c53e879f9ab..6dd806248c4cde 100644
--- a/ee/spec/frontend/repository/components/lock_directory_button_spec.js
+++ b/ee/spec/frontend/repository/components/lock_directory_button_spec.js
@@ -11,7 +11,14 @@ 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 { projectMock, userPermissionsMock, userMock } from 'ee_jest/repository/mock_data';
+import {
+  projectMock,
+  exactDirectoryLock,
+  upstreamDirectoryLock,
+  downstreamDirectoryLock,
+  userPermissionsMock,
+  userMock,
+} from 'ee_jest/repository/mock_data';
 
 Vue.use(VueApollo);
 jest.mock('~/alert');
@@ -47,7 +54,7 @@ describe('LockDirectoryButton', () => {
       },
       propsData: {
         projectPath: 'group/project',
-        path: 'app/models',
+        path: 'test/component',
         ...props,
       },
       stubs: {
@@ -125,6 +132,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');
@@ -135,7 +174,7 @@ describe('LockDirectoryButton', () => {
     it('has a unique modal id', async () => {
       findLockDirectoryButton().trigger('click');
       await waitForPromises();
-      expect(findModal().props('modalId')).toBe('lock-directory-modal-app-models');
+      expect(findModal().props('modalId')).toBe('lock-directory-modal-test-component');
     });
 
     it.each`
diff --git a/ee/spec/frontend/repository/mock_data.js b/ee/spec/frontend/repository/mock_data.js
index 8740d7dcc12551..410a9d80db8a9a 100644
--- a/ee/spec/frontend/repository/mock_data.js
+++ b/ee/spec/frontend/repository/mock_data.js
@@ -82,6 +82,53 @@ export const projectMock = {
       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' },
+        },
+      ],
+    },
+  },
+};
+
+export const exactDirectoryLock = {
+  __typename: 'PathLock',
+  id: 'gid://gitlab/PathLock/1',
+  path: 'test/component',
+  user: {
+    __typename: 'UserCore',
+    id: 'gid://gitlab/User/1',
+    username: 'root',
+    name: 'Administrator',
+  },
+};
+
+export const upstreamDirectoryLock = {
+  __typename: 'PathLock',
+  id: 'gid://gitlab/PathLock/3',
+  path: 'test',
+  user: {
+    __typename: 'UserCore',
+    id: 'gid://gitlab/User/2',
+    username: 'user',
+    name: 'User',
+  },
+};
+
+export const downstreamDirectoryLock = {
+  __typename: 'PathLock',
+  id: 'gid://gitlab/PathLock/2',
+  path: 'test/component/icon',
+  user: {
+    __typename: 'UserCore',
+    id: 'gid://gitlab/User/2',
+    username: 'user',
+    name: 'User',
   },
 };
 
-- 
GitLab


From 47ad895534f1c27da893081af62708591d8d2e0b 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/7] 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      |  63 ++++-
 .../components/lock_directory_button_spec.js  | 230 +++++++++++++++++-
 ee/spec/frontend/repository/mock_data.js      |  14 +-
 locale/gitlab.pot                             |  21 ++
 4 files changed, 307 insertions(+), 21 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 927e6dbc5a95b6..6aa804e06aa024 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';
@@ -80,7 +80,6 @@ export default {
       allPathLocks: [],
       pathLock: {},
       user: {},
-      isLocked: false,
     };
   },
   computed: {
@@ -90,6 +89,12 @@ export default {
     isLoading() {
       return this.$apollo?.queries.projectInfo.loading;
     },
+    isLocked() {
+      return this.pathLock?.isExactLock;
+    },
+    locker() {
+      return this.pathLock?.user?.username || '';
+    },
     buttonLabel() {
       return this.isLocked ? __('Unlock') : __('Lock');
     },
@@ -97,9 +102,58 @@ export default {
       return this.isLocked ? 'unlock' : 'lock';
     },
     isDisabled() {
-      return !this.canAdminLocks || !this.canPushCode;
+      return (
+        this.pathLock?.isUpstreamLock ||
+        this.pathLock?.isDownstreamLock ||
+        !this.canAdminLocks ||
+        !this.canPushCode
+      );
+    },
+    getExactLockTooltip() {
+      if (!this.canAdminLocks) {
+        return sprintf(__('Locked by %{locker}. You do not have permission to unlock this'), {
+          locker: this.locker,
+        });
+      }
+      return this.pathLock.user.id === this.user.id
+        ? ''
+        : sprintf(__('Locked by %{locker}'), { locker: this.locker });
+    },
+    getUpstreamLockTooltip() {
+      const additionalPhrase = this.canAdminLocks
+        ? __('Unlock that directory in order to unlock this')
+        : __('You do not have permission to unlock it');
+      return sprintf(__('%{locker} has a lock on "%{path}". %{additionalPhrase}'), {
+        locker: this.locker,
+        path: this.pathLock.path,
+        additionalPhrase,
+      });
+    },
+    getDownstreamLockTooltip() {
+      const additionalPhrase = this.canAdminLocks
+        ? __('Unlock this in order to proceed')
+        : __('You do not have permission to unlock it');
+      return sprintf(
+        __(
+          'This directory cannot be locked while %{locker} has a lock on "%{path}". %{additionalPhrase}',
+        ),
+        {
+          locker: this.locker,
+          path: this.pathLock.path,
+          additionalPhrase,
+        },
+      );
     },
     tooltipText() {
+      if (this.pathLock?.isExactLock) {
+        return this.getExactLockTooltip;
+      }
+      if (this.pathLock?.isUpstreamLock) {
+        return this.getUpstreamLockTooltip;
+      }
+      if (this.pathLock?.isDownstreamLock) {
+        return this.getDownstreamLockTooltip;
+      }
       if (!this.canPushCode) {
         return __('You do not have permission to lock this');
       }
@@ -141,7 +195,8 @@ export default {
       return lock;
     },
     toggleLock() {
-      this.isLocked = !this.isLocked;
+      // will be handled in a following MR
+      return 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 6dd806248c4cde..21289b75e489d7 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';
@@ -130,6 +127,23 @@ describe('LockDirectoryButton', () => {
       expect(findLockDirectoryButton().props('disabled')).toBe(true);
       expect(wrapper.attributes('title')).toBe('You do not have permission to lock this');
     });
+
+    it('renders enabled without a tooltip when user can push code', async () => {
+      const projectWithNoLocks = {
+        data: {
+          project: {
+            ...projectMock.data.project,
+            pathLocks: { __typename: 'PathLockConnection', nodes: [] },
+          },
+        },
+      };
+      createComponent({ projectInfoResolver: jest.fn().mockResolvedValue(projectWithNoLocks) });
+      await waitForPromises();
+
+      expect(findLockDirectoryButton().text()).toBe('Lock');
+      expect(findLockDirectoryButton().props('disabled')).toBe(false);
+      expect(wrapper.attributes('title')).toBe('');
+    });
   });
 
   describe('lock types', () => {
@@ -164,6 +178,188 @@ describe('LockDirectoryButton', () => {
     );
   });
 
+  describe('when there is an exact lock', () => {
+    it('renders an enabled "Unlock" button with a tooltip when user is allowed to unlock', async () => {
+      createComponent({
+        projectInfoResolver: jest.fn().mockResolvedValue({
+          data: {
+            project: {
+              ...projectMock.data.project,
+              pathLocks: {
+                __typename: 'PathLockConnection',
+                nodes: [exactDirectoryLock],
+              },
+            },
+          },
+        }),
+      });
+      await waitForPromises();
+      expect(findLockDirectoryButton().text()).toBe('Unlock');
+      expect(findLockDirectoryButton().props('disabled')).toBe(false);
+      expect(wrapper.attributes('title')).toContain('Locked by user');
+    });
+
+    it('renders an enabled "Unlock" button when lock author is allowed to unlock', async () => {
+      createComponent({
+        projectInfoResolver: jest.fn().mockResolvedValue({
+          data: {
+            project: {
+              ...projectMock.data.project,
+              pathLocks: {
+                __typename: 'PathLockConnection',
+                nodes: [
+                  {
+                    ...exactDirectoryLock,
+                    user: {
+                      __typename: 'CurrentUser',
+                      id: 'gid://gitlab/User/1',
+                      username: 'root',
+                      name: 'Administrator',
+                    },
+                  },
+                ],
+              },
+            },
+          },
+        }),
+      });
+      await waitForPromises();
+
+      expect(findLockDirectoryButton().text()).toBe('Unlock');
+      expect(findLockDirectoryButton().props('disabled')).toBe(false);
+      expect(wrapper.attributes('title')).toEqual('');
+    });
+
+    it('renders a disabled "Unlock" button with a tooltip when user is not allowed to unlock', async () => {
+      createComponent({
+        projectInfoResolver: jest.fn().mockResolvedValue({
+          data: {
+            project: {
+              ...projectMock.data.project,
+              userPermissions: {
+                ...userPermissionsMock,
+                adminPathLocks: false,
+                canPushCode: false,
+              },
+              pathLocks: {
+                __typename: 'PathLockConnection',
+                nodes: [exactDirectoryLock],
+              },
+            },
+          },
+        }),
+      });
+      await waitForPromises();
+      expect(findLockDirectoryButton().text()).toBe('Unlock');
+      expect(findLockDirectoryButton().props('disabled')).toBe(true);
+      expect(wrapper.attributes('title')).toContain(
+        'Locked by user2. You do not have permission to unlock this',
+      );
+    });
+  });
+
+  describe('when there is an upstream lock', () => {
+    it('renders a disabled "Lock" button with a tooltip when user is allowed to lock', async () => {
+      createComponent({
+        projectInfoResolver: jest.fn().mockResolvedValue({
+          data: {
+            project: {
+              ...projectMock.data.project,
+              pathLocks: {
+                __typename: 'PathLockConnection',
+                nodes: [upstreamDirectoryLock],
+              },
+            },
+          },
+        }),
+      });
+      await waitForPromises();
+
+      expect(findLockDirectoryButton().text()).toBe('Lock');
+      expect(findLockDirectoryButton().props('disabled')).toBe(true);
+      expect(wrapper.attributes('title')).toContain(
+        'Unlock that directory in order to unlock this',
+      );
+    });
+
+    it('renders a disabled "Lock" button with a tooltip when user is not allowed to lock', async () => {
+      createComponent({
+        projectInfoResolver: jest.fn().mockResolvedValue({
+          data: {
+            project: {
+              ...projectMock.data.project,
+              userPermissions: {
+                ...userPermissionsMock,
+                adminPathLocks: false,
+              },
+              pathLocks: {
+                __typename: 'PathLockConnection',
+                nodes: [upstreamDirectoryLock],
+              },
+            },
+          },
+        }),
+      });
+      await waitForPromises();
+
+      expect(findLockDirectoryButton().text()).toBe('Lock');
+      expect(findLockDirectoryButton().props('disabled')).toBe(true);
+      expect(wrapper.attributes('title')).toContain('You do not have permission to unlock it');
+    });
+  });
+
+  describe('when there is a downstream lock', () => {
+    it('renders a disabled "Lock" button with a tooltip when user is allowed to lock', async () => {
+      createComponent({
+        projectInfoResolver: jest.fn().mockResolvedValue({
+          data: {
+            project: {
+              ...projectMock.data.project,
+              pathLocks: {
+                __typename: 'PathLockConnection',
+                nodes: [downstreamDirectoryLock],
+              },
+            },
+          },
+        }),
+      });
+      await waitForPromises();
+
+      expect(findLockDirectoryButton().text()).toBe('Lock');
+      expect(findLockDirectoryButton().props('disabled')).toBe(true);
+      expect(wrapper.attributes('title')).toContain(
+        'This directory cannot be locked while user2 has a lock on "test/component/icon". Unlock this in order to proceed',
+      );
+    });
+
+    it('renders a disabled "Lock" button with a tooltip when user is not allowed to lock', async () => {
+      createComponent({
+        projectInfoResolver: jest.fn().mockResolvedValue({
+          data: {
+            project: {
+              ...projectMock.data.project,
+              userPermissions: {
+                ...userPermissionsMock,
+                adminPathLocks: false,
+              },
+              pathLocks: {
+                __typename: 'PathLockConnection',
+                nodes: [downstreamDirectoryLock],
+              },
+            },
+          },
+        }),
+      });
+      await waitForPromises();
+
+      expect(findLockDirectoryButton().text()).toBe('Lock');
+      expect(findLockDirectoryButton().props('disabled')).toBe(true);
+      expect(wrapper.attributes('title')).toContain(
+        'This directory cannot be locked while user2 has a lock on "test/component/icon". You do not have permission to unlock it',
+      );
+    });
+  });
+
   describe('modal', () => {
     it('shows a modal when clicked', async () => {
       findLockDirectoryButton().trigger('click');
@@ -177,16 +373,30 @@ describe('LockDirectoryButton', () => {
       expect(findModal().props('modalId')).toBe('lock-directory-modal-test-component');
     });
 
-    it.each`
-      locked   | expectedContent
-      ${true}  | ${'Are you sure you want to unlock this directory?'}
-      ${false} | ${'Are you sure you want to lock this directory?'}
-    `('displays $expectedContent when isLocked is $locked', async ({ locked, expectedContent }) => {
+    it('displays correct content, when user tries to lock the directory', async () => {
+      findLockDirectoryButton().trigger('click');
+      await waitForPromises();
+      expect(findModal().text()).toContain('Are you sure you want to lock this directory?');
+    });
+
+    it('displays correct content, when user tries to unlock the directory', async () => {
+      createComponent({
+        projectInfoResolver: jest.fn().mockResolvedValue({
+          data: {
+            project: {
+              ...projectMock.data.project,
+              pathLocks: {
+                __typename: 'PathLockConnection',
+                nodes: [exactDirectoryLock],
+              },
+            },
+          },
+        }),
+      });
       await waitForPromises();
-      wrapper.vm.isLocked = locked;
       findLockDirectoryButton().trigger('click');
       await waitForPromises();
-      expect(findModal().text()).toContain(expectedContent);
+      expect(findModal().text()).toContain('Are you sure you want to unlock this directory?');
     });
   });
 
diff --git a/ee/spec/frontend/repository/mock_data.js b/ee/spec/frontend/repository/mock_data.js
index 410a9d80db8a9a..3665fc03ae4b8f 100644
--- a/ee/spec/frontend/repository/mock_data.js
+++ b/ee/spec/frontend/repository/mock_data.js
@@ -102,9 +102,9 @@ export const exactDirectoryLock = {
   path: 'test/component',
   user: {
     __typename: 'UserCore',
-    id: 'gid://gitlab/User/1',
-    username: 'root',
-    name: 'Administrator',
+    id: 'gid://gitlab/User/2',
+    username: 'user2',
+    name: 'User2',
   },
 };
 
@@ -115,8 +115,8 @@ export const upstreamDirectoryLock = {
   user: {
     __typename: 'UserCore',
     id: 'gid://gitlab/User/2',
-    username: 'user',
-    name: 'User',
+    username: 'user2',
+    name: 'User2',
   },
 };
 
@@ -127,8 +127,8 @@ export const downstreamDirectoryLock = {
   user: {
     __typename: 'UserCore',
     id: 'gid://gitlab/User/2',
-    username: 'user',
-    name: 'User',
+    username: 'user2',
+    name: 'User2',
   },
 };
 
diff --git a/locale/gitlab.pot b/locale/gitlab.pot
index 6cc5ed9ebc4c26..f06de2b773fd8e 100644
--- a/locale/gitlab.pot
+++ b/locale/gitlab.pot
@@ -1062,6 +1062,9 @@ msgstr ""
 msgid "%{listToShow}, and %{awardsListLength} more"
 msgstr ""
 
+msgid "%{locker} has a lock on \"%{path}\". %{additionalPhrase}"
+msgstr ""
+
 msgid "%{mergeLength}/%{usersLength} can merge"
 msgstr ""
 
@@ -32811,6 +32814,12 @@ msgstr ""
 msgid "Locked by %{fileLockUserName}"
 msgstr ""
 
+msgid "Locked by %{locker}"
+msgstr ""
+
+msgid "Locked by %{locker}. You do not have permission to unlock this"
+msgstr ""
+
 msgid "Locked files"
 msgstr ""
 
@@ -56597,6 +56606,9 @@ msgstr ""
 msgid "This directory"
 msgstr ""
 
+msgid "This directory cannot be locked while %{locker} has a lock on \"%{path}\". %{additionalPhrase}"
+msgstr ""
+
 msgid "This domain is not verified. You will need to verify ownership before access is enabled."
 msgstr ""
 
@@ -59316,12 +59328,18 @@ msgstr ""
 msgid "Unlock more features with GitLab Ultimate"
 msgstr ""
 
+msgid "Unlock that directory in order to unlock this"
+msgstr ""
+
 msgid "Unlock the discussion"
 msgstr ""
 
 msgid "Unlock this discussion? %{strongStart}Everyone%{strongEnd} will be able to comment."
 msgstr ""
 
+msgid "Unlock this in order to proceed"
+msgstr ""
+
 msgid "Unlocked"
 msgstr ""
 
@@ -64229,6 +64247,9 @@ msgstr ""
 msgid "You do not have permission to set a member awaiting"
 msgstr ""
 
+msgid "You do not have permission to unlock it"
+msgstr ""
+
 msgid "You do not have permission to update the environment."
 msgstr ""
 
-- 
GitLab


From fc0183a3b78ce953498fb5931074a11dd772e398 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/7] Correct the UI for the exact lock type

---
 .../components/lock_directory_button.vue         |  4 ++--
 .../queries/path_locks.fragment.graphql          |  1 +
 .../components/lock_directory_button_spec.js     | 16 ++++++++--------
 ee/spec/frontend/repository/mock_data.js         |  7 ++++++-
 4 files changed, 17 insertions(+), 11 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 6aa804e06aa024..a7945103b78e8e 100644
--- a/ee/app/assets/javascripts/repository/components/lock_directory_button.vue
+++ b/ee/app/assets/javascripts/repository/components/lock_directory_button.vue
@@ -90,10 +90,10 @@ export default {
       return this.$apollo?.queries.projectInfo.loading;
     },
     isLocked() {
-      return this.pathLock?.isExactLock;
+      return this.pathLock?.isExactLock || this.pathLock?.isUpstreamLock;
     },
     locker() {
-      return this.pathLock?.user?.username || '';
+      return this.pathLock?.user?.name || '';
     },
     buttonLabel() {
       return this.isLocked ? __('Unlock') : __('Lock');
diff --git a/ee/app/assets/javascripts/repository/queries/path_locks.fragment.graphql b/ee/app/assets/javascripts/repository/queries/path_locks.fragment.graphql
index 74a94743a1636c..f8b2f35a96a591 100644
--- a/ee/app/assets/javascripts/repository/queries/path_locks.fragment.graphql
+++ b/ee/app/assets/javascripts/repository/queries/path_locks.fragment.graphql
@@ -7,6 +7,7 @@ fragment ProjectPathLocksFragment on Project {
       user {
         id
         username
+        name
       }
     }
   }
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 21289b75e489d7..e14c8ff1c06479 100644
--- a/ee/spec/frontend/repository/components/lock_directory_button_spec.js
+++ b/ee/spec/frontend/repository/components/lock_directory_button_spec.js
@@ -196,7 +196,7 @@ describe('LockDirectoryButton', () => {
       await waitForPromises();
       expect(findLockDirectoryButton().text()).toBe('Unlock');
       expect(findLockDirectoryButton().props('disabled')).toBe(false);
-      expect(wrapper.attributes('title')).toContain('Locked by user');
+      expect(wrapper.attributes('title')).toContain('Locked by User2');
     });
 
     it('renders an enabled "Unlock" button when lock author is allowed to unlock', async () => {
@@ -253,13 +253,13 @@ describe('LockDirectoryButton', () => {
       expect(findLockDirectoryButton().text()).toBe('Unlock');
       expect(findLockDirectoryButton().props('disabled')).toBe(true);
       expect(wrapper.attributes('title')).toContain(
-        'Locked by user2. You do not have permission to unlock this',
+        'Locked by User2. You do not have permission to unlock this',
       );
     });
   });
 
   describe('when there is an upstream lock', () => {
-    it('renders a disabled "Lock" button with a tooltip when user is allowed to lock', async () => {
+    it('renders a disabled "Unlock" button with a tooltip when user is allowed to unlock', async () => {
       createComponent({
         projectInfoResolver: jest.fn().mockResolvedValue({
           data: {
@@ -275,14 +275,14 @@ describe('LockDirectoryButton', () => {
       });
       await waitForPromises();
 
-      expect(findLockDirectoryButton().text()).toBe('Lock');
+      expect(findLockDirectoryButton().text()).toBe('Unlock');
       expect(findLockDirectoryButton().props('disabled')).toBe(true);
       expect(wrapper.attributes('title')).toContain(
         'Unlock that directory in order to unlock this',
       );
     });
 
-    it('renders a disabled "Lock" button with a tooltip when user is not allowed to lock', async () => {
+    it('renders a disabled "Unlock" button with a tooltip when user is not allowed to unlock', async () => {
       createComponent({
         projectInfoResolver: jest.fn().mockResolvedValue({
           data: {
@@ -302,7 +302,7 @@ describe('LockDirectoryButton', () => {
       });
       await waitForPromises();
 
-      expect(findLockDirectoryButton().text()).toBe('Lock');
+      expect(findLockDirectoryButton().text()).toBe('Unlock');
       expect(findLockDirectoryButton().props('disabled')).toBe(true);
       expect(wrapper.attributes('title')).toContain('You do not have permission to unlock it');
     });
@@ -328,7 +328,7 @@ describe('LockDirectoryButton', () => {
       expect(findLockDirectoryButton().text()).toBe('Lock');
       expect(findLockDirectoryButton().props('disabled')).toBe(true);
       expect(wrapper.attributes('title')).toContain(
-        'This directory cannot be locked while user2 has a lock on "test/component/icon". Unlock this in order to proceed',
+        'This directory cannot be locked while User2 has a lock on "test/component/icon". Unlock this in order to proceed',
       );
     });
 
@@ -355,7 +355,7 @@ describe('LockDirectoryButton', () => {
       expect(findLockDirectoryButton().text()).toBe('Lock');
       expect(findLockDirectoryButton().props('disabled')).toBe(true);
       expect(wrapper.attributes('title')).toContain(
-        'This directory cannot be locked while user2 has a lock on "test/component/icon". You do not have permission to unlock it',
+        'This directory cannot be locked while User2 has a lock on "test/component/icon". You do not have permission to unlock it',
       );
     });
   });
diff --git a/ee/spec/frontend/repository/mock_data.js b/ee/spec/frontend/repository/mock_data.js
index 3665fc03ae4b8f..753b371d0dda61 100644
--- a/ee/spec/frontend/repository/mock_data.js
+++ b/ee/spec/frontend/repository/mock_data.js
@@ -89,7 +89,12 @@ export const projectMock = {
           __typename: 'PathLock',
           id: 'gid://gitlab/PathLock/2',
           path: 'locked_file.js',
-          user: { id: 'gid://gitlab/User/1', username: 'root', __typename: 'UserCore' },
+          user: {
+            id: 'gid://gitlab/User/1',
+            username: 'root',
+            name: 'Administrator',
+            __typename: 'UserCore',
+          },
         },
       ],
     },
-- 
GitLab


From e77f8ed6c3159331ff2e6446b2a55ed912423198 Mon Sep 17 00:00:00 2001
From: psjakubowska <psedlak-jakubowska@gitlab.com>
Date: Wed, 11 Dec 2024 19:11:15 +0100
Subject: [PATCH 6/7] Address review feedback

---
 .../components/lock_directory_button.vue      | 25 ++++++++++---------
 1 file changed, 13 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 a7945103b78e8e..5bcaa29f159700 100644
--- a/ee/app/assets/javascripts/repository/components/lock_directory_button.vue
+++ b/ee/app/assets/javascripts/repository/components/lock_directory_button.vue
@@ -52,11 +52,12 @@ export default {
       update({ project }) {
         this.canAdminLocks = project.userPermissions.adminPathLocks;
         this.canPushCode = project.userPermissions.pushCode;
-        this.allPathLocks = project.pathLocks?.nodes.map((lock) => this.mapPathLocks(lock));
-        this.pathLock = this.allPathLocks.find(
-          (lock) =>
-            this.isDownstreamLock(lock) || this.isUpstreamLock(lock) || this.isExactLock(lock),
-        );
+        this.allPathLocks = project.pathLocks?.nodes?.map((lock) => this.mapPathLocks(lock));
+        this.pathLock =
+          this.allPathLocks.find(
+            (lock) =>
+              this.isDownstreamLock(lock) || this.isUpstreamLock(lock) || this.isExactLock(lock),
+          ) || {};
       },
       error() {
         this.onFetchError();
@@ -90,10 +91,10 @@ export default {
       return this.$apollo?.queries.projectInfo.loading;
     },
     isLocked() {
-      return this.pathLock?.isExactLock || this.pathLock?.isUpstreamLock;
+      return this.pathLock.isExactLock || this.pathLock.isUpstreamLock;
     },
     locker() {
-      return this.pathLock?.user?.name || '';
+      return this.pathLock.user?.name || this.pathLock.user?.username;
     },
     buttonLabel() {
       return this.isLocked ? __('Unlock') : __('Lock');
@@ -103,8 +104,8 @@ export default {
     },
     isDisabled() {
       return (
-        this.pathLock?.isUpstreamLock ||
-        this.pathLock?.isDownstreamLock ||
+        this.pathLock.isUpstreamLock ||
+        this.pathLock.isDownstreamLock ||
         !this.canAdminLocks ||
         !this.canPushCode
       );
@@ -145,13 +146,13 @@ export default {
       );
     },
     tooltipText() {
-      if (this.pathLock?.isExactLock) {
+      if (this.pathLock.isExactLock) {
         return this.getExactLockTooltip;
       }
-      if (this.pathLock?.isUpstreamLock) {
+      if (this.pathLock.isUpstreamLock) {
         return this.getUpstreamLockTooltip;
       }
-      if (this.pathLock?.isDownstreamLock) {
+      if (this.pathLock.isDownstreamLock) {
         return this.getDownstreamLockTooltip;
       }
       if (!this.canPushCode) {
-- 
GitLab


From e11904eabd42cca7438f50675faedb80074b582a Mon Sep 17 00:00:00 2001
From: psjakubowska <psedlak-jakubowska@gitlab.com>
Date: Wed, 11 Dec 2024 19:13:45 +0100
Subject: [PATCH 7/7] Fix mocks for jest specs

---
 .../components/blob_content_viewer_spec.js    |  9 +---
 .../components/lock_directory_button_spec.js  | 27 ++++++------
 ee/spec/frontend/repository/mock_data.js      | 41 +++++++++----------
 .../components/blob_content_viewer_spec.js    | 14 +------
 spec/frontend/repository/mock_data.js         | 14 +++++--
 5 files changed, 49 insertions(+), 56 deletions(-)

diff --git a/ee/spec/frontend/repository/components/blob_content_viewer_spec.js b/ee/spec/frontend/repository/components/blob_content_viewer_spec.js
index 1b608aac64f1fe..429066b304edbf 100644
--- a/ee/spec/frontend/repository/components/blob_content_viewer_spec.js
+++ b/ee/spec/frontend/repository/components/blob_content_viewer_spec.js
@@ -17,13 +17,8 @@ import { mountExtended } from 'helpers/vue_test_utils_helper';
 import highlightMixin from '~/repository/mixins/highlight_mixin';
 import getRefMixin from '~/repository/mixins/get_ref';
 import glFeatureFlagMixin from '~/vue_shared/mixins/gl_feature_flags_mixin';
-import {
-  simpleViewerMock,
-  richViewerMock,
-  projectMock,
-  userPermissionsMock,
-  propsMock,
-} from 'jest/repository/mock_data';
+import { simpleViewerMock, richViewerMock, propsMock } from 'jest/repository/mock_data';
+import { projectMock, userPermissionsMock } from 'ee_jest/repository/mock_data';
 import aiResponseSubscription from 'ee/graphql_shared/subscriptions/ai_completion_response.subscription.graphql';
 
 jest.mock('~/lib/utils/common_utils');
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 e14c8ff1c06479..95c27cf84fcfd0 100644
--- a/ee/spec/frontend/repository/components/lock_directory_button_spec.js
+++ b/ee/spec/frontend/repository/components/lock_directory_button_spec.js
@@ -28,7 +28,9 @@ 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 projectInfoQueryMockResolver = jest
+    .fn()
+    .mockResolvedValue({ data: { project: projectMock } });
   const projectInfoQueryErrorResolver = jest.fn().mockRejectedValue(new Error('Request failed'));
 
   const createComponent = ({
@@ -107,10 +109,9 @@ describe('LockDirectoryButton', () => {
 
     it('renders disabled with correct tooltip if user does not have permissions to push code', async () => {
       const projectWithNoPushPermission = {
-        ...projectMock,
         data: {
           project: {
-            ...projectMock.data.project,
+            ...projectMock,
             userPermissions: {
               ...userPermissionsMock,
               pushCode: false,
@@ -132,7 +133,7 @@ describe('LockDirectoryButton', () => {
       const projectWithNoLocks = {
         data: {
           project: {
-            ...projectMock.data.project,
+            ...projectMock,
             pathLocks: { __typename: 'PathLockConnection', nodes: [] },
           },
         },
@@ -159,7 +160,7 @@ describe('LockDirectoryButton', () => {
           projectInfoResolver: jest.fn().mockResolvedValue({
             data: {
               project: {
-                ...projectMock.data.project,
+                ...projectMock,
                 pathLocks: {
                   __typename: 'PathLockConnection',
                   nodes: [mock],
@@ -184,7 +185,7 @@ describe('LockDirectoryButton', () => {
         projectInfoResolver: jest.fn().mockResolvedValue({
           data: {
             project: {
-              ...projectMock.data.project,
+              ...projectMock,
               pathLocks: {
                 __typename: 'PathLockConnection',
                 nodes: [exactDirectoryLock],
@@ -204,7 +205,7 @@ describe('LockDirectoryButton', () => {
         projectInfoResolver: jest.fn().mockResolvedValue({
           data: {
             project: {
-              ...projectMock.data.project,
+              ...projectMock,
               pathLocks: {
                 __typename: 'PathLockConnection',
                 nodes: [
@@ -235,7 +236,7 @@ describe('LockDirectoryButton', () => {
         projectInfoResolver: jest.fn().mockResolvedValue({
           data: {
             project: {
-              ...projectMock.data.project,
+              ...projectMock,
               userPermissions: {
                 ...userPermissionsMock,
                 adminPathLocks: false,
@@ -264,7 +265,7 @@ describe('LockDirectoryButton', () => {
         projectInfoResolver: jest.fn().mockResolvedValue({
           data: {
             project: {
-              ...projectMock.data.project,
+              ...projectMock,
               pathLocks: {
                 __typename: 'PathLockConnection',
                 nodes: [upstreamDirectoryLock],
@@ -287,7 +288,7 @@ describe('LockDirectoryButton', () => {
         projectInfoResolver: jest.fn().mockResolvedValue({
           data: {
             project: {
-              ...projectMock.data.project,
+              ...projectMock,
               userPermissions: {
                 ...userPermissionsMock,
                 adminPathLocks: false,
@@ -314,7 +315,7 @@ describe('LockDirectoryButton', () => {
         projectInfoResolver: jest.fn().mockResolvedValue({
           data: {
             project: {
-              ...projectMock.data.project,
+              ...projectMock,
               pathLocks: {
                 __typename: 'PathLockConnection',
                 nodes: [downstreamDirectoryLock],
@@ -337,7 +338,7 @@ describe('LockDirectoryButton', () => {
         projectInfoResolver: jest.fn().mockResolvedValue({
           data: {
             project: {
-              ...projectMock.data.project,
+              ...projectMock,
               userPermissions: {
                 ...userPermissionsMock,
                 adminPathLocks: false,
@@ -384,7 +385,7 @@ describe('LockDirectoryButton', () => {
         projectInfoResolver: jest.fn().mockResolvedValue({
           data: {
             project: {
-              ...projectMock.data.project,
+              ...projectMock,
               pathLocks: {
                 __typename: 'PathLockConnection',
                 nodes: [exactDirectoryLock],
diff --git a/ee/spec/frontend/repository/mock_data.js b/ee/spec/frontend/repository/mock_data.js
index 753b371d0dda61..84433e53f57c94 100644
--- a/ee/spec/frontend/repository/mock_data.js
+++ b/ee/spec/frontend/repository/mock_data.js
@@ -76,28 +76,27 @@ export const userPermissionsMock = {
 };
 
 export const projectMock = {
-  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',
-            name: 'Administrator',
-            __typename: 'UserCore',
-          },
+  __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',
+          name: 'Administrator',
+          __typename: 'UserCore',
         },
-      ],
-    },
+      },
+    ],
+  },
+  repository: {
+    empty: false,
   },
 };
 
diff --git a/spec/frontend/repository/components/blob_content_viewer_spec.js b/spec/frontend/repository/components/blob_content_viewer_spec.js
index 66de1e8aacaf2e..525a1beae39dce 100644
--- a/spec/frontend/repository/components/blob_content_viewer_spec.js
+++ b/spec/frontend/repository/components/blob_content_viewer_spec.js
@@ -92,23 +92,13 @@ const createComponent = async (mockData = {}, mountFn = shallowMount, mockRoute
   };
 
   const projectInfo = {
-    __typename: 'Project',
-    id: projectMock.id,
+    ...projectMock,
     userPermissions: {
       pushCode,
       forkProject,
       downloadCode,
       createMergeRequestIn,
     },
-    pathLocks: {
-      nodes: [
-        {
-          id: 'test',
-          path: 'locked_file.js',
-          user: { id: '123', username: 'root' },
-        },
-      ],
-    },
   };
 
   projectInfoMockResolver = jest.fn().mockResolvedValue({
@@ -476,7 +466,7 @@ describe('Blob content viewer component', () => {
       } = projectMock;
 
       it('renders component', async () => {
-        window.gon.current_user_id = 1;
+        window.gon.current_user_id = 'gid://gitlab/User/1';
         window.gon.current_username = 'root';
 
         await createComponent({ pushCode, downloadCode, empty }, mount);
diff --git a/spec/frontend/repository/mock_data.js b/spec/frontend/repository/mock_data.js
index 272947fe54d634..08b87d121b707f 100644
--- a/spec/frontend/repository/mock_data.js
+++ b/spec/frontend/repository/mock_data.js
@@ -54,18 +54,26 @@ export const userPermissionsMock = {
   forkProject: true,
   downloadCode: true,
   createMergeRequestIn: true,
+  __typename: 'ProjectPermissions',
 };
 
 export const projectMock = {
   __typename: 'Project',
-  id: '1234',
+  id: 'gid://gitlab/Project/7',
   userPermissions: userPermissionsMock,
   pathLocks: {
+    __typename: 'PathLockConnection',
     nodes: [
       {
-        id: 'test',
+        __typename: 'PathLock',
+        id: 'gid://gitlab/PathLock/2',
         path: 'locked_file.js',
-        user: { id: '123', username: 'root' },
+        user: {
+          id: 'gid://gitlab/User/1',
+          username: 'root',
+          name: 'Administrator',
+          __typename: 'UserCore',
+        },
       },
     ],
   },
-- 
GitLab