Merge branch 'ph/335222/changeWarningMessageToVIf' into 'master'

Stops rendering the collapsed warning message all the time

See merge request gitlab-org/gitlab!65539

app/assets/javascripts/diffs/components/diff_file.vue

@@ -387,7 +387,7 @@ export default {
         </div>
         <template v-else>
           <div
-            v-show="showWarning"
+            v-if="showWarning"
             class="collapsed-file-warning gl-p-7 gl-bg-orange-50 gl-text-center gl-rounded-bottom-left-base gl-rounded-bottom-right-base"
           >
             <p class="gl-mb-5">
@@ -403,7 +403,7 @@ export default {
             </gl-button>
           </div>
           <diff-content
-            v-show="showContent"
+            v-if="showContent"
             :class="hasBodyClasses.content"
             :diff-file="file"
             :help-page-path="helpPagePath"

spec/frontend/diffs/components/diff_file_spec.js

@@ -110,7 +110,6 @@ const findLoader = (wrapper) => wrapper.find('[data-testid="loader-icon"]');
 const findToggleButton = (wrapper) => wrapper.find('[data-testid="expand-button"]');
 
 const toggleFile = (wrapper) => findDiffHeader(wrapper).vm.$emit('toggleFile');
-const isDisplayNone = (element) => element.style.display === 'none';
 const getReadableFile = () => JSON.parse(JSON.stringify(diffFileMockDataReadable));
 const getUnreadableFile = () => JSON.parse(JSON.stringify(diffFileMockDataUnreadable));
 
@@ -305,9 +304,7 @@ describe('DiffFile', () => {
       it('should not have any content at all', async () => {
         await wrapper.vm.$nextTick();
 
-        Array.from(findDiffContentArea(wrapper).element.children).forEach((child) => {
-          expect(isDisplayNone(child)).toBe(true);
-        });
+        expect(findDiffContentArea(wrapper).element.children.length).toBe(0);
       });
 
       it('should not have the class `has-body` to present the header differently', () => {