FE: Display legacy app label on deploy board

ee/app/assets/javascripts/environments/components/deploy_board_component.vue

@@ -9,16 +9,17 @@
  * [Mockup](https://gitlab.com/gitlab-org/gitlab-ce/uploads/2f655655c0eadf655d0ae7467b53002a/environments__deploy-graphic.png)
  */
 import _ from 'underscore';
-import { n__ } from '~/locale';
+import { n__, s__, sprintf } from '~/locale';
 import tooltip from '~/vue_shared/directives/tooltip';
 import deployBoardSvg from 'ee_empty_states/icons/_deploy_board.svg';
-import { GlLoadingIcon } from '@gitlab/ui';
+import { GlLoadingIcon, GlButton } from '@gitlab/ui';
 import instanceComponent from './deploy_board_instance_component.vue';
 
 export default {
   components: {
     instanceComponent,
     GlLoadingIcon,
+    GlButton,
   },
   directives: {
     tooltip,
@@ -41,13 +42,27 @@ export default {
       required: false,
       default: '',
     },
+    hasLegacyAppLabel: {
+      type: Boolean,
+      required: false,
+      default: false,
+    },
   },
   computed: {
     canRenderDeployBoard() {
-      return !this.isLoading && !this.isEmpty && !_.isEmpty(this.deployBoardData);
+      return !this.isEmpty && !_.isEmpty(this.deployBoardData);
+    },
+    legacyLabelWarningMessage() {
+      return sprintf(
+        s__('DeployBoard|Matching on the %{label} label has been removed for deploy boards.'),
+        {
+          label: '<code>app</code>',
+        },
+        false,
+      );
     },
     canRenderEmptyState() {
-      return !this.isLoading && this.isEmpty;
+      return this.isEmpty;
     },
     instanceCount() {
       const { instances } = this.deployBoardData;
@@ -80,72 +95,86 @@ export default {
 <template>
   <div class="js-deploy-board deploy-board">
     <gl-loading-icon v-if="isLoading" />
+    <template v-else>
+      <div v-if="hasLegacyAppLabel" class="warning_message mb-0">
+        <span v-html="legacyLabelWarningMessage"></span>
+        {{
+          s__(
+            'DeployBoard|To see all instances on your board, you must update your chart and redeploy.',
+          )
+        }}
+        <gl-button
+          variant="link"
+          target="blank"
+          href="https://docs.gitlab.com/ee/user/project/deploy_boards.html#enabling-deploy-boards"
+          >{{ __('More Information') }}</gl-button
+        >
+      </div>
 
-    <div v-if="canRenderDeployBoard">
-      <section class="deploy-board-information">
-        <span v-tooltip :title="instanceIsCompletedText">
-          <span class="percentage text-center text-plain">{{ deployBoardData.completion }}%</span>
-          <span class="text text-center text-secondary">Complete</span>
-        </span>
-      </section>
+      <div v-if="canRenderDeployBoard" class="deploy-board-information">
+        <section class="deploy-board-status">
+          <span v-tooltip :title="instanceIsCompletedText">
+            <span class="percentage text-center text-plain">{{ deployBoardData.completion }}%</span>
+            <span class="text text-center text-secondary">Complete</span>
+          </span>
+        </section>
 
-      <section class="deploy-board-instances">
-        <p class="deploy-board-instances-text text-secondary">
-          <span>{{ instanceTitle }}</span>
-          <span class="total-instances">({{ instanceCount }})</span>
-        </p>
+        <section class="deploy-board-instances">
+          <p class="deploy-board-instances-text text-secondary">
+            <span>{{ instanceTitle }}</span>
+            <span class="total-instances">({{ instanceCount }})</span>
+          </p>
 
-        <div class="deploy-board-instances-container d-flex flex-wrap flex-row">
-          <template v-for="(instance, i) in deployBoardData.instances">
-            <instance-component
-              :key="i"
-              :status="instance.status"
-              :tooltip-text="instance.tooltip"
-              :pod-name="instance.pod_name"
-              :logs-path="logsPath"
-              :stable="instance.stable"
-            />
-          </template>
-        </div>
-      </section>
+          <div class="deploy-board-instances-container d-flex flex-wrap flex-row">
+            <template v-for="(instance, i) in deployBoardData.instances">
+              <instance-component
+                :key="i"
+                :status="instance.status"
+                :tooltip-text="instance.tooltip"
+                :pod-name="instance.pod_name"
+                :logs-path="logsPath"
+                :stable="instance.stable"
+              />
+            </template>
+          </div>
+        </section>
 
-      <section
-        v-if="deployBoardData.rollback_url || deployBoardData.abort_url"
-        class="deploy-board-actions"
-      >
-        <a
-          v-if="deployBoardData.rollback_url"
-          :href="deployBoardData.rollback_url"
-          class="btn"
-          data-method="post"
-          rel="nofollow"
+        <section
+          v-if="deployBoardData.rollback_url || deployBoardData.abort_url"
+          class="deploy-board-actions"
         >
-          Rollback
-        </a>
+          <a
+            v-if="deployBoardData.rollback_url"
+            :href="deployBoardData.rollback_url"
+            class="btn"
+            data-method="post"
+            rel="nofollow"
+            >Rollback</a
+          >
 
-        <a
-          v-if="deployBoardData.abort_url"
-          :href="deployBoardData.abort_url"
-          class="btn btn-red btn-inverted"
-          data-method="post"
-          rel="nofollow"
-        >
-          Abort
-        </a>
-      </section>
-    </div>
+          <a
+            v-if="deployBoardData.abort_url"
+            :href="deployBoardData.abort_url"
+            class="btn btn-red btn-inverted"
+            data-method="post"
+            rel="nofollow"
+            >Abort</a
+          >
+        </section>
+      </div>
 
-    <div v-if="canRenderEmptyState">
-      <section class="deploy-board-empty-state-svg" v-html="deployBoardSvg"></section>
+      <div v-if="canRenderEmptyState" class="deploy-board-empty">
+        <section class="deploy-board-empty-state-svg" v-html="deployBoardSvg"></section>
 
-      <section class="deploy-board-empty-state-text">
-        <span class="deploy-board-empty-state-title d-flex">Kubernetes deployment not found</span>
-        <span>
-          To see deployment progress for your environments, make sure your deployments are in
-          Kubernetes namespace <code>{{ projectName }}</code> and labeled with
-          <code>app=$CI_ENVIRONMENT_SLUG</code>.
-        </span>
-      </section>
-    </div>
+        <section class="deploy-board-empty-state-text">
+          <span class="deploy-board-empty-state-title d-flex">Kubernetes deployment not found</span>
+          <span>
+            To see deployment progress for your environments, make sure your deployments are in
+            Kubernetes namespace
+            <code>{{ projectName }}</code> and labeled with <code>app=$CI_ENVIRONMENT_SLUG</code>.
+          </span>
+        </section>
+      </div>
+    </template>
   </div>
 </template>

ee/app/assets/stylesheets/pages/environments.scss

@@ -2,15 +2,20 @@
  * Deploy boards
 */
 .deploy-board {
-  padding: 10px;
   background-color: $gray-light;
   min-height: 20px;
 
-  > div {
+  > .loading-container,
+  > .deploy-board-empty,
+  > .deploy-board-information {
+    padding: 10px;
+  }
+
+  > .deploy-board-information {
     display: flex;
     justify-content: space-between;
 
-    .deploy-board-information {
+    .deploy-board-status {
       order: 1;
       display: flex;
       width: 70px;

ee/spec/javascripts/environments/deploy_board_component_spec.js

@@ -99,4 +99,29 @@ describe('Deploy Board', () => {
       expect(component.$el.querySelector('.fa-spin')).toBeDefined();
     });
   });
+
+  describe('with hasLegacyAppLabel equal true', () => {
+    let component;
+
+    beforeEach(() => {
+      component = new DeployBoardComponent({
+        propsData: {
+          isLoading: false,
+          isEmpty: false,
+          logsPath: environment.log_path,
+          hasLegacyAppLabel: true,
+          deployBoardData: {},
+        },
+      }).$mount();
+    });
+
+    it('should render legacy label warning message', () => {
+      const warningMessage = component.$el.querySelector('.warning_message');
+
+      expect(warningMessage).toBeTruthy();
+      expect(warningMessage.innerText).toContain(
+        'Matching on the app label has been removed for deploy boards.',
+      );
+    });
+  });
 });