Add feature flag checks to the component

This change accounts for the feature flag being present and
extends current specs for a secondary state with the feature flag.

ee/app/assets/javascripts/logs/components/environment_logs.vue

@@ -56,15 +56,18 @@ export default {
     showLoader() {
       return this.logs.isLoading || !this.logs.isComplete;
     },
-    advancedControlsDisabled() {
-      return this.environments.isLoading || !this.enableAdvancedQuerying;
+    featureElasticEnabled() {
+      return gon.features && gon.features.enableClusterApplicationElasticStack;
+    },
+    advancedFeaturesEnabled() {
+      return this.featureElasticEnabled && this.enableAdvancedQuerying;
     },
     shouldShowElasticStackCallout() {
       return (
         !this.isElasticStackCalloutDismissed &&
         !this.environments.isLoading &&
         !this.logs.isLoading &&
-        !this.enableAdvancedQuerying
+        !this.advancedFeaturesEnabled
       );
     },
   },
@@ -124,7 +127,8 @@ export default {
           :label="s__('Environments|Environment')"
           label-size="sm"
           label-for="environments-dropdown"
-          class="col-3 px-1"
+          class="px-1"
+          :class="featureElasticEnabled ? 'col-3' : 'col-6'"
         >
           <gl-dropdown
             id="environments-dropdown"
@@ -147,7 +151,8 @@ export default {
           :label="s__('Environments|Pod logs from')"
           label-size="sm"
           label-for="pods-dropdown"
-          class="col-3 px-1"
+          class="px-1"
+          :class="featureElasticEnabled ? 'col-3' : 'col-6'"
         >
           <gl-dropdown
             id="pods-dropdown"
@@ -165,47 +170,52 @@ export default {
             </gl-dropdown-item>
           </gl-dropdown>
         </gl-form-group>
-        <gl-form-group
-          id="dates-fg"
-          :label="s__('Environments|Show last')"
-          label-size="sm"
-          label-for="time-window-dropdown"
-          class="col-3 px-1"
-        >
-          <gl-dropdown
-            id="time-window-dropdown"
-            ref="time-window-dropdown"
-            :disabled="advancedControlsDisabled"
-            :text="timeWindow.options[timeWindow.current].label"
-            class="d-flex gl-h-32"
-            toggle-class="dropdown-menu-toggle"
+
+        <template v-if="featureElasticEnabled">
+          <gl-form-group
+            id="dates-fg"
+            :label="s__('Environments|Show last')"
+            label-size="sm"
+            label-for="time-window-dropdown"
+            class="col-3 px-1"
           >
-            <gl-dropdown-item
-              v-for="(option, key) in timeWindow.options"
-              :key="key"
-              @click="setTimeWindow(key)"
+            <gl-dropdown
+              id="time-window-dropdown"
+              ref="time-window-dropdown"
+              :disabled="environments.isLoading || !advancedFeaturesEnabled"
+              :text="timeWindow.options[timeWindow.current].label"
+              class="d-flex gl-h-32"
+              toggle-class="dropdown-menu-toggle"
             >
-              {{ option.label }}
-            </gl-dropdown-item>
-          </gl-dropdown>
-        </gl-form-group>
-        <gl-form-group
-          id="search-fg"
-          :label="s__('Environments|Search')"
-          label-size="sm"
-          label-for="search"
-          class="col-3 px-1"
-        >
-          <gl-search-box-by-click
-            v-model.trim="searchQuery"
-            :disabled="advancedControlsDisabled"
-            :placeholder="s__('Environments|Search')"
-            class="js-logs-search"
-            type="search"
-            autofocus
-            @submit="!advancedControlsDisabled && setSearch(searchQuery)"
-          />
-        </gl-form-group>
+              <gl-dropdown-item
+                v-for="(option, key) in timeWindow.options"
+                :key="key"
+                @click="setTimeWindow(key)"
+              >
+                {{ option.label }}
+              </gl-dropdown-item>
+            </gl-dropdown>
+          </gl-form-group>
+          <gl-form-group
+            id="search-fg"
+            :label="s__('Environments|Search')"
+            label-size="sm"
+            label-for="search"
+            class="col-3 px-1"
+          >
+            <gl-search-box-by-click
+              v-model.trim="searchQuery"
+              :disabled="environments.isLoading || !advancedFeaturesEnabled"
+              :placeholder="s__('Environments|Search')"
+              class="js-logs-search"
+              type="search"
+              autofocus
+              @submit="
+                (environments.isLoading || !advancedFeaturesEnabled) && setSearch(searchQuery)
+              "
+            />
+          </gl-form-group>
+        </template>
       </div>
 
       <log-control-buttons

ee/spec/frontend/logs/components/environment_logs_spec.js

@@ -49,6 +49,28 @@ describe('EnvironmentLogs', () => {
   const findLogControlButtons = () => wrapper.find({ name: 'log-control-buttons-stub' });
   const findLogTrace = () => wrapper.find('.js-log-trace');
 
+  const mockSetInitData = () => {
+    state.pods.options = mockPods;
+    state.environments.current = mockEnvName;
+    [state.pods.current] = state.pods.options;
+    state.enableAdvancedQuerying = true;
+
+    state.logs.isComplete = false;
+    state.logs.lines = mockLogsResult;
+  };
+
+  const mockShowPodLogs = podName => {
+    state.pods.options = mockPods;
+    [state.pods.current] = podName;
+
+    state.logs.isComplete = false;
+    state.logs.lines = mockLogsResult;
+  };
+
+  const mockFetchEnvs = () => {
+    state.environments.options = mockEnvironments;
+  };
+
   const initWrapper = () => {
     wrapper = shallowMount(EnvironmentLogsComponent, {
       propsData,
@@ -93,12 +115,17 @@ describe('EnvironmentLogs', () => {
     // top bar
     expect(findEnvironmentsDropdown().is(GlDropdown)).toBe(true);
     expect(findPodsDropdown().is(GlDropdown)).toBe(true);
-    expect(findSearchBar().is(GlSearchBoxByClick)).toBe(true);
-    expect(findTimeWindowDropdown().is(GlDropdown)).toBe(true);
     expect(findLogControlButtons().exists()).toBe(true);
 
+    expect(findSearchBar().exists()).toBe(false); // behind ff
+    expect(findTimeWindowDropdown().exists()).toBe(false); // behind ff
+
     // log trace
     expect(findLogTrace().isEmpty()).toBe(false);
+
+    // layout
+    expect(wrapper.find('#environments-dropdown-fg').attributes('class')).toMatch('col-6');
+    expect(wrapper.find('#pods-dropdown-fg').attributes('class')).toMatch('col-6');
   });
 
   it('mounted inits data', () => {
@@ -138,15 +165,6 @@ describe('EnvironmentLogs', () => {
       expect(findPodsDropdown().findAll(GlDropdownItem).length).toBe(0);
     });
 
-    it('displays a disabled search bar', () => {
-      expect(findSearchBar().exists()).toEqual(true);
-      expect(findSearchBar().attributes('disabled')).toEqual('true');
-    });
-
-    it('displays a disabled time window dropdown', () => {
-      expect(findTimeWindowDropdown().attributes('disabled')).toEqual('true');
-    });
-
     it('does not update buttons state', () => {
       expect(updateControlBtnsMock).not.toHaveBeenCalled();
     });
@@ -161,48 +179,11 @@ describe('EnvironmentLogs', () => {
     });
   });
 
-  describe('when advanced querying is disabled', () => {
-    beforeEach(() => {
-      state.pods.options = [];
-
-      state.logs.lines = [];
-      state.logs.isLoading = false;
-
-      state.environments.options = [];
-      state.environments.isLoading = false;
-
-      state.enableAdvancedQuerying = false;
-
-      initWrapper();
-    });
-
-    it('search bar and time window dropdown are disabled', () => {
-      expect(findSearchBar().attributes('disabled')).toEqual('true');
-      expect(findTimeWindowDropdown().attributes('disabled')).toEqual('true');
-    });
-  });
-
   describe('state with data', () => {
     beforeEach(() => {
-      actionMocks.setInitData.mockImplementation(() => {
-        state.pods.options = mockPods;
-        state.environments.current = mockEnvName;
-        [state.pods.current] = state.pods.options;
-        state.enableAdvancedQuerying = true;
-
-        state.logs.isComplete = false;
-        state.logs.lines = mockLogsResult;
-      });
-      actionMocks.showPodLogs.mockImplementation(podName => {
-        state.pods.options = mockPods;
-        [state.pods.current] = podName;
-
-        state.logs.isComplete = false;
-        state.logs.lines = mockLogsResult;
-      });
-      actionMocks.fetchEnvironments.mockImplementation(() => {
-        state.environments.options = mockEnvironments;
-      });
+      actionMocks.setInitData.mockImplementation(mockSetInitData);
+      actionMocks.showPodLogs.mockImplementation(mockShowPodLogs);
+      actionMocks.fetchEnvironments.mockImplementation(mockFetchEnvs);
 
       initWrapper();
     });
@@ -243,14 +224,6 @@ describe('EnvironmentLogs', () => {
       expect(trace.text().split('\n')).toEqual(mockTrace);
     });
 
-    it('displays an enabled search bar', () => {
-      expect(findSearchBar().attributes('disabled')).toBeFalsy();
-    });
-
-    it('displays an enabled time window dropdown', () => {
-      expect(findTimeWindowDropdown().attributes('disabled')).toBeFalsy();
-    });
-
     it('update control buttons state', () => {
       expect(updateControlBtnsMock).toHaveBeenCalledTimes(1);
     });
@@ -294,4 +267,95 @@ describe('EnvironmentLogs', () => {
       });
     });
   });
+
+  describe('when feature flag enable_cluster_application_elastic_stack is enabled', () => {
+    let originalGon;
+
+    beforeEach(() => {
+      originalGon = window.gon;
+      window.gon = { features: { enableClusterApplicationElasticStack: true } };
+    });
+
+    afterEach(() => {
+      window.gon = originalGon;
+    });
+
+    it('displays UI elements', () => {
+      initWrapper();
+
+      // elements
+      expect(findSearchBar().exists()).toBe(true);
+      expect(findSearchBar().is(GlSearchBoxByClick)).toBe(true);
+      expect(findTimeWindowDropdown().exists()).toBe(true);
+      expect(findTimeWindowDropdown().is(GlDropdown)).toBe(true);
+
+      // layout
+      expect(wrapper.find('#environments-dropdown-fg').attributes('class')).toMatch('col-3');
+      expect(wrapper.find('#pods-dropdown-fg').attributes('class')).toMatch('col-3');
+      expect(wrapper.find('#dates-fg').attributes('class')).toMatch('col-3');
+      expect(wrapper.find('#search-fg').attributes('class')).toMatch('col-3');
+    });
+
+    describe('loading state', () => {
+      beforeEach(() => {
+        state.pods.options = [];
+
+        state.logs.lines = [];
+        state.logs.isLoading = true;
+
+        state.environments.options = [];
+        state.environments.isLoading = true;
+
+        initWrapper();
+      });
+
+      it('displays a disabled search bar', () => {
+        expect(findSearchBar().exists()).toEqual(true);
+        expect(findSearchBar().attributes('disabled')).toEqual('true');
+      });
+
+      it('displays a disabled time window dropdown', () => {
+        expect(findTimeWindowDropdown().attributes('disabled')).toEqual('true');
+      });
+    });
+
+    describe('when advanced querying is disabled', () => {
+      beforeEach(() => {
+        state.pods.options = [];
+
+        state.logs.lines = [];
+        state.logs.isLoading = false;
+
+        state.environments.options = [];
+        state.environments.isLoading = false;
+
+        state.enableAdvancedQuerying = false;
+
+        initWrapper();
+      });
+
+      it('search bar and time window dropdown are disabled', () => {
+        expect(findSearchBar().attributes('disabled')).toEqual('true');
+        expect(findTimeWindowDropdown().attributes('disabled')).toEqual('true');
+      });
+    });
+
+    describe('state with data', () => {
+      beforeEach(() => {
+        actionMocks.setInitData.mockImplementation(mockSetInitData);
+        actionMocks.showPodLogs.mockImplementation(mockShowPodLogs);
+        actionMocks.fetchEnvironments.mockImplementation(mockFetchEnvs);
+
+        initWrapper();
+      });
+
+      it('displays an enabled search bar', () => {
+        expect(findSearchBar().attributes('disabled')).toBeFalsy();
+      });
+
+      it('displays an enabled time window dropdown', () => {
+        expect(findTimeWindowDropdown().attributes('disabled')).toBeFalsy();
+      });
+    });
+  });
 });