Use Object spread over Object.assign in app/assets

See https://gitlab.com/gitlab-org/gitlab/-/issues/202172

This is part of multiple merge requests in order to reduce the risk of
breaking master

app/assets/javascripts/api.js

@@ -75,13 +75,11 @@ const Api = {
     const url = Api.buildUrl(Api.groupsPath);
     return axios
       .get(url, {
-        params: Object.assign(
-          {
-            search: query,
-            per_page: DEFAULT_PER_PAGE,
-          },
-          options,
-        ),
+        params: {
+          search: query,
+          per_page: DEFAULT_PER_PAGE,
+          ...options,
+        },
       })
       .then(({ data }) => {
         callback(data);
@@ -282,7 +280,7 @@ const Api = {
     };
     return axios
       .get(url, {
-        params: Object.assign({}, defaults, options),
+        params: { ...defaults, ...options },
       })
       .then(({ data }) => callback(data))
       .catch(() => flash(__('Something went wrong while fetching projects')));
@@ -365,13 +363,11 @@ const Api = {
   users(query, options) {
     const url = Api.buildUrl(this.usersPath);
     return axios.get(url, {
-      params: Object.assign(
-        {
-          search: query,
-          per_page: DEFAULT_PER_PAGE,
-        },
-        options,
-      ),
+      params: {
+        search: query,
+        per_page: DEFAULT_PER_PAGE,
+        ...options,
+      },
     });
   },
 
@@ -402,7 +398,7 @@ const Api = {
     };
     return axios
       .get(url, {
-        params: Object.assign({}, defaults, options),
+        params: { ...defaults, ...options },
       })
       .then(({ data }) => callback(data))
       .catch(() => flash(__('Something went wrong while fetching projects')));

app/assets/javascripts/behaviors/shortcuts/shortcuts_blob.js

@@ -22,7 +22,7 @@ function eventHasModifierKeys(event) {
 
 export default class ShortcutsBlob extends Shortcuts {
   constructor(opts) {
-    const options = Object.assign({}, defaults, opts);
+    const options = { ...defaults, ...opts };
     super(options.skipResetBindings);
     this.options = options;
 

app/assets/javascripts/blob/blob_fork_suggestion.js

@@ -17,7 +17,7 @@ const defaults = {
 
 class BlobForkSuggestion {
   constructor(options) {
-    this.elementMap = Object.assign({}, defaults, options);
+    this.elementMap = { ...defaults, ...options };
     this.onOpenButtonClick = this.onOpenButtonClick.bind(this);
     this.onCancelButtonClick = this.onCancelButtonClick.bind(this);
   }

app/assets/javascripts/boards/mixins/sortable_default_options.js

@@ -19,14 +19,15 @@ export function getBoardSortableDefaultOptions(obj) {
   const touchEnabled =
     'ontouchstart' in window || (window.DocumentTouch && document instanceof DocumentTouch);
 
-  const defaultSortOptions = Object.assign({}, sortableConfig, {
+  const defaultSortOptions = {
+    ...sortableConfig,
     filter: '.no-drag',
     delay: touchEnabled ? 100 : 0,
     scrollSensitivity: touchEnabled ? 60 : 100,
     scrollSpeed: 20,
     onStart: sortableStart,
     onEnd: sortableEnd,
-  });
+  };
 
   Object.keys(obj).forEach(key => {
     defaultSortOptions[key] = obj[key];

app/assets/javascripts/close_reopen_report_toggle.js

@@ -2,7 +2,7 @@ import DropLab from './droplab/drop_lab';
 import ISetter from './droplab/plugins/input_setter';
 
 // Todo: Remove this when fixing issue in input_setter plugin
-const InputSetter = Object.assign({}, ISetter);
+const InputSetter = { ...ISetter };
 
 class CloseReopenReportToggle {
   constructor(opts = {}) {

app/assets/javascripts/clusters/clusters_bundle.js

@@ -325,7 +325,7 @@ export default class Clusters {
 
   handleClusterStatusSuccess(data) {
     const prevStatus = this.store.state.status;
-    const prevApplicationMap = Object.assign({}, this.store.state.applications);
+    const prevApplicationMap = { ...this.store.state.applications };
 
     this.store.updateStateFromServer(data.data);
 

app/assets/javascripts/comment_type_toggle.js

@@ -2,7 +2,7 @@ import DropLab from './droplab/drop_lab';
 import ISetter from './droplab/plugins/input_setter';
 
 // Todo: Remove this when fixing issue in input_setter plugin
-const InputSetter = Object.assign({}, ISetter);
+const InputSetter = { ...ISetter };
 
 class CommentTypeToggle {
   constructor(opts = {}) {

app/assets/javascripts/create_merge_request_dropdown.js

@@ -13,7 +13,7 @@ import {
 import confidentialMergeRequestState from './confidential_merge_request/state';
 
 // Todo: Remove this when fixing issue in input_setter plugin
-const InputSetter = Object.assign({}, ISetter);
+const InputSetter = { ...ISetter };
 
 const CREATE_MERGE_REQUEST = 'create-mr';
 const CREATE_BRANCH = 'create-branch';

app/assets/javascripts/cycle_analytics/cycle_analytics_store.js

@@ -84,7 +84,7 @@ export default {
     events.forEach(item => {
       if (!item) return;
 
-      const eventItem = Object.assign({}, DEFAULT_EVENT_OBJECTS[stage.slug], item);
+      const eventItem = { ...DEFAULT_EVENT_OBJECTS[stage.slug], ...item };
 
       eventItem.totalTime = eventItem.total_time;
 

app/assets/javascripts/design_management/components/design_note_pin.vue

@@ -28,9 +28,7 @@ export default {
       return this.label === null;
     },
     pinStyle() {
-      return this.repositioning
-        ? Object.assign({}, this.position, { cursor: 'move' })
-        : this.position;
+      return this.repositioning ? { ...this.position, cursor: 'move' } : this.position;
     },
     pinLabel() {
       return this.isNewNote

app/assets/javascripts/diffs/store/utils.js

@@ -233,7 +233,7 @@ export function trimFirstCharOfLineContent(line = {}) {
   // eslint-disable-next-line no-param-reassign
   delete line.text;
 
-  const parsedLine = Object.assign({}, line);
+  const parsedLine = { ...line };
 
   if (line.rich_text) {
     const firstChar = parsedLine.rich_text.charAt(0);

app/assets/javascripts/environments/stores/environments_store.js

@@ -58,13 +58,14 @@ export default class EnvironmentsStore {
       let filtered = {};
 
       if (env.size > 1) {
-        filtered = Object.assign({}, env, {
+        filtered = {
+          ...env,
           isFolder: true,
           isLoadingFolderContent: oldEnvironmentState.isLoading || false,
           folderName: env.name,
           isOpen: oldEnvironmentState.isOpen || false,
           children: oldEnvironmentState.children || [],
-        });
+        };
       }
 
       if (env.latest) {
@@ -166,7 +167,7 @@ export default class EnvironmentsStore {
       let updated = env;
 
       if (env.latest) {
-        updated = Object.assign({}, env, env.latest);
+        updated = { ...env, ...env.latest };
         delete updated.latest;
       } else {
         updated = env;
@@ -192,7 +193,7 @@ export default class EnvironmentsStore {
     const { environments } = this.state;
 
     const updatedEnvironments = environments.map(env => {
-      const updateEnv = Object.assign({}, env);
+      const updateEnv = { ...env };
       if (env.id === environment.id) {
         updateEnv[prop] = newValue;
       }

app/assets/javascripts/filtered_search/filtered_search_dropdown_manager.js

@@ -120,7 +120,7 @@ export default class FilteredSearchDropdownManager {
         filter: key,
       };
       const extraArguments = mappingKey.extraArguments || {};
-      const glArguments = Object.assign({}, defaultArguments, extraArguments);
+      const glArguments = { ...defaultArguments, ...extraArguments };
 
       // Passing glArguments to `new glClass(<arguments>)`
       mappingKey.reference = new (Function.prototype.bind.apply(glClass, [null, glArguments]))();

app/assets/javascripts/filtered_search/stores/recent_searches_store.js

@@ -2,14 +2,12 @@ import { uniq } from 'lodash';
 
 class RecentSearchesStore {
   constructor(initialState = {}, allowedKeys) {
-    this.state = Object.assign(
-      {
-        isLocalStorageAvailable: true,
-        recentSearches: [],
-        allowedKeys,
-      },
-      initialState,
-    );
+    this.state = {
+      isLocalStorageAvailable: true,
+      recentSearches: [],
+      allowedKeys,
+      ...initialState,
+    };
   }
 
   addRecentSearch(newSearch) {

app/assets/javascripts/gl_dropdown.js

@@ -595,13 +595,14 @@ class GitLabDropdown {
 
     return renderItem({
       instance: this,
-      options: Object.assign({}, this.options, {
+      options: {
+        ...this.options,
         icon: this.icon,
         highlight: this.highlight,
         highlightText: text => this.highlightTextMatches(text, this.filterInput.val()),
         highlightTemplate: this.highlightTemplate.bind(this),
         parent,
-      }),
+      },
       data,
       group,
       index,

app/assets/javascripts/gl_form.js

@@ -8,7 +8,7 @@ export default class GLForm {
   constructor(form, enableGFM = {}) {
     this.form = form;
     this.textarea = this.form.find('textarea.js-gfm-input');
-    this.enableGFM = Object.assign({}, defaultAutocompleteConfig, enableGFM);
+    this.enableGFM = { ...defaultAutocompleteConfig, ...enableGFM };
     // Disable autocomplete for keywords which do not have dataSources available
     const dataSources = (gl.GfmAutoComplete && gl.GfmAutoComplete.dataSources) || {};
     Object.keys(this.enableGFM).forEach(item => {

app/assets/javascripts/groups/new_group_child.js

@@ -2,7 +2,7 @@ import { visitUrl } from '../lib/utils/url_utility';
 import DropLab from '../droplab/drop_lab';
 import ISetter from '../droplab/plugins/input_setter';
 
-const InputSetter = Object.assign({}, ISetter);
+const InputSetter = { ...ISetter };
 
 const NEW_PROJECT = 'new-project';
 const NEW_SUBGROUP = 'new-subgroup';

app/assets/javascripts/ide/lib/diff/diff.js

@@ -14,13 +14,12 @@ export const computeDiff = (originalContent, newContent) => {
         endLineNumber: lineNumber + change.count - 1,
       });
     } else if ('added' in change || 'removed' in change) {
-      acc.push(
-        Object.assign({}, change, {
-          lineNumber,
-          modified: undefined,
-          endLineNumber: lineNumber + change.count - 1,
-        }),
-      );
+      acc.push({
+        ...change,
+        lineNumber,
+        modified: undefined,
+        endLineNumber: lineNumber + change.count - 1,
+      });
     }
 
     if (!change.removed) {

app/assets/javascripts/ide/stores/mutations/project.js

@@ -16,9 +16,7 @@ export default {
     });
 
     Object.assign(state, {
-      projects: Object.assign({}, state.projects, {
-        [projectPath]: project,
-      }),
+      projects: { ...state.projects, [projectPath]: project },
     });
   },
   [types.TOGGLE_EMPTY_STATE](state, { projectPath, value }) {

app/assets/javascripts/ide/stores/mutations/tree.js

@@ -14,12 +14,13 @@ export default {
   },
   [types.CREATE_TREE](state, { treePath }) {
     Object.assign(state, {
-      trees: Object.assign({}, state.trees, {
+      trees: {
+        ...state.trees,
         [treePath]: {
           tree: [],
           loading: true,
         },
-      }),
+      },
     });
   },
   [types.SET_DIRECTORY_DATA](state, { data, treePath }) {

app/assets/javascripts/image_diff/helpers/comment_indicator_helper.js

@@ -32,9 +32,7 @@ export function removeCommentIndicator(imageFrameEl) {
     commentIndicatorEl.remove();
   }
 
-  return Object.assign({}, meta, {
-    removed: willRemove,
-  });
+  return { ...meta, removed: willRemove };
 }
 
 export function showCommentIndicator(imageFrameEl, coordinate) {

app/assets/javascripts/image_diff/helpers/dom_helper.js

@@ -4,12 +4,7 @@ export function setPositionDataAttribute(el, options) {
   const { x, y, width, height } = options;
   const { position } = el.dataset;
 
-  const positionObject = Object.assign({}, JSON.parse(position), {
-    x,
-    y,
-    width,
-    height,
-  });
+  const positionObject = { ...JSON.parse(position), x, y, width, height };
 
   el.setAttribute('data-position', JSON.stringify(positionObject));
 }

app/assets/javascripts/image_diff/image_diff.js

@@ -75,9 +75,7 @@ export default class ImageDiff {
     if (this.renderCommentBadge) {
       imageDiffHelper.addImageCommentBadge(this.imageFrameEl, options);
     } else {
-      const numberBadgeOptions = Object.assign({}, options, {
-        badgeText: index + 1,
-      });
+      const numberBadgeOptions = { ...options, badgeText: index + 1 };
 
       imageDiffHelper.addImageBadge(this.imageFrameEl, numberBadgeOptions);
     }

app/assets/javascripts/jobs/store/actions.js

@@ -220,7 +220,7 @@ export const fetchJobsForStage = ({ dispatch }, stage = {}) => {
       },
     })
     .then(({ data }) => {
-      const retriedJobs = data.retried.map(job => Object.assign({}, job, { retried: true }));
+      const retriedJobs = data.retried.map(job => ({ ...job, retried: true }));
       const jobs = data.latest_statuses.concat(retriedJobs);
 
       dispatch('receiveJobsForStageSuccess', jobs);
@@ -236,7 +236,7 @@ export const receiveJobsForStageError = ({ commit }) => {
 
 export const triggerManualJob = ({ state }, variables) => {
   const parsedVariables = variables.map(variable => {
-    const copyVar = Object.assign({}, variable);
+    const copyVar = { ...variable };
     delete copyVar.id;
     return copyVar;
   });

app/assets/javascripts/notes/components/notes_app.vue

@@ -230,10 +230,11 @@ export default {
       const defaultConfig = { path: this.getNotesDataByProp('discussionsPath') };
 
       if (doesHashExistInUrl(constants.NOTE_UNDERSCORE)) {
-        return Object.assign({}, defaultConfig, {
+        return {
+          ...defaultConfig,
           filter: constants.DISCUSSION_FILTERS_DEFAULT_VALUE,
           persistFilter: false,
-        });
+        };
       }
       return defaultConfig;
     },

app/assets/javascripts/notes/stores/actions.js

@@ -248,7 +248,7 @@ export const saveNote = ({ commit, dispatch }, noteData) => {
   const hasQuickActions = utils.hasQuickActions(placeholderText);
   const replyId = noteData.data.in_reply_to_discussion_id;
   let methodToDispatch;
-  const postData = Object.assign({}, noteData);
+  const postData = { ...noteData };
   if (postData.isDraft === true) {
     methodToDispatch = replyId
       ? 'batchComments/addDraftToDiscussion'

app/assets/javascripts/pipelines/components/pipelines_table_row.vue

@@ -99,9 +99,10 @@ export default {
 
           // 3. If GitLab user does not have avatar, they might have a Gravatar
         } else if (this.pipeline.commit.author_gravatar_url) {
-          commitAuthorInformation = Object.assign({}, this.pipeline.commit.author, {
+          commitAuthorInformation = {
+            ...this.pipeline.commit.author,
             avatar_url: this.pipeline.commit.author_gravatar_url,
-          });
+          };
         }
         // 4. If committer is not a GitLab User, they can have a Gravatar
       } else {

app/assets/javascripts/pipelines/stores/pipeline_store.js

@@ -15,7 +15,7 @@ export default class PipelineStore {
    * @param {Object} pipeline
    */
   storePipeline(pipeline = {}) {
-    const pipelineCopy = Object.assign({}, pipeline);
+    const pipelineCopy = { ...pipeline };
 
     if (pipelineCopy.triggered_by) {
       pipelineCopy.triggered_by = [pipelineCopy.triggered_by];

app/assets/javascripts/registry/settings/store/mutations.js

@@ -21,7 +21,7 @@ export default {
     state.original = Object.freeze(settings);
   },
   [types.RESET_SETTINGS](state) {
-    state.settings = Object.assign({}, state.original);
+    state.settings = { ...state.original };
   },
   [types.TOGGLE_LOADING](state) {
     state.isLoading = !state.isLoading;

app/assets/javascripts/terminal/terminal.js

@@ -13,14 +13,11 @@ Terminal.applyAddon(webLinks);
 
 export default class GLTerminal {
   constructor(element, options = {}) {
-    this.options = Object.assign(
-      {},
-      {
-        cursorBlink: true,
-        screenKeys: true,
-      },
-      options,
-    );
+    this.options = {
+      cursorBlink: true,
+      screenKeys: true,
+      ...options,
+    };
 
     this.container = element;
     this.onDispose = [];