app/assets/javascripts/content_editor/extensions/audio.js

 import Playable from './playable';
 
 export default Playable.extend({
+  name: 'audio',
   defaultOptions: {
     ...Playable.options,
     mediaType: 'audio',

app/assets/javascripts/content_editor/extensions/description_item.js

+import { Node, mergeAttributes } from '@tiptap/core';
+
+export default Node.create({
+  name: 'descriptionItem',
+  content: 'block+',
+  defining: true,
+
+  addAttributes() {
+    return {
+      isTerm: {
+        default: true,
+        parseHTML: (element) => ({
+          isTerm: element.tagName.toLowerCase() === 'dt',
+        }),
+      },
+    };
+  },
+
+  parseHTML() {
+    return [{ tag: 'dt' }, { tag: 'dd' }];
+  },
+
+  renderHTML({ HTMLAttributes: { isTerm, ...HTMLAttributes } }) {
+    return [
+      'li',
+      mergeAttributes(HTMLAttributes, { class: isTerm ? 'dl-term' : 'dl-description' }),
+      0,
+    ];
+  },
+
+  addKeyboardShortcuts() {
+    return {
+      Enter: () => {
+        return this.editor.commands.splitListItem('descriptionItem');
+      },
+      Tab: () => {
+        const { isTerm } = this.editor.getAttributes('descriptionItem');
+        if (isTerm)
+          return this.editor.commands.updateAttributes('descriptionItem', { isTerm: !isTerm });
+
+        return false;
+      },
+      'Shift-Tab': () => {
+        const { isTerm } = this.editor.getAttributes('descriptionItem');
+        if (isTerm) return this.editor.commands.liftListItem('descriptionItem');
+
+        return this.editor.commands.updateAttributes('descriptionItem', { isTerm: true });
+      },
+    };
+  },
+});

app/assets/javascripts/content_editor/extensions/description_list.js

+import { Node, mergeAttributes } from '@tiptap/core';
+import { wrappingInputRule } from 'prosemirror-inputrules';
+
+export const inputRegex = /^\s*(<dl>)$/;
+
+export default Node.create({
+  name: 'descriptionList',
+  // eslint-disable-next-line @gitlab/require-i18n-strings
+  group: 'block list',
+  content: 'descriptionItem+',
+
+  parseHTML() {
+    return [{ tag: 'dl' }];
+  },
+
+  renderHTML({ HTMLAttributes }) {
+    return ['ul', mergeAttributes(HTMLAttributes, { class: 'dl-content' }), 0];
+  },
+
+  addInputRules() {
+    return [wrappingInputRule(inputRegex, this.type)];
+  },
+});

app/assets/javascripts/content_editor/extensions/division.js

+import { Node } from '@tiptap/core';
+import { PARSE_HTML_PRIORITY_LOWEST } from '../constants';
+
+export default Node.create({
+  name: 'division',
+  content: 'block*',
+  group: 'block',
+  defining: true,
+
+  parseHTML() {
+    return [{ tag: 'div', priority: PARSE_HTML_PRIORITY_LOWEST }];
+  },
+
+  renderHTML({ HTMLAttributes }) {
+    return ['div', HTMLAttributes, 0];
+  },
+});

app/assets/javascripts/content_editor/extensions/figure.js

+import { Node } from '@tiptap/core';
+
+export default Node.create({
+  name: 'figure',
+  content: 'block+',
+  group: 'block',
+  defining: true,
+
+  parseHTML() {
+    return [{ tag: 'figure' }];
+  },
+
+  renderHTML({ HTMLAttributes }) {
+    return ['figure', HTMLAttributes, 0];
+  },
+});

app/assets/javascripts/content_editor/extensions/figure_caption.js

+import { Node } from '@tiptap/core';
+
+export default Node.create({
+  name: 'figureCaption',
+  content: 'inline*',
+  group: 'block',
+  defining: true,
+
+  parseHTML() {
+    return [{ tag: 'figcaption' }];
+  },
+
+  renderHTML({ HTMLAttributes }) {
+    return ['figcaption', HTMLAttributes, 0];
+  },
+});

app/assets/javascripts/content_editor/extensions/playable.js

+/* eslint-disable @gitlab/require-i18n-strings */
+
 import { Node } from '@tiptap/core';
 
 const queryPlayableElement = (element, mediaType) => element.querySelector(mediaType);
 
 export default Node.create({
-  name: 'playable',
   group: 'inline',
   inline: true,
   draggable: true,
@@ -46,7 +47,7 @@ export default Node.create({
   parseHTML() {
     return [
       {
-        tag: '.media-container',
+        tag: `.${this.options.mediaType}-container`,
       },
     ];
   },
@@ -54,7 +55,7 @@ export default Node.create({
   renderHTML({ node }) {
     return [
       'span',
-      { class: 'media-container' },
+      { class: `media-container ${this.options.mediaType}-container` },
       [
         this.options.mediaType,
         {

app/assets/javascripts/content_editor/extensions/video.js

+import Playable from './playable';
+
+export default Playable.extend({
+  name: 'video',
+  defaultOptions: {
+    ...Playable.options,
+    mediaType: 'video',
+    extraElementAttrs: { width: '400' },
+  },
+});

app/assets/javascripts/content_editor/services/create_content_editor.js

@@ -8,9 +8,14 @@ import Bold from '../extensions/bold';
 import BulletList from '../extensions/bullet_list';
 import Code from '../extensions/code';
 import CodeBlockHighlight from '../extensions/code_block_highlight';
+import DescriptionItem from '../extensions/description_item';
+import DescriptionList from '../extensions/description_list';
+import Division from '../extensions/division';
 import Document from '../extensions/document';
 import Dropcursor from '../extensions/dropcursor';
 import Emoji from '../extensions/emoji';
+import Figure from '../extensions/figure';
+import FigureCaption from '../extensions/figure_caption';
 import Gapcursor from '../extensions/gapcursor';
 import HardBreak from '../extensions/hard_break';
 import Heading from '../extensions/heading';
@@ -36,6 +41,7 @@ import TableRow from '../extensions/table_row';
 import TaskItem from '../extensions/task_item';
 import TaskList from '../extensions/task_list';
 import Text from '../extensions/text';
+import Video from '../extensions/video';
 import { ContentEditor } from './content_editor';
 import createMarkdownSerializer from './markdown_serializer';
 import trackInputRulesAndShortcuts from './track_input_rules_and_shortcuts';
@@ -70,9 +76,14 @@ export const createContentEditor = ({
     BulletList,
     Code,
     CodeBlockHighlight,
+    DescriptionItem,
+    DescriptionList,
     Document,
+    Division,
     Dropcursor,
     Emoji,
+    Figure,
+    FigureCaption,
     Gapcursor,
     HardBreak,
     Heading,
@@ -98,6 +109,7 @@ export const createContentEditor = ({
     TaskItem,
     TaskList,
     Text,
+    Video,
   ];
 
   const allExtensions = [...builtInContentEditorExtensions, ...extensions];

app/assets/javascripts/content_editor/services/markdown_serializer.js

@@ -9,7 +9,12 @@ import Bold from '../extensions/bold';
 import BulletList from '../extensions/bullet_list';
 import Code from '../extensions/code';
 import CodeBlockHighlight from '../extensions/code_block_highlight';
+import DescriptionItem from '../extensions/description_item';
+import DescriptionList from '../extensions/description_list';
+import Division from '../extensions/division';
 import Emoji from '../extensions/emoji';
+import Figure from '../extensions/figure';
+import FigureCaption from '../extensions/figure_caption';
 import HardBreak from '../extensions/hard_break';
 import Heading from '../extensions/heading';
 import HorizontalRule from '../extensions/horizontal_rule';
@@ -32,6 +37,7 @@ import TableRow from '../extensions/table_row';
 import TaskItem from '../extensions/task_item';
 import TaskList from '../extensions/task_list';
 import Text from '../extensions/text';
+import Video from '../extensions/video';
 import {
   isPlainURL,
   renderHardBreak,
@@ -43,6 +49,7 @@ import {
   renderOrderedList,
   renderImage,
   renderPlayable,
+  renderHTMLNode,
 } from './serialization_helpers';
 
 const defaultSerializerConfig = {
@@ -116,11 +123,20 @@ const defaultSerializerConfig = {
       state.write('```');
       state.closeBlock(node);
     },
+    [Division.name]: renderHTMLNode('div'),
+    [DescriptionList.name]: renderHTMLNode('dl', true),
+    [DescriptionItem.name]: (state, node, parent, index) => {
+      if (index === 1) state.ensureNewLine();
+      renderHTMLNode(node.attrs.isTerm ? 'dt' : 'dd')(state, node);
+      if (index === parent.childCount - 1) state.ensureNewLine();
+    },
     [Emoji.name]: (state, node) => {
       const { name } = node.attrs;
 
       state.write(`:${name}:`);
     },
+    [Figure.name]: renderHTMLNode('figure'),
+    [FigureCaption.name]: renderHTMLNode('figcaption'),
     [HardBreak.name]: renderHardBreak,
     [Heading.name]: defaultMarkdownSerializer.nodes.heading,
     [HorizontalRule.name]: defaultMarkdownSerializer.nodes.horizontal_rule,
@@ -144,6 +160,7 @@ const defaultSerializerConfig = {
       else defaultMarkdownSerializer.nodes.bullet_list(state, node);
     },
     [Text.name]: defaultMarkdownSerializer.nodes.text,
+    [Video.name]: renderPlayable,
   },
 };
 

app/assets/javascripts/content_editor/services/serialization_helpers.js

@@ -6,6 +6,11 @@ const defaultAttrs = {
   th: { colspan: 1, rowspan: 1, colwidth: null },
 };
 
+const ignoreAttrs = {
+  dd: ['isTerm'],
+  dt: ['isTerm'],
+};
+
 const tableMap = new WeakMap();
 
 // Source taken from
@@ -24,12 +29,20 @@ export function isPlainURL(link, parent, index, side) {
   return !link.isInSet(next.marks);
 }
 
-function shouldRenderCellInline(cell) {
+function containsOnlyText(node) {
+  if (node.childCount === 1) {
+    const child = node.child(0);
+    return child.isText && child.marks.length === 0;
+  }
+
+  return false;
+}
+
+function containsParagraphWithOnlyText(cell) {
   if (cell.childCount === 1) {
-    const parent = cell.child(0);
-    if (parent.type.name === 'paragraph' && parent.childCount === 1) {
-      const child = parent.child(0);
-      return child.isText && child.marks.length === 0;
+    const child = cell.child(0);
+    if (child.type.name === 'paragraph') {
+      return containsOnlyText(child);
     }
   }
 
@@ -110,7 +123,8 @@ export function openTag(tagName, attrs) {
 
   str += Object.entries(attrs || {})
     .map(([key, value]) => {
-      if (defaultAttrs[tagName]?.[key] === value) return '';
+      if ((ignoreAttrs[tagName] || []).includes(key) || defaultAttrs[tagName]?.[key] === value)
+        return '';
 
       return ` ${key}="${htmlEncode(value?.toString())}"`;
     })
@@ -208,7 +222,7 @@ function renderTableRowAsHTML(state, node) {
 
     renderTagOpen(state, tag, cell.attrs);
 
-    if (!shouldRenderCellInline(cell)) {
+    if (!containsParagraphWithOnlyText(cell)) {
       state.closeBlock(node);
       state.flushClose();
     }
@@ -222,6 +236,38 @@ function renderTableRowAsHTML(state, node) {
   renderTagClose(state, 'tr');
 }
 
+export function renderContent(state, node, forceRenderInline) {
+  if (node.type.inlineContent) {
+    if (containsOnlyText(node)) {
+      state.renderInline(node);
+    } else {
+      state.closeBlock(node);
+      state.flushClose();
+      state.renderInline(node);
+      state.closeBlock(node);
+      state.flushClose();
+    }
+  } else {
+    const renderInline = forceRenderInline || containsParagraphWithOnlyText(node);
+    if (!renderInline) {
+      state.closeBlock(node);
+      state.flushClose();
+      state.renderContent(node);
+      state.ensureNewLine();
+    } else {
+      state.renderInline(forceRenderInline ? node : node.child(0));
+    }
+  }
+}
+
+export function renderHTMLNode(tagName, forceRenderInline = false) {
+  return (state, node) => {
+    renderTagOpen(state, tagName, node.attrs);
+    renderContent(state, node, forceRenderInline);
+    renderTagClose(state, tagName, false);
+  };
+}
+
 export function renderOrderedList(state, node) {
   const { parens } = node.attrs;
   const start = node.attrs.start || 1;
@@ -241,7 +287,7 @@ export function renderTableCell(state, node) {
     return;
   }
 
-  if (!isInBlockTable(node) || shouldRenderCellInline(node)) {
+  if (!isInBlockTable(node) || containsParagraphWithOnlyText(node)) {
     state.renderInline(node.child(0));
   } else {
     state.renderContent(node);

app/assets/javascripts/create_cluster/eks_cluster/components/service_credentials_form.vue

 <script>
-/* eslint-disable vue/no-v-html */
 import { GlButton, GlFormGroup, GlFormInput, GlIcon, GlLink, GlSprintf, GlAlert } from '@gitlab/ui';
 import { escape } from 'lodash';
 import { mapState, mapActions } from 'vuex';
@@ -142,13 +141,19 @@ export default {
         </div>
       </div>
       <div class="col-12 mb-3 mt-n3">
-        <p class="form-text text-muted" v-html="accountAndExternalIdsHelpText"></p>
+        <p
+          class="form-text text-muted"
+          v-html="accountAndExternalIdsHelpText /* eslint-disable-line vue/no-v-html */"
+        ></p>
       </div>
     </div>
     <div class="form-group">
       <label for="eks-provision-role-arn">{{ s__('ClusterIntegration|Provision Role ARN') }}</label>
       <gl-form-input id="eks-provision-role-arn" v-model="roleArn" />
-      <p class="form-text text-muted" v-html="provisionRoleArnHelpText"></p>
+      <p
+        class="form-text text-muted"
+        v-html="provisionRoleArnHelpText /* eslint-disable-line vue/no-v-html */"
+      ></p>
     </div>
 
     <gl-form-group :label="$options.i18n.regionInputLabel">

app/assets/javascripts/cycle_analytics/components/banner.vue

 <script>
-/* eslint-disable vue/no-v-html */
 import { GlIcon } from '@gitlab/ui';
 import iconCycleAnalyticsSplash from 'icons/_icon_cycle_analytics_splash.svg';
 
@@ -35,7 +34,10 @@ export default {
     >
       <gl-icon name="close" />
     </button>
-    <div class="svg-container" v-html="iconCycleAnalyticsSplash"></div>
+    <div
+      class="svg-container"
+      v-html="iconCycleAnalyticsSplash /* eslint-disable-line vue/no-v-html */"
+    ></div>
     <div class="inner-content">
       <h4>{{ __('Introducing Value Stream Analytics') }}</h4>
       <p>

app/assets/javascripts/cycle_analytics/components/base.vue

@@ -173,6 +173,7 @@ export default {
       :empty-state-message="emptyStageText"
       :no-data-svg-path="noDataSvgPath"
       :pagination="null"
+      :sortable="false"
     />
   </div>
 </template>

app/assets/javascripts/cycle_analytics/components/stage_table.vue

@@ -23,8 +23,8 @@ import TotalTime from './total_time_component.vue';
 const DEFAULT_WORKFLOW_TITLE_PROPERTIES = {
   thClass: 'gl-w-half',
   key: PAGINATION_SORT_FIELD_END_EVENT,
-  sortable: true,
 };
+
 const WORKFLOW_COLUMN_TITLES = {
   issues: { ...DEFAULT_WORKFLOW_TITLE_PROPERTIES, label: __('Issues') },
   jobs: { ...DEFAULT_WORKFLOW_TITLE_PROPERTIES, label: __('Jobs') },
@@ -84,6 +84,11 @@ export default {
       required: false,
       default: null,
     },
+    sortable: {
+      type: Boolean,
+      required: false,
+      default: true,
+    },
   },
   data() {
     if (this.pagination) {
@@ -122,9 +127,11 @@ export default {
           key: PAGINATION_SORT_FIELD_DURATION,
           label: __('Time'),
           thClass: 'gl-w-half',
-          sortable: true,
         },
-      ];
+      ].map((field) => ({
+        ...field,
+        sortable: this.sortable,
+      }));
     },
     prevPage() {
       return Math.max(this.pagination.page - 1, 0);

app/assets/javascripts/deploy_freeze/components/deploy_freeze_table.vue

 <script>
-import { GlTable, GlButton, GlModalDirective, GlSprintf } from '@gitlab/ui';
+import { GlTable, GlButton, GlModal, GlModalDirective, GlSprintf } from '@gitlab/ui';
 import { mapState, mapActions } from 'vuex';
 import { s__ } from '~/locale';
 
@@ -21,21 +21,42 @@ export default {
       key: 'edit',
       label: s__('DeployFreeze|Edit'),
     },
+    {
+      key: 'delete',
+      label: s__('DeployFreeze|Delete'),
+    },
   ],
   translations: {
     addDeployFreeze: s__('DeployFreeze|Add deploy freeze'),
+    deleteDeployFreezeTitle: s__('DeployFreeze|Delete deploy freeze?'),
+    deleteDeployFreezeMessage: s__(
+      'DeployFreeze|Deploy freeze from %{start} to %{end} in %{timezone} will be removed. Are you sure?',
+    ),
     emptyStateText: s__(
       'DeployFreeze|No deploy freezes exist for this project. To add one, select %{strongStart}Add deploy freeze%{strongEnd}',
     ),
   },
+  modal: {
+    id: 'deleteFreezePeriodModal',
+    actionPrimary: {
+      text: s__('DeployFreeze|Delete freeze period'),
+      attributes: { variant: 'danger', 'data-testid': 'modal-confirm' },
+    },
+  },
   components: {
     GlTable,
     GlButton,
+    GlModal,
     GlSprintf,
   },
   directives: {
     GlModal: GlModalDirective,
   },
+  data() {
+    return {
+      freezePeriodToDelete: null,
+    };
+  },
   computed: {
     ...mapState(['freezePeriods']),
     tableIsNotEmpty() {
@@ -46,7 +67,14 @@ export default {
     this.fetchFreezePeriods();
   },
   methods: {
-    ...mapActions(['fetchFreezePeriods', 'setFreezePeriod']),
+    ...mapActions(['fetchFreezePeriods', 'setFreezePeriod', 'deleteFreezePeriod']),
+    handleDeleteFreezePeriod(freezePeriod) {
+      this.freezePeriodToDelete = freezePeriod;
+    },
+    confirmDeleteFreezePeriod() {
+      this.deleteFreezePeriod(this.freezePeriodToDelete);
+      this.freezePeriodToDelete = null;
+    },
   },
 };
 </script>
@@ -72,6 +100,18 @@ export default {
           @click="setFreezePeriod(item)"
         />
       </template>
+      <template #cell(delete)="{ item }">
+        <gl-button
+          v-gl-modal="$options.modal.id"
+          category="secondary"
+          variant="danger"
+          icon="remove"
+          :aria-label="$options.modal.actionPrimary.text"
+          :loading="item.isDeleting"
+          data-testid="delete-deploy-freeze"
+          @click="handleDeleteFreezePeriod(item)"
+        />
+      </template>
       <template #empty>
         <p data-testid="empty-freeze-periods" class="gl-text-center text-plain">
           <gl-sprintf :message="$options.translations.emptyStateText">
@@ -90,5 +130,24 @@ export default {
     >
       {{ $options.translations.addDeployFreeze }}
     </gl-button>
+    <gl-modal
+      :title="$options.translations.deleteDeployFreezeTitle"
+      :modal-id="$options.modal.id"
+      :action-primary="$options.modal.actionPrimary"
+      static
+      @primary="confirmDeleteFreezePeriod"
+    >
+      <template v-if="freezePeriodToDelete">
+        <gl-sprintf :message="$options.translations.deleteDeployFreezeMessage">
+          <template #start>
+            <code>{{ freezePeriodToDelete.freezeStart }}</code>
+          </template>
+          <template #end>
+            <code>{{ freezePeriodToDelete.freezeEnd }}</code>
+          </template>
+          <template #timezone>{{ freezePeriodToDelete.cronTimezone.formattedTimezone }}</template>
+        </gl-sprintf>
+      </template>
+    </gl-modal>
   </div>
 </template>

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

@@ -52,6 +52,22 @@ export const updateFreezePeriod = (store) =>
     }),
   );
 
+export const deleteFreezePeriod = ({ state, commit }, { id }) => {
+  commit(types.REQUEST_DELETE_FREEZE_PERIOD, id);
+
+  return Api.deleteFreezePeriod(state.projectId, id)
+    .then(() => commit(types.RECEIVE_DELETE_FREEZE_PERIOD_SUCCESS, id))
+    .catch((e) => {
+      createFlash({
+        message: __('Error: Unable to delete deploy freeze'),
+      });
+      commit(types.RECEIVE_DELETE_FREEZE_PERIOD_ERROR, id);
+
+      // eslint-disable-next-line no-console
+      console.error('[gitlab] Unable to delete deploy freeze:', e);
+    });
+};
+
 export const fetchFreezePeriods = ({ commit, state }) => {
   commit(types.REQUEST_FREEZE_PERIODS);
 

app/assets/javascripts/deploy_freeze/store/mutation_types.js

@@ -10,4 +10,8 @@ export const SET_SELECTED_ID = 'SET_SELECTED_ID';
 export const SET_FREEZE_START_CRON = 'SET_FREEZE_START_CRON';
 export const SET_FREEZE_END_CRON = 'SET_FREEZE_END_CRON';
 
+export const REQUEST_DELETE_FREEZE_PERIOD = 'REQUEST_DELETE_FREEZE_PERIOD';
+export const RECEIVE_DELETE_FREEZE_PERIOD_SUCCESS = 'RECEIVE_DELETE_FREEZE_PERIOD_SUCCESS';
+export const RECEIVE_DELETE_FREEZE_PERIOD_ERROR = 'RECEIVE_DELETE_FREEZE_PERIOD_ERROR';
+
 export const RESET_MODAL = 'RESET_MODAL';

app/assets/javascripts/deploy_freeze/store/mutations.js

+import Vue from 'vue';
 import { convertObjectPropsToCamelCase } from '~/lib/utils/common_utils';
+import { secondsToHours } from '~/lib/utils/datetime_utility';
 import * as types from './mutation_types';
 
-const formatTimezoneName = (freezePeriod, timezoneList) =>
-  convertObjectPropsToCamelCase({
+const formatTimezoneName = (freezePeriod, timezoneList) => {
+  const tz = timezoneList.find((timezone) => timezone.identifier === freezePeriod.cron_timezone);
+  return convertObjectPropsToCamelCase({
     ...freezePeriod,
     cron_timezone: {
-      formattedTimezone: timezoneList.find((tz) => tz.identifier === freezePeriod.cron_timezone)
-        ?.name,
+      formattedTimezone: tz && `[UTC ${secondsToHours(tz.offset)}] ${tz.name}`,
       identifier: freezePeriod.cron_timezone,
     },
   });
+};
+
+const setFreezePeriodIsDeleting = (state, id, isDeleting) => {
+  const freezePeriod = state.freezePeriods.find((f) => f.id === id);
+
+  if (!freezePeriod) {
+    return;
+  }
+
+  Vue.set(freezePeriod, 'isDeleting', isDeleting);
+};
 
 export default {
   [types.REQUEST_FREEZE_PERIODS](state) {
@@ -53,6 +66,18 @@ export default {
     state.selectedId = id;
   },
 
+  [types.REQUEST_DELETE_FREEZE_PERIOD](state, id) {
+    setFreezePeriodIsDeleting(state, id, true);
+  },
+
+  [types.RECEIVE_DELETE_FREEZE_PERIOD_SUCCESS](state, id) {
+    state.freezePeriods = state.freezePeriods.filter((f) => f.id !== id);
+  },
+
+  [types.RECEIVE_DELETE_FREEZE_PERIOD_ERROR](state, id) {
+    setFreezePeriodIsDeleting(state, id, false);
+  },
+
   [types.RESET_MODAL](state) {
     state.freezeStartCron = '';
     state.freezeEndCron = '';

app/assets/javascripts/deprecated_notes.js

@@ -670,6 +670,10 @@ export default class Notes {
   updateNote(noteEntity, $targetNote) {
     // Convert returned HTML to a jQuery object so we can modify it further
     const $noteEntityEl = $(noteEntity.html);
+    const $noteAvatar = $noteEntityEl.find('.image-diff-avatar-link');
+    const $targetNoteBadge = $targetNote.find('.badge');
+
+    $noteAvatar.append($targetNoteBadge);
     this.revertNoteEditForm($targetNote);
     $noteEntityEl.renderGFM();
     // Find the note's `li` element by ID and replace it with the updated HTML