Add latest changes from gitlab-org/gitlab@master

Author: GitLab Bot

README.md

@@ -82,7 +82,7 @@ Instructions on how to start GitLab and how to run the tests can be found in the
 GitLab is a Ruby on Rails application that runs on the following software:
 
 - Ubuntu/Debian/CentOS/RHEL/OpenSUSE
-- Ruby (MRI) 3.1.4
+- Ruby (MRI) 3.2.5
 - Git 2.33+
 - Redis 6.0+
 - PostgreSQL 14.9+

app/assets/javascripts/behaviors/date_picker.js

@@ -1,6 +1,6 @@
 import $ from 'jquery';
 import Pikaday from 'pikaday';
-import { parsePikadayDate, pikadayToString } from '~/lib/utils/datetime_utility';
+import { parsePikadayDate, toISODateFormat } from '~/lib/utils/datetime_utility';
 
 export default function initDatePickers() {
   $('.datepicker').each(function initPikaday() {
@@ -13,7 +13,7 @@ export default function initDatePickers() {
       format: 'yyyy-mm-dd',
       container: $datePicker.parent().get(0),
       parse: (dateString) => parsePikadayDate(dateString),
-      toString: (date) => pikadayToString(date),
+      toString: (date) => toISODateFormat(date),
       onSelect(dateText) {
         $datePicker.val(calendar.toString(dateText));
       },

app/assets/javascripts/graphql_shared/constants.js

@@ -35,3 +35,6 @@ 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';
+
+export const QUERY_PARAM_START_CURSOR = 'start_cursor';
+export const QUERY_PARAM_END_CURSOR = 'end_cursor';

app/assets/javascripts/graphql_shared/utils.js

@@ -1,5 +1,6 @@
 import { isArray } from 'lodash';
 import Visibility from 'visibilityjs';
+import { QUERY_PARAM_START_CURSOR, QUERY_PARAM_END_CURSOR } from './constants';
 
 /**
  * Ids generated by GraphQL endpoints are usually in the format
@@ -162,3 +163,25 @@ export const etagQueryHeaders = (featureCorrelation, etagResource = '') => {
     },
   };
 };
+
+export const calculateGraphQLPaginationQueryParams = ({
+  startCursor,
+  endCursor,
+  routeQuery: { start_cursor, end_cursor, ...routeQuery },
+}) => {
+  if (startCursor) {
+    return {
+      ...routeQuery,
+      [QUERY_PARAM_START_CURSOR]: startCursor,
+    };
+  }
+
+  if (endCursor) {
+    return {
+      ...routeQuery,
+      [QUERY_PARAM_END_CURSOR]: endCursor,
+    };
+  }
+
+  return routeQuery;
+};

app/assets/javascripts/issuable/issuable_form.js

@@ -2,7 +2,7 @@ import $ from 'jquery';
 import Pikaday from 'pikaday';
 import GfmAutoComplete from 'ee_else_ce/gfm_auto_complete';
 import Autosave from '~/autosave';
-import { parsePikadayDate, pikadayToString } from '~/lib/utils/datetime_utility';
+import { parsePikadayDate, toISODateFormat } from '~/lib/utils/datetime_utility';
 import { queryToObject, objectToQuery } from '~/lib/utils/url_utility';
 import UsersSelect from '~/users_select';
 import ZenMode from '~/zen_mode';
@@ -114,7 +114,7 @@ export default class IssuableForm {
         format: 'yyyy-mm-dd',
         container: $issuableDueDate.parent().get(0),
         parse: (dateString) => parsePikadayDate(dateString),
-        toString: (date) => pikadayToString(date),
+        toString: (date) => toISODateFormat(date),
         onSelect: (dateText) => {
           $issuableDueDate.val(calendar.toString(dateText));
           if (this.autosaves.has('due_date')) this.autosaves.get('due_date').save();

app/assets/javascripts/lib/utils/datetime/date_calculation_utility.js

@@ -33,7 +33,7 @@ export const MILLISECONDS_IN_DAY = 24 * 60 * 60 * 1000;
  * for UTC-8 timezone.
  *
  * @param {string|number|Date} date
- * @returns {Date|null|undefined}
+ * @returns {Date|null|undefined} A Date object in local time
  */
 export const newDate = (date) => {
   if (date === null) {
@@ -42,6 +42,7 @@ export const newDate = (date) => {
   if (date === undefined) {
     return undefined;
   }
+  // Fix historical bug so we return a local time for `yyyy-mm-dd` date-only strings
   if (typeof date === 'string' && DATE_ONLY_REGEX.test(date)) {
     const parts = date.split('-');
     const year = parseInt(parts[0], 10);
@@ -545,48 +546,6 @@ export const dateAtFirstDayOfMonth = (date) => new Date(cloneDate(date).setDate(
  */
 export const datesMatch = (date1, date2) => differenceInMilliseconds(date1, date2) === 0;
 
-/**
- * A utility function which checks if two date ranges overlap.
- *
- * @param {Object} givenPeriodLeft - the first period to compare.
- * @param {Object} givenPeriodRight - the second period to compare.
- * @returns {Object} { overlap: number of days the overlap is present, overlapStartDate: the start date of the overlap in time format, overlapEndDate: the end date of the overlap in time format }
- * @throws {Error} Uncaught Error: Invalid period
- *
- * @example
- * getOverlappingDaysInPeriods(
- *   { start: new Date(2021, 0, 11), end: new Date(2021, 0, 13) },
- *   { start: new Date(2021, 0, 11), end: new Date(2021, 0, 14) }
- * ) => { daysOverlap: 2, overlapStartDate: 1610323200000, overlapEndDate: 1610496000000 }
- *
- */
-export const getOverlappingDaysInPeriods = (givenPeriodLeft = {}, givenPeriodRight = {}) => {
-  const leftStartTime = new Date(givenPeriodLeft.start).getTime();
-  const leftEndTime = new Date(givenPeriodLeft.end).getTime();
-  const rightStartTime = new Date(givenPeriodRight.start).getTime();
-  const rightEndTime = new Date(givenPeriodRight.end).getTime();
-
-  if (!(leftStartTime <= leftEndTime && rightStartTime <= rightEndTime)) {
-    throw new Error(__('Invalid period'));
-  }
-
-  const isOverlapping = leftStartTime < rightEndTime && rightStartTime < leftEndTime;
-
-  if (!isOverlapping) {
-    return { daysOverlap: 0 };
-  }
-
-  const overlapStartDate = Math.max(leftStartTime, rightStartTime);
-  const overlapEndDate = rightEndTime > leftEndTime ? leftEndTime : rightEndTime;
-  const differenceInMs = overlapEndDate - overlapStartDate;
-
-  return {
-    daysOverlap: Math.ceil(differenceInMs / MILLISECONDS_IN_DAY),
-    overlapStartDate,
-    overlapEndDate,
-  };
-};
-
 /**
  * Mimics the behaviour of the rails distance_of_time_in_words function
  * https://api.rubyonrails.org/classes/ActionView/Helpers/DateHelper.html#method-i-distance_of_time_in_words
@@ -634,21 +593,6 @@ export const approximateDuration = (seconds = 0) => {
   return n__('1 day', '%d days', seconds < ONE_DAY_LIMIT ? 1 : days);
 };
 
-/**
- * A utility function which helps creating a date object
- * for a specific date. Accepts the year, month and day
- * returning a date object for the given params.
- *
- * @param {Int} year the full year as a number i.e. 2020
- * @param {Int} month the month index i.e. January => 0
- * @param {Int} day the day as a number i.e. 23
- *
- * @return {Date} the date object from the params
- */
-export const dateFromParams = (year, month, day) => {
-  return new Date(year, month, day);
-};
-
 /**
  * A utility function which computes a formatted 24 hour
  * time string from a positive int in the range 0 - 24.

app/assets/javascripts/lib/utils/datetime/date_format_utility.js

@@ -357,6 +357,19 @@ export const timeToHoursMinutes = (time = '') => {
   return { hours, minutes };
 };
 
+/**
+ * Converts a Date object to a date-only string in the ISO format `yyyy-mm-dd`
+ *
+ * @param {Date} date A Date object
+ * @returns {string} A string in the format `yyyy-mm-dd`
+ */
+export const toISODateFormat = (date) => {
+  const day = padWithZeros(date.getDate());
+  const month = padWithZeros(date.getMonth() + 1);
+  const year = date.getFullYear();
+  return `${year}-${month}-${day}`;
+};
+
 /**
  * This combines a date and a time and returns the computed Date's ISO string representation.
  *
@@ -516,3 +529,15 @@ export const humanTimeframe = (startDate, dueDate) => {
   }
   return '';
 };
+
+/**
+ * Formats seconds into a human readable value of elapsed time,
+ * optionally limiting it to hours.
+ * @param {Number} seconds Seconds to format
+ * @param {Boolean} limitToHours Whether or not to limit the elapsed time to be expressed in hours
+ * @return {String} Provided seconds in human readable elapsed time format
+ */
+export const formatTimeSpent = (seconds, limitToHours) => {
+  const negative = seconds < 0;
+  return (negative ? '- ' : '') + stringifyTime(parseSeconds(seconds, { limitToHours }));
+};

app/assets/javascripts/lib/utils/datetime/pikaday_utility.js

@@ -1,5 +1,3 @@
-export const pad = (val, len = 2) => `0${val}`.slice(-len);
-
 /**
  * Formats dates in Pickaday
  * @param {String} dateString Date in yyyy-mm-dd format
@@ -13,16 +11,3 @@ export const parsePikadayDate = (dateString) => {
 
   return new Date(year, month, day);
 };
-
-/**
- * Used `onSelect` method in pickaday
- * @param {Date} date UTC format
- * @return {String} Date formatted in yyyy-mm-dd
- */
-export const pikadayToString = (date) => {
-  const day = pad(date.getDate());
-  const month = pad(date.getMonth() + 1);
-  const year = date.getFullYear();
-
-  return `${year}-${month}-${day}`;
-};

app/assets/javascripts/lib/utils/datetime/time_spent_utility.js

@@ -2,5 +2,4 @@ export * from './datetime/timeago_utility';
 export * from './datetime/date_format_utility';
 export * from './datetime/date_calculation_utility';
 export * from './datetime/pikaday_utility';
-export * from './datetime/time_spent_utility';
 export * from './datetime/locale_dateformat';

app/assets/javascripts/lib/utils/datetime_utility.js

@@ -6,16 +6,15 @@ import GroupsView from '~/organizations/shared/components/groups_view.vue';
 import ProjectsView from '~/organizations/shared/components/projects_view.vue';
 import NewGroupButton from '~/organizations/shared/components/new_group_button.vue';
 import NewProjectButton from '~/organizations/shared/components/new_project_button.vue';
-import { onPageChange } from '~/organizations/shared/utils';
+import { calculateGraphQLPaginationQueryParams } from '~/graphql_shared/utils';
 import {
   RESOURCE_TYPE_GROUPS,
   RESOURCE_TYPE_PROJECTS,
-  QUERY_PARAM_END_CURSOR,
-  QUERY_PARAM_START_CURSOR,
   SORT_DIRECTION_ASC,
   SORT_DIRECTION_DESC,
   SORT_ITEM_NAME,
 } from '~/organizations/shared/constants';
+import { QUERY_PARAM_END_CURSOR, QUERY_PARAM_START_CURSOR } from '~/graphql_shared/constants';
 import FilteredSearchAndSort from '~/groups_projects/components/filtered_search_and_sort.vue';
 import {
   RECENT_SEARCHES_STORAGE_KEY_GROUPS,
@@ -172,7 +171,9 @@ export default {
       });
     },
     onPageChange(pagination) {
-      this.pushQuery(onPageChange({ ...pagination, routeQuery: this.$route.query }));
+      this.pushQuery(
+        calculateGraphQLPaginationQueryParams({ ...pagination, routeQuery: this.$route.query }),
+      );
     },
     async userPreferencesUpdateMutate(input) {
       try {

app/assets/javascripts/organizations/groups_and_projects/components/app.vue

@@ -30,9 +30,6 @@ export const FORM_FIELD_DESCRIPTION_VALIDATORS = [
   ),
 ];
 
-export const QUERY_PARAM_START_CURSOR = 'start_cursor';
-export const QUERY_PARAM_END_CURSOR = 'end_cursor';
-
 export const SORT_DIRECTION_ASC = 'asc';
 export const SORT_DIRECTION_DESC = 'desc';
 

app/assets/javascripts/organizations/shared/constants.js

@@ -4,12 +4,7 @@ import {
   TIMESTAMP_TYPE_CREATED_AT,
   TIMESTAMP_TYPE_UPDATED_AT,
 } from '~/vue_shared/components/resource_lists/constants';
-import {
-  SORT_CREATED_AT,
-  SORT_UPDATED_AT,
-  QUERY_PARAM_END_CURSOR,
-  QUERY_PARAM_START_CURSOR,
-} from './constants';
+import { SORT_CREATED_AT, SORT_UPDATED_AT } from './constants';
 
 const availableGroupActions = (userPermissions) => {
   const baseActions = [];
@@ -52,28 +47,6 @@ export const formatGroups = (groups) =>
     }),
   );
 
-export const onPageChange = ({
-  startCursor,
-  endCursor,
-  routeQuery: { start_cursor, end_cursor, ...routeQuery },
-}) => {
-  if (startCursor) {
-    return {
-      ...routeQuery,
-      [QUERY_PARAM_START_CURSOR]: startCursor,
-    };
-  }
-
-  if (endCursor) {
-    return {
-      ...routeQuery,
-      [QUERY_PARAM_END_CURSOR]: endCursor,
-    };
-  }
-
-  return routeQuery;
-};
-
 export const timestampType = (sortName) => {
   const SORT_MAP = {
     [SORT_CREATED_AT]: TIMESTAMP_TYPE_CREATED_AT,

app/assets/javascripts/organizations/shared/utils.js

@@ -4,16 +4,15 @@ import { isEqual } from 'lodash';
 import { s__, __ } from '~/locale';
 import GroupsView from '~/organizations/shared/components/groups_view.vue';
 import ProjectsView from '~/organizations/shared/components/projects_view.vue';
-import { onPageChange } from '~/organizations/shared/utils';
+import { calculateGraphQLPaginationQueryParams } from '~/graphql_shared/utils';
 import {
   RESOURCE_TYPE_GROUPS,
   RESOURCE_TYPE_PROJECTS,
-  QUERY_PARAM_END_CURSOR,
-  QUERY_PARAM_START_CURSOR,
   SORT_CREATED_AT,
   SORT_UPDATED_AT,
   SORT_DIRECTION_DESC,
 } from '~/organizations/shared/constants';
+import { QUERY_PARAM_END_CURSOR, QUERY_PARAM_START_CURSOR } from '~/graphql_shared/constants';
 import { GROUPS_AND_PROJECTS_PER_PAGE } from '../constants';
 import { buildDisplayListboxItem } from '../utils';
 
@@ -108,7 +107,9 @@ export default {
       this.pushQuery({ display });
     },
     onPageChange(pagination) {
-      this.pushQuery(onPageChange({ ...pagination, routeQuery: this.$route.query }));
+      this.pushQuery(
+        calculateGraphQLPaginationQueryParams({ ...pagination, routeQuery: this.$route.query }),
+      );
     },
   },
 };

app/assets/javascripts/organizations/show/components/groups_and_projects.vue

@@ -7,7 +7,7 @@ import {
   getDayName,
   getDayDifference,
   localeDateFormat,
-  pikadayToString,
+  toISODateFormat,
   newDate,
 } from '~/lib/utils/datetime_utility';
 import { n__, s__, __ } from '~/locale';
@@ -117,7 +117,7 @@ export default class ActivityCalendar {
       date.setDate(date.getDate() + i);
 
       const day = date.getDay();
-      const count = timestamps[pikadayToString(date)] || 0;
+      const count = timestamps[toISODateFormat(date)] || 0;
 
       // Create a new group array if this is the first day of the week
       // or if is first object