.gitlab/issue_templates/Geo Replicate a new Git repository type.md

@@ -488,6 +488,8 @@ That's all of the required database changes.
 
   module Geo
     class CoolWidgetState < ApplicationRecord
+      include EachBatch
+      
       self.primary_key = :cool_widget_id
 
       belongs_to :cool_widget, inverse_of: :cool_widget_state

.gitlab/issue_templates/Geo Replicate a new blob type.md

@@ -452,6 +452,8 @@ That's all of the required database changes.
   ``` ruby
   module Geo
     class CoolWidgetState < ApplicationRecord
+      include EachBatch
+      
       self.primary_key = :cool_widget_id
 
       belongs_to :cool_widget, inverse_of: :cool_widget_state

.rubocop_todo/gitlab/delegate_predicate_methods.yml

@@ -5,5 +5,4 @@ Gitlab/DelegatePredicateMethods:
   - app/models/concerns/integrations/base_data_fields.rb
   - app/models/project.rb
   - ee/app/models/concerns/ee/ci/metadatable.rb
-  - ee/app/models/license.rb
   - lib/gitlab/ci/trace/stream.rb

GITALY_SERVER_VERSION

-a7b614916005688cb1c290f323adaf9dd37d0b27
+3627c14a64ce48446e8a67299c3161ff7290d1ad

Gemfile

@@ -2,7 +2,7 @@
 
 source 'https://rubygems.org'
 
-gem 'rails', '~> 6.1.4.1'
+gem 'rails', '~> 6.1.4.4'
 
 gem 'bootsnap', '~> 1.9.1', require: false
 

Gemfile.lock

@@ -11,63 +11,63 @@ GEM
     RedCloth (4.3.2)
     acme-client (2.0.9)
       faraday (>= 0.17, < 2.0.0)
-    actioncable (6.1.4.1)
-      actionpack (= 6.1.4.1)
-      activesupport (= 6.1.4.1)
+    actioncable (6.1.4.4)
+      actionpack (= 6.1.4.4)
+      activesupport (= 6.1.4.4)
       nio4r (~> 2.0)
       websocket-driver (>= 0.6.1)
-    actionmailbox (6.1.4.1)
-      actionpack (= 6.1.4.1)
-      activejob (= 6.1.4.1)
-      activerecord (= 6.1.4.1)
-      activestorage (= 6.1.4.1)
-      activesupport (= 6.1.4.1)
+    actionmailbox (6.1.4.4)
+      actionpack (= 6.1.4.4)
+      activejob (= 6.1.4.4)
+      activerecord (= 6.1.4.4)
+      activestorage (= 6.1.4.4)
+      activesupport (= 6.1.4.4)
       mail (>= 2.7.1)
-    actionmailer (6.1.4.1)
-      actionpack (= 6.1.4.1)
-      actionview (= 6.1.4.1)
-      activejob (= 6.1.4.1)
-      activesupport (= 6.1.4.1)
+    actionmailer (6.1.4.4)
+      actionpack (= 6.1.4.4)
+      actionview (= 6.1.4.4)
+      activejob (= 6.1.4.4)
+      activesupport (= 6.1.4.4)
       mail (~> 2.5, >= 2.5.4)
       rails-dom-testing (~> 2.0)
-    actionpack (6.1.4.1)
-      actionview (= 6.1.4.1)
-      activesupport (= 6.1.4.1)
+    actionpack (6.1.4.4)
+      actionview (= 6.1.4.4)
+      activesupport (= 6.1.4.4)
       rack (~> 2.0, >= 2.0.9)
       rack-test (>= 0.6.3)
       rails-dom-testing (~> 2.0)
       rails-html-sanitizer (~> 1.0, >= 1.2.0)
-    actiontext (6.1.4.1)
-      actionpack (= 6.1.4.1)
-      activerecord (= 6.1.4.1)
-      activestorage (= 6.1.4.1)
-      activesupport (= 6.1.4.1)
+    actiontext (6.1.4.4)
+      actionpack (= 6.1.4.4)
+      activerecord (= 6.1.4.4)
+      activestorage (= 6.1.4.4)
+      activesupport (= 6.1.4.4)
       nokogiri (>= 1.8.5)
-    actionview (6.1.4.1)
-      activesupport (= 6.1.4.1)
+    actionview (6.1.4.4)
+      activesupport (= 6.1.4.4)
       builder (~> 3.1)
       erubi (~> 1.4)
       rails-dom-testing (~> 2.0)
       rails-html-sanitizer (~> 1.1, >= 1.2.0)
-    activejob (6.1.4.1)
-      activesupport (= 6.1.4.1)
+    activejob (6.1.4.4)
+      activesupport (= 6.1.4.4)
       globalid (>= 0.3.6)
-    activemodel (6.1.4.1)
-      activesupport (= 6.1.4.1)
-    activerecord (6.1.4.1)
-      activemodel (= 6.1.4.1)
-      activesupport (= 6.1.4.1)
+    activemodel (6.1.4.4)
+      activesupport (= 6.1.4.4)
+    activerecord (6.1.4.4)
+      activemodel (= 6.1.4.4)
+      activesupport (= 6.1.4.4)
     activerecord-explain-analyze (0.1.0)
       activerecord (>= 4)
       pg
-    activestorage (6.1.4.1)
-      actionpack (= 6.1.4.1)
-      activejob (= 6.1.4.1)
-      activerecord (= 6.1.4.1)
-      activesupport (= 6.1.4.1)
+    activestorage (6.1.4.4)
+      actionpack (= 6.1.4.4)
+      activejob (= 6.1.4.4)
+      activerecord (= 6.1.4.4)
+      activesupport (= 6.1.4.4)
       marcel (~> 1.0.0)
       mini_mime (>= 1.1.0)
-    activesupport (6.1.4.1)
+    activesupport (6.1.4.4)
       concurrent-ruby (~> 1.0, >= 1.0.2)
       i18n (>= 1.6, < 2)
       minitest (>= 5.1)
@@ -511,7 +511,7 @@ GEM
       omniauth (~> 1.3)
       pyu-ruby-sasl (>= 0.0.3.3, < 0.1)
       rubyntlm (~> 0.5)
-    globalid (0.5.2)
+    globalid (1.0.0)
       activesupport (>= 5.0)
     gon (6.4.0)
       actionpack (>= 3.0.20)
@@ -739,7 +739,7 @@ GEM
     lumberjack (1.2.7)
     mail (2.7.1)
       mini_mime (>= 0.1.1)
-    marcel (1.0.1)
+    marcel (1.0.2)
     marginalia (1.10.0)
       actionpack (>= 2.3)
       activerecord (>= 2.3)
@@ -971,20 +971,20 @@ GEM
     rack-test (1.1.0)
       rack (>= 1.0, < 3)
     rack-timeout (0.5.2)
-    rails (6.1.4.1)
-      actioncable (= 6.1.4.1)
-      actionmailbox (= 6.1.4.1)
-      actionmailer (= 6.1.4.1)
-      actionpack (= 6.1.4.1)
-      actiontext (= 6.1.4.1)
-      actionview (= 6.1.4.1)
-      activejob (= 6.1.4.1)
-      activemodel (= 6.1.4.1)
-      activerecord (= 6.1.4.1)
-      activestorage (= 6.1.4.1)
-      activesupport (= 6.1.4.1)
+    rails (6.1.4.4)
+      actioncable (= 6.1.4.4)
+      actionmailbox (= 6.1.4.4)
+      actionmailer (= 6.1.4.4)
+      actionpack (= 6.1.4.4)
+      actiontext (= 6.1.4.4)
+      actionview (= 6.1.4.4)
+      activejob (= 6.1.4.4)
+      activemodel (= 6.1.4.4)
+      activerecord (= 6.1.4.4)
+      activestorage (= 6.1.4.4)
+      activesupport (= 6.1.4.4)
       bundler (>= 1.15.0)
-      railties (= 6.1.4.1)
+      railties (= 6.1.4.4)
       sprockets-rails (>= 2.0.0)
     rails-controller-testing (1.0.5)
       actionpack (>= 5.0.1.rc1)
@@ -998,9 +998,9 @@ GEM
     rails-i18n (6.0.0)
       i18n (>= 0.7, < 2)
       railties (>= 6.0.0, < 7)
-    railties (6.1.4.1)
-      actionpack (= 6.1.4.1)
-      activesupport (= 6.1.4.1)
+    railties (6.1.4.4)
+      actionpack (= 6.1.4.4)
+      activesupport (= 6.1.4.4)
       method_source
       rake (>= 0.13)
       thor (~> 1.0)
@@ -1381,7 +1381,7 @@ GEM
       nokogiri (~> 1.8)
     yajl-ruby (1.4.1)
     yard (0.9.26)
-    zeitwerk (2.5.1)
+    zeitwerk (2.5.3)
 
 PLATFORMS
   ruby
@@ -1589,7 +1589,7 @@ DEPENDENCIES
   rack-oauth2 (~> 1.16.0)
   rack-proxy (~> 0.6.0)
   rack-timeout (~> 0.5.1)
-  rails (~> 6.1.4.1)
+  rails (~> 6.1.4.4)
   rails-controller-testing
   rails-i18n (~> 6.0)
   rainbow (~> 3.0)

README.md

@@ -121,4 +121,4 @@ Please see [Getting help for GitLab](https://about.gitlab.com/getting-help/) on
 
 ## Is it awesome?
 
-[These people](https://twitter.com/gitlab/likes) seem to like it.
+[These people](https://twitter.com/gitlab/followers) seem to like it.

app/assets/javascripts/design_management/components/design_notes/design_discussion.vue

@@ -7,6 +7,7 @@ import ReplyPlaceholder from '~/notes/components/discussion_reply_placeholder.vu
 import { updateGlobalTodoCount } from '~/vue_shared/components/sidebar/todo_toggle/utils';
 import TimeAgoTooltip from '~/vue_shared/components/time_ago_tooltip.vue';
 import DesignNotePin from '~/vue_shared/components/design_management/design_note_pin.vue';
+import { isLoggedIn } from '~/lib/utils/common_utils';
 import { ACTIVE_DISCUSSION_SOURCE_TYPES } from '../../constants';
 import createNoteMutation from '../../graphql/mutations/create_note.mutation.graphql';
 import toggleResolveDiscussionMutation from '../../graphql/mutations/toggle_resolve_discussion.mutation.graphql';
@@ -17,6 +18,7 @@ import { hasErrors } from '../../utils/cache_update';
 import { extractDesign } from '../../utils/design_management_utils';
 import { ADD_DISCUSSION_COMMENT_ERROR } from '../../utils/error_messages';
 import DesignNote from './design_note.vue';
+import DesignNoteSignedOut from './design_note_signed_out.vue';
 import DesignReplyForm from './design_reply_form.vue';
 import ToggleRepliesWidget from './toggle_replies_widget.vue';
 
@@ -24,6 +26,7 @@ export default {
   components: {
     ApolloMutation,
     DesignNote,
+    DesignNoteSignedOut,
     ReplyPlaceholder,
     DesignReplyForm,
     GlIcon,
@@ -55,6 +58,14 @@ export default {
       required: false,
       default: '',
     },
+    registerPath: {
+      type: String,
+      required: true,
+    },
+    signInPath: {
+      type: String,
+      required: true,
+    },
     resolvedDiscussionsExpanded: {
       type: Boolean,
       required: true,
@@ -93,6 +104,7 @@ export default {
       isResolving: false,
       shouldChangeResolvedStatus: false,
       areRepliesCollapsed: this.discussion.resolved,
+      isLoggedIn: isLoggedIn(),
     };
   },
   computed: {
@@ -226,7 +238,7 @@ export default {
         :class="{ 'gl-bg-blue-50': isDiscussionActive }"
         @error="$emit('update-note-error', $event)"
       >
-        <template v-if="discussion.resolvable" #resolve-discussion>
+        <template v-if="isLoggedIn && discussion.resolvable" #resolve-discussion>
           <button
             v-gl-tooltip
             :class="{ 'is-active': discussion.resolved }"
@@ -269,38 +281,47 @@ export default {
         :class="{ 'gl-bg-blue-50': isDiscussionActive }"
         @error="$emit('update-note-error', $event)"
       />
-      <li v-show="isReplyPlaceholderVisible" class="reply-wrapper discussion-reply-holder">
-        <reply-placeholder
-          v-if="!isFormVisible"
-          class="qa-discussion-reply"
-          :placeholder-text="__('Reply…')"
-          @focus="showForm"
-        />
-        <apollo-mutation
-          v-else
-          #default="{ mutate, loading }"
-          :mutation="$options.createNoteMutation"
-          :variables="{
-            input: mutationPayload,
-          }"
-          @done="onDone"
-          @error="onCreateNoteError"
-        >
-          <design-reply-form
-            v-model="discussionComment"
-            :is-saving="loading"
-            :markdown-preview-path="markdownPreviewPath"
-            @submit-form="mutate"
-            @cancel-form="hideForm"
+      <li
+        v-show="isReplyPlaceholderVisible"
+        class="reply-wrapper discussion-reply-holder"
+        :class="{ 'gl-bg-gray-10': !isLoggedIn }"
+      >
+        <template v-if="!isLoggedIn">
+          <design-note-signed-out :register-path="registerPath" :sign-in-path="signInPath" />
+        </template>
+        <template v-else>
+          <reply-placeholder
+            v-if="!isFormVisible"
+            class="qa-discussion-reply"
+            :placeholder-text="__('Reply…')"
+            @focus="showForm"
+          />
+          <apollo-mutation
+            v-else
+            #default="{ mutate, loading }"
+            :mutation="$options.createNoteMutation"
+            :variables="{
+              input: mutationPayload,
+            }"
+            @done="onDone"
+            @error="onCreateNoteError"
           >
-            <template v-if="discussion.resolvable" #resolve-checkbox>
-              <label data-testid="resolve-checkbox">
-                <input v-model="shouldChangeResolvedStatus" type="checkbox" />
-                {{ resolveCheckboxText }}
-              </label>
-            </template>
-          </design-reply-form>
-        </apollo-mutation>
+            <design-reply-form
+              v-model="discussionComment"
+              :is-saving="loading"
+              :markdown-preview-path="markdownPreviewPath"
+              @submit-form="mutate"
+              @cancel-form="hideForm"
+            >
+              <template v-if="discussion.resolvable" #resolve-checkbox>
+                <label data-testid="resolve-checkbox">
+                  <input v-model="shouldChangeResolvedStatus" type="checkbox" />
+                  {{ resolveCheckboxText }}
+                </label>
+              </template>
+            </design-reply-form>
+          </apollo-mutation>
+        </template>
       </li>
     </ul>
   </div>

app/assets/javascripts/design_management/components/design_notes/design_note_signed_out.vue

+<script>
+import { GlSprintf, GlLink } from '@gitlab/ui';
+import { __ } from '~/locale';
+
+export default {
+  components: {
+    GlSprintf,
+    GlLink,
+  },
+  props: {
+    registerPath: {
+      type: String,
+      required: true,
+    },
+    signInPath: {
+      type: String,
+      required: true,
+    },
+    isAddDiscussion: {
+      type: Boolean,
+      required: false,
+      default: false,
+    },
+  },
+  computed: {
+    signedOutText() {
+      return this.isAddDiscussion
+        ? __(
+            'Please %{registerLinkStart}register%{registerLinkEnd} or %{signInLinkStart}sign in%{signInLinkEnd} to start a new discussion.',
+          )
+        : __(
+            'Please %{registerLinkStart}register%{registerLinkEnd} or %{signInLinkStart}sign in%{signInLinkEnd} to reply.',
+          );
+    },
+  },
+};
+</script>
+
+<template>
+  <div class="disabled-comment text-center">
+    <gl-sprintf :message="signedOutText">
+      <template #registerLink="{ content }">
+        <gl-link :href="registerPath">{{ content }}</gl-link>
+      </template>
+      <template #signInLink="{ content }">
+        <gl-link :href="signInPath">{{ content }}</gl-link>
+      </template>
+    </gl-sprintf>
+  </div>
+</template>

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

 <script>
 import { throttle } from 'lodash';
+import { isLoggedIn } from '~/lib/utils/common_utils';
 import DesignOverlay from './design_overlay.vue';
 import DesignImage from './image.vue';
 
@@ -54,6 +55,7 @@ export default {
       initialLoad: true,
       lastDragPosition: null,
       isDraggingDesign: false,
+      isLoggedIn: isLoggedIn(),
     };
   },
   computed: {
@@ -311,7 +313,7 @@ export default {
         :position="overlayPosition"
         :notes="discussionStartingNotes"
         :current-comment-form="currentCommentForm"
-        :disable-commenting="isDraggingDesign"
+        :disable-commenting="!isLoggedIn || isDraggingDesign"
         :resolved-discussions-expanded="resolvedDiscussionsExpanded"
         @openCommentForm="openCommentForm"
         @closeCommentForm="closeCommentForm"

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

 <script>
 import { GlCollapse, GlButton, GlPopover } from '@gitlab/ui';
 import Cookies from 'js-cookie';
-import { parseBoolean } from '~/lib/utils/common_utils';
+import { parseBoolean, isLoggedIn } from '~/lib/utils/common_utils';
 import { s__ } from '~/locale';
 import Participants from '~/sidebar/components/participants/participants.vue';
 import glFeatureFlagsMixin from '~/vue_shared/mixins/gl_feature_flags_mixin';
@@ -9,11 +9,13 @@ import { ACTIVE_DISCUSSION_SOURCE_TYPES } from '../constants';
 import updateActiveDiscussionMutation from '../graphql/mutations/update_active_discussion.mutation.graphql';
 import { extractDiscussions, extractParticipants } from '../utils/design_management_utils';
 import DesignDiscussion from './design_notes/design_discussion.vue';
+import DesignNoteSignedOut from './design_notes/design_note_signed_out.vue';
 import DesignTodoButton from './design_todo_button.vue';
 
 export default {
   components: {
     DesignDiscussion,
+    DesignNoteSignedOut,
     Participants,
     GlCollapse,
     GlButton,
@@ -28,6 +30,12 @@ export default {
     issueIid: {
       default: '',
     },
+    registerPath: {
+      default: '',
+    },
+    signInPath: {
+      default: '',
+    },
   },
   props: {
     design: {
@@ -47,6 +55,7 @@ export default {
     return {
       isResolvedCommentsPopoverHidden: parseBoolean(Cookies.get(this.$options.cookieKey)),
       discussionWithOpenForm: '',
+      isLoggedIn: isLoggedIn(),
     };
   },
   computed: {
@@ -134,12 +143,19 @@ export default {
       class="gl-mb-4"
     />
     <h2
-      v-if="unresolvedDiscussions.length === 0"
+      v-if="isLoggedIn && unresolvedDiscussions.length === 0"
       class="new-discussion-disclaimer gl-font-base gl-m-0 gl-mb-4"
       data-testid="new-discussion-disclaimer"
     >
       {{ s__("DesignManagement|Click the image where you'd like to start a new discussion") }}
     </h2>
+    <design-note-signed-out
+      v-if="!isLoggedIn"
+      class="gl-mb-4"
+      :register-path="registerPath"
+      :sign-in-path="signInPath"
+      :is-add-discussion="true"
+    />
     <design-discussion
       v-for="discussion in unresolvedDiscussions"
       :key="discussion.id"
@@ -147,6 +163,8 @@ export default {
       :design-id="$route.params.id"
       :noteable-id="design.id"
       :markdown-preview-path="markdownPreviewPath"
+      :register-path="registerPath"
+      :sign-in-path="signInPath"
       :resolved-discussions-expanded="resolvedDiscussionsExpanded"
       :discussion-with-open-form="discussionWithOpenForm"
       data-testid="unresolved-discussion"
@@ -197,6 +215,8 @@ export default {
           :design-id="$route.params.id"
           :noteable-id="design.id"
           :markdown-preview-path="markdownPreviewPath"
+          :register-path="registerPath"
+          :sign-in-path="signInPath"
           :resolved-discussions-expanded="resolvedDiscussionsExpanded"
           :discussion-with-open-form="discussionWithOpenForm"
           data-testid="resolved-discussion"

app/assets/javascripts/design_management/index.js

@@ -8,7 +8,7 @@ import createRouter from './router';
 
 export default () => {
   const el = document.querySelector('.js-design-management');
-  const { issueIid, projectPath, issuePath } = el.dataset;
+  const { issueIid, projectPath, issuePath, registerPath, signInPath } = el.dataset;
   const router = createRouter(issuePath);
 
   apolloProvider.clients.defaultClient.cache.writeQuery({
@@ -29,6 +29,8 @@ export default () => {
     provide: {
       projectPath,
       issueIid,
+      registerPath,
+      signInPath,
     },
     mounted() {
       performanceMarkAndMeasure({

app/assets/javascripts/editor/source_editor.js

@@ -149,7 +149,7 @@ export default class SourceEditor {
     });
 
     this.instances.push(instance);
-    el.dispatchEvent(new CustomEvent(EDITOR_READY_EVENT, { instance }));
+    el.dispatchEvent(new CustomEvent(EDITOR_READY_EVENT, { detail: { instance } }));
     return instance;
   }
 

app/assets/javascripts/environments/components/confirm_rollback_modal.vue

@@ -99,8 +99,7 @@ export default {
       };
     },
     isLastDeployment() {
-      // eslint-disable-next-line @gitlab/require-i18n-strings
-      return this.environment?.isLastDeployment || this.environment?.lastDeployment?.['last?'];
+      return this.environment?.isLastDeployment || this.environment?.lastDeployment?.isLast;
     },
   },
   methods: {

app/assets/javascripts/environments/components/environment_actions.vue

 <script>
-import { GlDropdown, GlDropdownItem, GlIcon, GlLoadingIcon, GlTooltipDirective } from '@gitlab/ui';
+import { GlDropdown, GlDropdownItem, GlIcon, GlTooltipDirective } from '@gitlab/ui';
 import { formatTime } from '~/lib/utils/datetime_utility';
 import { __, s__, sprintf } from '~/locale';
 import eventHub from '../event_hub';
+import actionMutation from '../graphql/mutations/action.mutation.graphql';
 
 export default {
   directives: {
@@ -12,7 +13,6 @@ export default {
     GlDropdown,
     GlDropdownItem,
     GlIcon,
-    GlLoadingIcon,
   },
   props: {
     actions: {
@@ -20,6 +20,11 @@ export default {
       required: false,
       default: () => [],
     },
+    graphql: {
+      type: Boolean,
+      required: false,
+      default: false,
+    },
   },
   data() {
     return {
@@ -49,7 +54,11 @@ export default {
 
       this.isLoading = true;
 
-      eventHub.$emit('postAction', { endpoint: action.playPath });
+      if (this.graphql) {
+        this.$apollo.mutate({ mutation: actionMutation, variables: { action } });
+      } else {
+        eventHub.$emit('postAction', { endpoint: action.playPath });
+      }
     },
 
     isActionDisabled(action) {
@@ -70,18 +79,16 @@ export default {
 <template>
   <gl-dropdown
     v-gl-tooltip
+    :text="title"
     :title="title"
+    :loading="isLoading"
     :aria-label="title"
-    :disabled="isLoading"
+    icon="play"
+    text-sr-only
     right
     data-container="body"
     data-testid="environment-actions-button"
   >
-    <template #button-content>
-      <gl-icon name="play" />
-      <gl-icon name="chevron-down" />
-      <gl-loading-icon v-if="isLoading" size="sm" />
-    </template>
     <gl-dropdown-item
       v-for="(action, i) in actions"
       :key="i"

app/assets/javascripts/environments/components/environment_item.vue

 <script>
-import { GlDropdown, GlTooltipDirective, GlIcon, GlLink, GlSprintf } from '@gitlab/ui';
+import { GlDropdown, GlTooltipDirective, GlIcon, GlLink, GlSprintf, GlBadge } from '@gitlab/ui';
 import { isEmpty } from 'lodash';
 import { convertObjectPropsToCamelCase } from '~/lib/utils/common_utils';
 import { __, s__, sprintf } from '~/locale';
@@ -30,6 +30,7 @@ export default {
     CommitComponent,
     ExternalUrlComponent,
     GlDropdown,
+    GlBadge,
     GlIcon,
     GlLink,
     GlSprintf,
@@ -621,9 +622,9 @@ export default {
           <span v-if="model.size === 1">{{ model.name }}</span>
           <span v-else>{{ model.name_without_type }}</span>
         </a>
-        <span v-if="isProtected" class="badge badge-success">
-          {{ s__('Environments|protected') }}
-        </span>
+        <gl-badge v-if="isProtected" variant="success">{{
+          s__('Environments|protected')
+        }}</gl-badge>
       </span>
       <span
         v-else
@@ -639,7 +640,7 @@ export default {
 
         <span> {{ model.folderName }} </span>
 
-        <span class="badge badge-pill"> {{ model.size }} </span>
+        <gl-badge>{{ model.size }}</gl-badge>
       </span>
     </div>
 

app/assets/javascripts/environments/components/new_environment_folder.vue

@@ -2,9 +2,11 @@
 import { GlButton, GlCollapse, GlIcon, GlBadge, GlLink } from '@gitlab/ui';
 import { __, s__ } from '~/locale';
 import folderQuery from '../graphql/queries/folder.query.graphql';
+import EnvironmentItem from './new_environment_item.vue';
 
 export default {
   components: {
+    EnvironmentItem,
     GlButton,
     GlCollapse,
     GlIcon,
@@ -51,16 +53,25 @@ export default {
     folderPath() {
       return this.nestedEnvironment.latest.folderPath;
     },
+    environments() {
+      return this.folder?.environments;
+    },
   },
   methods: {
     toggleCollapse() {
       this.visible = !this.visible;
     },
+    isFirstEnvironment(index) {
+      return index === 0;
+    },
   },
 };
 </script>
 <template>
-  <div class="gl-border-b-solid gl-border-gray-100 gl-border-1 gl-px-3 gl-pt-3 gl-pb-5">
+  <div
+    :class="{ 'gl-pb-5': !visible }"
+    class="gl-border-b-solid gl-border-gray-100 gl-border-1 gl-px-3 gl-pt-3"
+  >
     <div class="gl-w-full gl-display-flex gl-align-items-center">
       <gl-button
         class="gl-mr-4 gl-fill-current-color gl-text-gray-500"
@@ -77,6 +88,15 @@ export default {
       <gl-badge size="sm" class="gl-mr-auto">{{ count }}</gl-badge>
       <gl-link v-if="visible" :href="folderPath">{{ $options.i18n.link }}</gl-link>
     </div>
-    <gl-collapse :visible="visible" />
+    <gl-collapse :visible="visible">
+      <environment-item
+        v-for="(environment, index) in environments"
+        :key="environment.name"
+        :environment="environment"
+        :class="{ 'gl-mt-5': isFirstEnvironment(index) }"
+        class="gl-border-gray-100 gl-border-t-solid gl-border-1 gl-pl-7 gl-pt-3"
+        in-folder
+      />
+    </gl-collapse>
   </div>
 </template>

app/assets/javascripts/environments/components/new_environment_item.vue

+<script>
+import {
+  GlCollapse,
+  GlDropdown,
+  GlButton,
+  GlLink,
+  GlTooltipDirective as GlTooltip,
+} from '@gitlab/ui';
+import { __ } from '~/locale';
+import { truncate } from '~/lib/utils/text_utility';
+import isLastDeployment from '../graphql/queries/is_last_deployment.query.graphql';
+import ExternalUrl from './environment_external_url.vue';
+import Actions from './environment_actions.vue';
+import StopComponent from './environment_stop.vue';
+import Rollback from './environment_rollback.vue';
+import Pin from './environment_pin.vue';
+import Monitoring from './environment_monitoring.vue';
+import Terminal from './environment_terminal_button.vue';
+import Delete from './environment_delete.vue';
+
+export default {
+  components: {
+    GlCollapse,
+    GlDropdown,
+    GlButton,
+    GlLink,
+    Actions,
+    ExternalUrl,
+    StopComponent,
+    Rollback,
+    Monitoring,
+    Pin,
+    Terminal,
+    Delete,
+  },
+  directives: {
+    GlTooltip,
+  },
+  props: {
+    environment: {
+      required: true,
+      type: Object,
+    },
+    inFolder: {
+      required: false,
+      default: false,
+      type: Boolean,
+    },
+  },
+  apollo: {
+    isLastDeployment: {
+      query: isLastDeployment,
+      variables() {
+        return { environment: this.environment };
+      },
+    },
+  },
+  i18n: {
+    collapse: __('Collapse'),
+    expand: __('Expand'),
+  },
+  data() {
+    return { visible: false };
+  },
+  computed: {
+    icon() {
+      return this.visible ? 'angle-down' : 'angle-right';
+    },
+    externalUrl() {
+      return this.environment.externalUrl;
+    },
+    name() {
+      return this.inFolder ? this.environment.nameWithoutType : this.environment.name;
+    },
+    label() {
+      return this.visible ? this.$options.i18n.collapse : this.$options.i18n.expand;
+    },
+    actions() {
+      if (!this.environment?.lastDeployment) {
+        return [];
+      }
+      const { manualActions = [], scheduledActions = [] } = this.environment.lastDeployment;
+      const combinedActions = [...manualActions, ...scheduledActions];
+      return combinedActions.map((action) => ({
+        ...action,
+      }));
+    },
+    canStop() {
+      return this.environment?.canStop;
+    },
+    retryPath() {
+      return this.environment?.lastDeployment?.deployable?.retryPath;
+    },
+    hasExtraActions() {
+      return Boolean(
+        this.retryPath ||
+          this.canShowAutoStopDate ||
+          this.metricsPath ||
+          this.terminalPath ||
+          this.canDeleteEnvironment,
+      );
+    },
+    canShowAutoStopDate() {
+      if (!this.environment?.autoStopAt) {
+        return false;
+      }
+
+      const autoStopDate = new Date(this.environment?.autoStopAt);
+      const now = new Date();
+
+      return now < autoStopDate;
+    },
+    autoStopPath() {
+      return this.environment?.cancelAutoStopPath ?? '';
+    },
+    metricsPath() {
+      return this.environment?.metricsPath ?? '';
+    },
+    terminalPath() {
+      return this.environment?.terminalPath ?? '';
+    },
+    canDeleteEnvironment() {
+      return Boolean(this.environment?.canDelete && this.environment?.deletePath);
+    },
+    displayName() {
+      return truncate(this.name, 80);
+    },
+  },
+  methods: {
+    toggleCollapse() {
+      this.visible = !this.visible;
+    },
+  },
+};
+</script>
+<template>
+  <div>
+    <div
+      class="gl-px-3 gl-pt-3 gl-pb-5 gl-display-flex gl-justify-content-space-between gl-align-items-center"
+    >
+      <div class="gl-min-w-0 gl-mr-4 gl-display-flex gl-align-items-center">
+        <gl-button
+          class="gl-mr-4 gl-min-w-fit-content"
+          :icon="icon"
+          :aria-label="label"
+          size="small"
+          category="tertiary"
+          @click="toggleCollapse"
+        />
+        <gl-link
+          v-gl-tooltip
+          :href="environment.environmentPath"
+          class="gl-text-blue-500 gl-text-truncate"
+          :class="{ 'gl-font-weight-bold': visible }"
+          :title="name"
+        >
+          {{ displayName }}
+        </gl-link>
+      </div>
+      <div>
+        <div class="btn-group table-action-buttons" role="group">
+          <external-url
+            v-if="externalUrl"
+            :external-url="externalUrl"
+            data-track-action="click_button"
+            data-track-label="environment_url"
+          />
+
+          <actions
+            v-if="actions.length > 0"
+            :actions="actions"
+            data-track-action="click_dropdown"
+            data-track-label="environment_actions"
+            graphql
+          />
+
+          <stop-component
+            v-if="canStop"
+            :environment="environment"
+            class="gl-z-index-2"
+            data-track-action="click_button"
+            data-track-label="environment_stop"
+            graphql
+          />
+
+          <gl-dropdown
+            v-if="hasExtraActions"
+            icon="ellipsis_v"
+            text-sr-only
+            :text="__('More actions')"
+            category="secondary"
+            no-caret
+            right
+          >
+            <rollback
+              v-if="retryPath"
+              :environment="environment"
+              :is-last-deployment="isLastDeployment"
+              :retry-url="retryPath"
+              graphql
+              data-track-action="click_button"
+              data-track-label="environment_rollback"
+            />
+
+            <pin
+              v-if="canShowAutoStopDate"
+              :auto-stop-url="autoStopPath"
+              data-track-action="click_button"
+              data-track-label="environment_pin"
+            />
+
+            <monitoring
+              v-if="metricsPath"
+              :monitoring-url="metricsPath"
+              data-track-action="click_button"
+              data-track-label="environment_monitoring"
+            />
+
+            <terminal
+              v-if="terminalPath"
+              :terminal-path="terminalPath"
+              data-track-action="click_button"
+              data-track-label="environment_terminal"
+            />
+
+            <delete
+              v-if="canDeleteEnvironment"
+              :environment="environment"
+              data-track-action="click_button"
+              data-track-label="environment_delete"
+              graphql
+            />
+          </gl-dropdown>
+        </div>
+      </div>
+    </div>
+    <gl-collapse :visible="visible" />
+  </div>
+</template>

app/assets/javascripts/environments/components/new_environments_app.vue

@@ -5,20 +5,28 @@ import { updateHistory, setUrlParams, queryToObject } from '~/lib/utils/url_util
 import environmentAppQuery from '../graphql/queries/environment_app.query.graphql';
 import pollIntervalQuery from '../graphql/queries/poll_interval.query.graphql';
 import pageInfoQuery from '../graphql/queries/page_info.query.graphql';
+import environmentToDeleteQuery from '../graphql/queries/environment_to_delete.query.graphql';
+import environmentToRollbackQuery from '../graphql/queries/environment_to_rollback.query.graphql';
 import environmentToStopQuery from '../graphql/queries/environment_to_stop.query.graphql';
 import EnvironmentFolder from './new_environment_folder.vue';
 import EnableReviewAppModal from './enable_review_app_modal.vue';
 import StopEnvironmentModal from './stop_environment_modal.vue';
+import EnvironmentItem from './new_environment_item.vue';
+import ConfirmRollbackModal from './confirm_rollback_modal.vue';
+import DeleteEnvironmentModal from './delete_environment_modal.vue';
 
 export default {
   components: {
+    DeleteEnvironmentModal,
+    ConfirmRollbackModal,
     EnvironmentFolder,
     EnableReviewAppModal,
+    EnvironmentItem,
+    StopEnvironmentModal,
     GlBadge,
     GlPagination,
     GlTab,
     GlTabs,
-    StopEnvironmentModal,
   },
   apollo: {
     environmentApp: {
@@ -39,6 +47,12 @@ export default {
     pageInfo: {
       query: pageInfoQuery,
     },
+    environmentToDelete: {
+      query: environmentToDeleteQuery,
+    },
+    environmentToRollback: {
+      query: environmentToRollbackQuery,
+    },
     environmentToStop: {
       query: environmentToStopQuery,
     },
@@ -63,6 +77,8 @@ export default {
       isReviewAppModalVisible: false,
       page: parseInt(page, 10),
       scope,
+      environmentToDelete: {},
+      environmentToRollback: {},
       environmentToStop: {},
     };
   },
@@ -71,7 +87,10 @@ export default {
       return this.environmentApp?.reviewApp?.canSetupReviewApp;
     },
     folders() {
-      return this.environmentApp?.environments.filter((e) => e.size > 1) ?? [];
+      return this.environmentApp?.environments?.filter((e) => e.size > 1) ?? [];
+    },
+    environments() {
+      return this.environmentApp?.environments?.filter((e) => e.size === 1) ?? [];
     },
     availableCount() {
       return this.environmentApp?.availableCount;
@@ -164,7 +183,9 @@ export default {
       :modal-id="$options.modalId"
       data-testid="enable-review-app-modal"
     />
+    <delete-environment-modal :environment="environmentToDelete" graphql />
     <stop-environment-modal :environment="environmentToStop" graphql />
+    <confirm-rollback-modal :environment="environmentToRollback" graphql />
     <gl-tabs
       :action-secondary="addEnvironment"
       :action-primary="openReviewAppModal"
@@ -195,6 +216,12 @@ export default {
       class="gl-mb-3"
       :nested-environment="folder"
     />
+    <environment-item
+      v-for="environment in environments"
+      :key="environment.name"
+      class="gl-mb-3 gl-border-gray-100 gl-border-1 gl-border-b-solid"
+      :environment="environment.latest"
+    />
     <gl-pagination
       align="center"
       :total-items="totalItems"