fix height and ftr tests

Author: christineweng

x-pack/platform/plugins/shared/cases/public/components/case_view/components/attachment_accordion.tsx

@@ -15,7 +15,7 @@ import {
   useEuiTheme,
 } from '@elastic/eui';
 import { css } from '@emotion/react';
-import React from 'react';
+import React, { useCallback, useState } from 'react';
 
 interface AttachmentAccordionProps {
   id: string;
@@ -27,14 +27,18 @@ interface AttachmentAccordionProps {
 export const AttachmentAccordion = ({ id, title, count, children }: AttachmentAccordionProps) => {
   const { euiTheme } = useEuiTheme();
   const accordionId = useGeneratedHtmlId({ prefix: `case-view-attachment-${id}` });
+  // Controlled isOpen so we can fully unmount children when collapsed
+  const [isOpen, setIsOpen] = useState(true);
+  const onToggle = useCallback((nextIsOpen: boolean) => setIsOpen(nextIsOpen), []);
   return (
     <EuiFlexItem grow={false}>
       <EuiPanel hasBorder>
         <EuiAccordion
           id={accordionId}
           data-test-subj={`case-view-attachment-accordion-${id}`}
           buttonProps={{ 'data-test-subj': `case-view-attachment-accordion-toggle-${id}` }}
-          initialIsOpen
+          forceState={isOpen ? 'open' : 'closed'}
+          onToggle={onToggle}
           buttonContent={
             <EuiText size="s">
               <h4
@@ -57,7 +61,7 @@ export const AttachmentAccordion = ({ id, title, count, children }: AttachmentAc
             </EuiText>
           }
         >
-          {children}
+          {isOpen ? children : null}
         </EuiAccordion>
       </EuiPanel>
     </EuiFlexItem>

x-pack/platform/plugins/shared/cases/public/components/case_view/components/case_view_observables.tsx

@@ -5,11 +5,7 @@
  * 2.0.
  */
 import React, { useCallback, useMemo } from 'react';
-
-import { EuiFlexItem, EuiFlexGroup } from '@elastic/eui';
-
 import type { CaseUI } from '../../../../common/ui/types';
-
 import { ObservablesTable } from '../../observables/observables_table';
 import { useCaseObservables } from '../use_case_observables';
 import type { OnUpdateFields } from '../types';
@@ -47,19 +43,11 @@ export const CaseViewObservables = ({
   );
 
   return (
-    <EuiFlexGroup>
-      <EuiFlexItem>
-        <EuiFlexGroup>
-          <EuiFlexItem>
-            <ObservablesTable
-              caseData={caseDataWithFilteredObservables}
-              isLoading={isLoading || isLoadingObservables}
-              onExtractObservablesChanged={onExtractObservablesChanged}
-            />
-          </EuiFlexItem>
-        </EuiFlexGroup>
-      </EuiFlexItem>
-    </EuiFlexGroup>
+    <ObservablesTable
+      caseData={caseDataWithFilteredObservables}
+      isLoading={isLoading || isLoadingObservables}
+      onExtractObservablesChanged={onExtractObservablesChanged}
+    />
   );
 };
 

x-pack/platform/test/functional_with_es_ssl/apps/cases/group1/view_case.ts

@@ -913,8 +913,6 @@ export default ({ getPageObject, getService }: FtrProviderContext) => {
       });
 
       it('adds a file to the case', async () => {
-        await testSubjects.existOrFail('case-view-attachment-accordion-file');
-
         await cases.casesFilesTable.addFile(require.resolve('./elastic_logo.png'));
 
         // make sure the uploaded file is displayed on the table

x-pack/platform/test/screenshot_creation/apps/response_ops_docs/stack_cases/details_view.ts

@@ -31,8 +31,9 @@ export default function ({ getService }: FtrProviderContext) {
         1400,
         1024
       );
-      const filesTab = await testSubjects.find('case-view-tab-title-files');
-      await filesTab.click();
+      const attachmentsTab = await testSubjects.find('case-view-tab-title-attachments');
+      await attachmentsTab.click();
+      await testSubjects.existOrFail('case-view-attachment-accordion-file');
       await commonScreenshots.takeScreenshot('cases-files', screenshotDirectories, 1400, 1024);
     });
   });

x-pack/solutions/observability/test/screenshot_creation/apps/response_ops_docs/observability_cases/list_view.ts

@@ -89,8 +89,7 @@ export default function ({ getPageObject, getService }: FtrProviderContext) {
       await common.navigateToUrlWithBrowserHistory('observability', `/cases/${caseIdMonitoring}`);
       const attachmentsTab = await testSubjects.find('case-view-tab-title-attachments');
       await attachmentsTab.click();
-      const filesTab = await testSubjects.find('case-view-tab-title-files');
-      await filesTab.click();
+      await testSubjects.existOrFail('case-view-attachment-accordion-file');
       await commonScreenshots.takeScreenshot(
         'observabiity-case-files',
         screenshotDirectories,

x-pack/solutions/observability/test/serverless/functional/test_suites/cases/view_case.ts

@@ -397,8 +397,6 @@ export default ({ getPageObject, getService }: FtrProviderContext) => {
       });
 
       it('adds a file to the case', async () => {
-        await testSubjects.existOrFail('case-view-attachment-accordion-file');
-
         await cases.casesFilesTable.addFile(require.resolve('./note.txt'));
 
         const uploadedFileName = await testSubjects.getVisibleText('cases-files-name-text');

x-pack/solutions/observability/test/serverless/functional/test_suites/screenshot_creation/response_ops_docs/cases/list_view.ts

@@ -78,8 +78,6 @@ export default function ({ getPageObject, getPageObjects, getService }: FtrProvi
       await pageObjects.svlCommonNavigation.sidenav.toggle(true);
       const attachmentsTab = await testSubjects.find('case-view-tab-title-attachments');
       await attachmentsTab.click();
-      const filesTab = await testSubjects.find('case-view-tab-title-files');
-      await filesTab.click();
       await cases.casesFilesTable.addFile(require.resolve('./testfile.png'));
       await testSubjects.getVisibleText('cases-files-name-link');
       await svlCommonScreenshots.takeScreenshot(

x-pack/solutions/security/test/screenshot_creation/apps/response_ops_docs/security_cases/list_view.ts

@@ -78,8 +78,9 @@ export default function ({ getPageObject, getService, getPageObjects }: FtrProvi
       });
       await commonScreenshots.takeScreenshot('cases-ui-open', screenshotDirectories, 1400, 1024);
 
-      const filesTab = await testSubjects.find('case-view-tab-title-files');
-      await filesTab.click();
+      const attachmentsTab = await testSubjects.find('case-view-tab-title-attachments');
+      await attachmentsTab.click();
+      await testSubjects.existOrFail('case-view-attachment-accordion-file');
       await commonScreenshots.takeScreenshot('cases-files', screenshotDirectories, 1400, 1024);
     });
   });

x-pack/solutions/security/test/serverless/functional/test_suites/ftr/cases/view_case.ts

@@ -394,8 +394,6 @@ export default ({ getPageObject, getService }: FtrProviderContext) => {
         await testSubjects.click('case-view-tab-title-attachments');
       });
       it('adds a file to the case', async () => {
-        await testSubjects.existOrFail('case-view-attachment-accordion-file');
-
         await cases.casesFilesTable.addFile(require.resolve('./note.txt'));
 
         const uploadedFileName = await testSubjects.getVisibleText('cases-files-name-text');

x-pack/solutions/security/test/serverless/functional/test_suites/screenshot_creation/response_ops_docs/cases/list_view.ts

@@ -86,8 +86,6 @@ export default function ({ getPageObject, getPageObjects, getService }: FtrProvi
       await svlCommonScreenshots.takeScreenshot('cases-ui-open', screenshotDirectories, 1400, 1024);
       const attachmentsTab = await testSubjects.find('case-view-tab-title-attachments');
       await attachmentsTab.click();
-      const filesTab = await testSubjects.find('case-view-tab-title-files');
-      await filesTab.click();
       await cases.casesFilesTable.addFile(require.resolve('./testfile.png'));
       await testSubjects.getVisibleText('cases-files-name-link');
       await svlCommonScreenshots.takeScreenshot('cases-files', screenshotDirectories, 1400, 1024);