Add latest changes from gitlab-org/gitlab@master

12 files changed, 47 insertions, 56 deletions

diff --git a/app/assets/javascripts/ci_secure_files/components/secure_files_list.vue b/app/assets/javascripts/ci_secure_files/components/secure_files_list.vue
index fb2e24e15f6..8ad599db6a7 100644
--- a/app/assets/javascripts/ci_secure_files/components/secure_files_list.vue
+++ b/app/assets/javascripts/ci_secure_files/components/secure_files_list.vue
@@ -223,7 +223,6 @@ export default {
               ref="fileUpload"
               type="file"
               class="hidden"
-              data-qa-selector="file_upload_field"
               @change="uploadSecureFile"
             />
           </div>
diff --git a/app/assets/javascripts/ci_settings_pipeline_triggers/components/triggers_list.vue b/app/assets/javascripts/ci_settings_pipeline_triggers/components/triggers_list.vue
index e1f6006fedf..d0675ba96fd 100644
--- a/app/assets/javascripts/ci_settings_pipeline_triggers/components/triggers_list.vue
+++ b/app/assets/javascripts/ci_settings_pipeline_triggers/components/triggers_list.vue
@@ -121,7 +121,6 @@ export default {
           v-if="item.hasTokenExposed"
           :text="item.token"
           data-testid="clipboard-btn"
-          data-qa-selector="clipboard_button"
           :title="$options.i18n.copyTrigger"
           css-class="gl-border-none gl-py-0 gl-px-2"
         />
diff --git a/app/assets/javascripts/content_editor/components/bubble_menus/media_bubble_menu.vue b/app/assets/javascripts/content_editor/components/bubble_menus/media_bubble_menu.vue
index 6ce6e731551..0818228e886 100644
--- a/app/assets/javascripts/content_editor/components/bubble_menus/media_bubble_menu.vue
+++ b/app/assets/javascripts/content_editor/components/bubble_menus/media_bubble_menu.vue
@@ -238,7 +238,6 @@ export default {
           name="content_editor_image"
           :accept="$options.acceptedMimes[mediaType]"
           class="gl-display-none"
-          data-qa-selector="file_upload_field"
           @change="onFileSelect"
         />
         <gl-link
diff --git a/app/assets/javascripts/graphql_shared/constants.js b/app/assets/javascripts/graphql_shared/constants.js
index ef0dcea26ad..d8b97259730 100644
--- a/app/assets/javascripts/graphql_shared/constants.js
+++ b/app/assets/javascripts/graphql_shared/constants.js
@@ -27,7 +27,7 @@ export const TYPENAME_TODO = 'Todo';
 export const TYPENAME_USER = 'User';
 export const TYPENAME_VULNERABILITY = 'Vulnerability';
 export const TYPENAME_WORK_ITEM = 'WorkItem';
-export const TYPENAME_ORGANIZATION = 'Organization';
+export const TYPE_ORGANIZATION = 'Organizations::Organization';
 export const TYPE_USERS_SAVED_REPLY = 'Users::SavedReply';
 export const TYPE_WORKSPACE = 'RemoteDevelopment::Workspace';
 export const TYPE_COMPLIANCE_FRAMEWORK = 'ComplianceManagement::Framework';
diff --git a/app/assets/javascripts/organizations/index/components/app.vue b/app/assets/javascripts/organizations/index/components/app.vue
index 4935e0122e3..71a6aae4e93 100644
--- a/app/assets/javascripts/organizations/index/components/app.vue
+++ b/app/assets/javascripts/organizations/index/components/app.vue
@@ -3,7 +3,7 @@ import { GlButton } from '@gitlab/ui';
 import { __, s__ } from '~/locale';
 import { createAlert } from '~/alert';
 import { DEFAULT_PER_PAGE } from '~/api';
-import organizationsQuery from '../graphql/organizations.query.graphql';
+import organizationsQuery from '../../shared/graphql/queries/organizations.query.graphql';
 import OrganizationsView from './organizations_view.vue';
 
 export default {
diff --git a/app/assets/javascripts/organizations/index/graphql/organizations_client.query.graphql b/app/assets/javascripts/organizations/index/graphql/organizations_client.query.graphql
deleted file mode 100644
index 66f7a82380c..00000000000
--- a/app/assets/javascripts/organizations/index/graphql/organizations_client.query.graphql
+++ /dev/null
@@ -1,14 +0,0 @@
-query getCurrentUserOrganizationsClient {
-  currentUser {
-    id
-    organizations @client {
-      nodes {
-        id
-        name
-        descriptionHtml
-        avatarUrl
-        webUrl
-      }
-    }
-  }
-}
diff --git a/app/assets/javascripts/organizations/mock_data.js b/app/assets/javascripts/organizations/mock_data.js
index e9bc5f0686b..f0a34acee09 100644
--- a/app/assets/javascripts/organizations/mock_data.js
+++ b/app/assets/javascripts/organizations/mock_data.js
@@ -6,7 +6,7 @@
 
 export const organizations = [
   {
-    id: 'gid://gitlab/Organization/1',
+    id: 'gid://gitlab/Organizations::Organization/1',
     name: 'My First Organization',
     descriptionHtml:
       '<p>This is where an organization can be explained in <strong>detail</strong></p>',
@@ -15,7 +15,7 @@ export const organizations = [
     __typename: 'Organization',
   },
   {
-    id: 'gid://gitlab/Organization/2',
+    id: 'gid://gitlab/Organizations::Organization/2',
     name: 'Vegetation Co.',
     descriptionHtml:
       '<p> Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet Lorem ipsum dolt   Lorem ipsum dolor sit amet Lorem ipsum dolt  Lorem ipsum dolor sit amet Lorem ipsum dolt  Lorem ipsum dolor sit amet Lorem ipsum dolt Lorem ipsum dolor sit amet Lorem ipsum dolt  Lorem ipsum dolor sit amet Lorem ipsum dolt  Lorem ipsum dolor sit amet Lorem ipsum dolt  Lorem ipsum dolor sit amet Lorem ipsum dolt  Lorem ipsum dolor sit amet Lorem ipsum dolt<script>alert(1)</script></p>',
@@ -24,7 +24,7 @@ export const organizations = [
     __typename: 'Organization',
   },
   {
-    id: 'gid://gitlab/Organization/3',
+    id: 'gid://gitlab/Organizations::Organization/3',
     name: 'Dude where is my car?',
     descriptionHtml: null,
     avatarUrl: null,
@@ -316,6 +316,7 @@ export const pageInfo = {
   hasNextPage: true,
   hasPreviousPage: true,
   startCursor: 'eyJpZCI6IjEwNzIifQ',
+  __typename: 'PageInfo',
 };
 
 export const pageInfoOnePage = {
@@ -323,6 +324,7 @@ export const pageInfoOnePage = {
   hasNextPage: false,
   hasPreviousPage: false,
   startCursor: 'eyJpZCI6IjEwNzIifQ',
+  __typename: 'PageInfo',
 };
 
 export const pageInfoEmpty = {
@@ -330,4 +332,5 @@ export const pageInfoEmpty = {
   hasNextPage: false,
   hasPreviousPage: false,
   startCursor: null,
+  __typename: 'PageInfo',
 };
diff --git a/app/assets/javascripts/organizations/shared/graphql/fragments/organization.fragment.graphql b/app/assets/javascripts/organizations/shared/graphql/fragments/organization.fragment.graphql
new file mode 100644
index 00000000000..c0bccdcc120
--- /dev/null
+++ b/app/assets/javascripts/organizations/shared/graphql/fragments/organization.fragment.graphql
@@ -0,0 +1,7 @@
+fragment Organization on Organization {
+  id
+  name
+  descriptionHtml
+  avatarUrl
+  webUrl
+}
diff --git a/app/assets/javascripts/organizations/shared/graphql/queries/organization.query.graphql b/app/assets/javascripts/organizations/shared/graphql/queries/organization.query.graphql
index 1d95786fcb0..a8d8d63c27a 100644
--- a/app/assets/javascripts/organizations/shared/graphql/queries/organization.query.graphql
+++ b/app/assets/javascripts/organizations/shared/graphql/queries/organization.query.graphql
@@ -1,9 +1,7 @@
-query getOrganization($id: ID!) {
-  organization(id: $id) @client {
-    id
-    name
-    descriptionHtml
-    avatarUrl
-    webUrl
+#import "../fragments/organization.fragment.graphql"
+
+query getOrganization($id: OrganizationsOrganizationID!) {
+  organization(id: $id) {
+    ...Organization
   }
 }
diff --git a/app/assets/javascripts/organizations/index/graphql/organizations.query.graphql b/app/assets/javascripts/organizations/shared/graphql/queries/organizations.query.graphql
index 0673acc5014..d69e7916512 100644
--- a/app/assets/javascripts/organizations/index/graphql/organizations.query.graphql
+++ b/app/assets/javascripts/organizations/shared/graphql/queries/organizations.query.graphql
@@ -1,19 +1,15 @@
+#import "~/graphql_shared/fragments/page_info.fragment.graphql"
+#import "../fragments/organization.fragment.graphql"
+
 query getCurrentUserOrganizations($first: Int, $last: Int, $before: String, $after: String) {
   currentUser {
     id
     organizations(first: $first, last: $last, before: $before, after: $after) {
       nodes {
-        id
-        name
-        descriptionHtml
-        avatarUrl
-        webUrl
+        ...Organization
       }
       pageInfo {
-        endCursor
-        hasNextPage
-        hasPreviousPage
-        startCursor
+        ...PageInfo
       }
     }
   }
diff --git a/app/assets/javascripts/organizations/shared/graphql/resolvers.js b/app/assets/javascripts/organizations/shared/graphql/resolvers.js
index 9ed1be62352..f36ddc4ce4b 100644
--- a/app/assets/javascripts/organizations/shared/graphql/resolvers.js
+++ b/app/assets/javascripts/organizations/shared/graphql/resolvers.js
@@ -24,15 +24,6 @@ export default {
       };
     },
   },
-  UserCore: {
-    organizations: async () => {
-      await simulateLoading();
-
-      return {
-        nodes: organizations,
-      };
-    },
-  },
   Mutation: {
     updateOrganization: async () => {
       // Simulate API loading
diff --git a/app/assets/javascripts/vue_shared/components/entity_select/organization_select.vue b/app/assets/javascripts/vue_shared/components/entity_select/organization_select.vue
index ba89de36595..c509c5715dc 100644
--- a/app/assets/javascripts/vue_shared/components/entity_select/organization_select.vue
+++ b/app/assets/javascripts/vue_shared/components/entity_select/organization_select.vue
@@ -1,10 +1,11 @@
 <script>
 import { GlAlert } from '@gitlab/ui';
 import * as Sentry from '~/sentry/sentry_browser_wrapper';
-import getCurrentUserOrganizationsClientQuery from '~/organizations/index/graphql/organizations_client.query.graphql';
+import getCurrentUserOrganizationsQuery from '~/organizations/shared/graphql/queries/organizations.query.graphql';
 import getOrganizationQuery from '~/organizations/shared/graphql/queries/organization.query.graphql';
 import { getIdFromGraphQLId, convertToGraphQLId } from '~/graphql_shared/utils';
-import { TYPENAME_ORGANIZATION } from '~/graphql_shared/constants';
+import { TYPE_ORGANIZATION } from '~/graphql_shared/constants';
+import { DEFAULT_PER_PAGE } from '~/api';
 import {
   ORGANIZATION_TOGGLE_TEXT,
   ORGANIZATION_HEADER_TEXT,
@@ -62,31 +63,43 @@ export default {
   data() {
     return {
       errorMessage: '',
+      endCursor: null,
     };
   },
   methods: {
-    async fetchOrganizations() {
+    async fetchOrganizations(search, page = 1) {
+      if (page === 1) {
+        this.endCursor = null;
+      }
+
       try {
         const {
           data: {
             currentUser: {
-              organizations: { nodes },
+              organizations: { nodes, pageInfo },
             },
           },
         } = await this.$apollo.query({
-          query: getCurrentUserOrganizationsClientQuery,
-          // TODO: implement search support - https://gitlab.com/gitlab-org/gitlab/-/issues/429999.
+          query: getCurrentUserOrganizationsQuery,
+          // TODO: implement search support - https://gitlab.com/gitlab-org/gitlab/-/issues/433954.
+          variables: { after: this.endCursor, first: DEFAULT_PER_PAGE },
         });
 
+        this.endCursor = pageInfo.endCursor;
+
         return {
           items: nodes.map((organization) => ({
             text: organization.name,
             value: getIdFromGraphQLId(organization.id),
           })),
-          // TODO: implement pagination - https://gitlab.com/gitlab-org/gitlab/-/issues/429999.
-          totalPages: 1,
+          // `EntitySelect` expects a `totalPages` key but GraphQL requests don't provide this data
+          // because it uses keyset pagination. Since the dropdown uses infinite scroll it
+          // only needs to know if there is a next page. We pass `page + 1` if there is a next page,
+          // otherwise we just set this to the current page.
+          totalPages: pageInfo.hasNextPage ? page + 1 : page,
         };
       } catch (error) {
+        this.endCursor = null;
         this.handleError({ message: FETCH_ORGANIZATIONS_ERROR, error });
 
         return { items: [], totalPages: 0 };
@@ -100,7 +113,7 @@ export default {
           },
         } = await this.$apollo.query({
           query: getOrganizationQuery,
-          variables: { id: convertToGraphQLId(TYPENAME_ORGANIZATION, id) },
+          variables: { id: convertToGraphQLId(TYPE_ORGANIZATION, id) },
         });
 
         return name;