[Design Audit] Cleanup small layout issues on Case pages (#118128)

* fixed line wrapping * Prevent title from breaking word on wrap. * remove extra padding * Fixes "Cases" double header. Actions on same row. * remove leftover code / fix check * fix i18n check
elastic · Nov 29, 2021 · fb72b6a · fb72b6a
1 parent 098f90e
commit fb72b6a
Show file tree

Hide file tree

Showing 9 changed files with 29 additions and 53 deletions.
diff --git a/x-pack/plugins/cases/public/components/case_action_bar/index.tsx b/x-pack/plugins/cases/public/components/case_action_bar/index.tsx
@@ -86,7 +86,7 @@ const CaseActionBarComponent: React.FC<CaseActionBarProps> = ({
         <MyDescriptionList compressed>
           <EuiFlexGroup responsive={false} justifyContent="spaceBetween">
             {caseData.type !== CaseType.collection && (
-              <EuiFlexItem data-test-subj="case-view-status">
+              <EuiFlexItem grow={false} data-test-subj="case-view-status">
                 <EuiDescriptionListTitle>{i18n.STATUS}</EuiDescriptionListTitle>
                 <EuiDescriptionListDescription>
                   <StatusContextMenu
@@ -97,7 +97,7 @@ const CaseActionBarComponent: React.FC<CaseActionBarProps> = ({
                 </EuiDescriptionListDescription>
               </EuiFlexItem>
             )}
-            <EuiFlexItem>
+            <EuiFlexItem grow={false}>
               <EuiDescriptionListTitle>{title}</EuiDescriptionListTitle>
               <EuiDescriptionListDescription>
                 <FormattedRelativePreferenceDate

diff --git a/x-pack/plugins/cases/public/components/case_view/index.tsx b/x-pack/plugins/cases/public/components/case_view/index.tsx
@@ -26,7 +26,7 @@ import { UserActionTree } from '../user_action_tree';
 import { UserList } from '../user_list';
 import { useUpdateCase } from '../../containers/use_update_case';
 import { getTypedPayload } from '../../containers/utils';
-import { ContentWrapper, WhitePageWrapper, HeaderWrapper } from '../wrappers';
+import { ContentWrapper, WhitePageWrapper } from '../wrappers';
 import { CaseActionBar } from '../case_action_bar';
 import { useGetCaseUserActions } from '../../containers/use_get_case_user_actions';
 import { EditConnector } from '../edit_connector';
@@ -389,32 +389,31 @@ export const CaseComponent = React.memo<CaseComponentProps>(
 
     return (
       <>
-        <HeaderWrapper>
-          <HeaderPage
-            backOptions={backOptions}
-            data-test-subj="case-view-title"
-            titleNode={
-              <EditableTitle
-                userCanCrud={userCanCrud}
-                isLoading={isLoading && updateKey === 'title'}
-                title={caseData.title}
-                onSubmit={onSubmitTitle}
-              />
-            }
-            title={caseData.title}
-          >
-            <CaseActionBar
-              allCasesNavigation={allCasesNavigation}
-              caseData={caseData}
-              currentExternalIncident={currentExternalIncident}
+        <HeaderPage
+          backOptions={backOptions}
+          data-test-subj="case-view-title"
+          titleNode={
+            <EditableTitle
               userCanCrud={userCanCrud}
-              disableAlerting={ruleDetailsNavigation == null || hideSyncAlerts}
-              isLoading={isLoading && (updateKey === 'status' || updateKey === 'settings')}
-              onRefresh={handleRefresh}
-              onUpdateField={onUpdateField}
+              isLoading={isLoading && updateKey === 'title'}
+              title={caseData.title}
+              onSubmit={onSubmitTitle}
             />
-          </HeaderPage>
-        </HeaderWrapper>
+          }
+          title={caseData.title}
+        >
+          <CaseActionBar
+            allCasesNavigation={allCasesNavigation}
+            caseData={caseData}
+            currentExternalIncident={currentExternalIncident}
+            userCanCrud={userCanCrud}
+            disableAlerting={ruleDetailsNavigation == null || hideSyncAlerts}
+            isLoading={isLoading && (updateKey === 'status' || updateKey === 'settings')}
+            onRefresh={handleRefresh}
+            onUpdateField={onUpdateField}
+          />
+        </HeaderPage>
+
         <WhitePageWrapper>
           <ContentWrapper>
             <EuiFlexGroup>

diff --git a/x-pack/plugins/cases/public/components/truncated_text/index.tsx b/x-pack/plugins/cases/public/components/truncated_text/index.tsx
@@ -16,6 +16,7 @@ const Text = styled.span`
   -webkit-line-clamp: ${LINE_CLAMP};
   -webkit-box-orient: vertical;
   overflow: hidden;
+  word-break: normal;
 `;
 
 interface Props {

diff --git a/x-pack/plugins/cases/public/components/wrappers/index.tsx b/x-pack/plugins/cases/public/components/wrappers/index.tsx
@@ -20,24 +20,10 @@ export const SectionWrapper = styled.div`
   width: 100%;
 `;
 
-export const HeaderWrapper = styled.div`
-  ${({ theme }) =>
-    `
-      padding: ${theme.eui.paddingSizes.l} ${theme.eui.paddingSizes.l} 0 ${theme.eui.paddingSizes.l};
-      @media only screen and (max-width: ${theme.eui.euiBreakpoints.s}) {
-        padding: ${theme.eui.paddingSizes.s} ${theme.eui.paddingSizes.s} 0
-          ${theme.eui.paddingSizes.s};
-      }
-    `};
-`;
 const gutterTimeline = '70px'; // seems to be a timeline reference from the original file
 export const ContentWrapper = styled.div`
   ${({ theme }) =>
     `
-      padding: ${theme.eui.paddingSizes.l} ${theme.eui.paddingSizes.l} ${gutterTimeline} ${theme.eui.paddingSizes.l};
-      @media only screen and (max-width: ${theme.eui.euiBreakpoints.s}) {
-        padding: ${theme.eui.paddingSizes.s} ${theme.eui.paddingSizes.s} ${gutterTimeline}
-          ${theme.eui.paddingSizes.s};
-      }
+      padding: ${theme.eui.paddingSizes.l} 0 ${gutterTimeline} 0;
     `};
 `;
diff --git a/x-pack/plugins/observability/public/components/app/cases/all_cases/index.tsx b/x-pack/plugins/observability/public/components/app/cases/all_cases/index.tsx
@@ -61,7 +61,7 @@ export const AllCases = React.memo<AllCasesProps>(({ userCanCrud }) => {
       },
     },
     disableAlerts: true,
-    showTitle: false,
+    showTitle: true,
     userCanCrud,
     owner: [CASES_OWNER],
   });

diff --git a/x-pack/plugins/observability/public/components/app/cases/translations.ts b/x-pack/plugins/observability/public/components/app/cases/translations.ts
@@ -92,10 +92,6 @@ export const OPTIONAL = i18n.translate('xpack.observability.cases.caseView.optio
   defaultMessage: 'Optional',
 });
 
-export const PAGE_TITLE = i18n.translate('xpack.observability.cases.pageTitle', {
-  defaultMessage: 'Cases',
-});
-
 export const CREATE_CASE = i18n.translate('xpack.observability.cases.caseView.createCase', {
   defaultMessage: 'Create case',
 });

diff --git a/x-pack/plugins/observability/public/pages/cases/all_cases.tsx b/x-pack/plugins/observability/public/pages/cases/all_cases.tsx
@@ -8,7 +8,6 @@
 import React from 'react';
 
 import { AllCases } from '../../components/app/cases/all_cases';
-import * as i18n from '../../components/app/cases/translations';
 
 import { CaseFeatureNoPermissions } from './feature_no_permissions';
 import { useGetUserCasesPermissions } from '../../hooks/use_get_user_cases_permissions';
@@ -45,9 +44,6 @@ export const AllCasesPage = React.memo(() => {
     <ObservabilityPageTemplate
       data-test-subj={noDataConfig ? 'noDataPage' : undefined}
       noDataConfig={noDataConfig}
-      pageHeader={{
-        pageTitle: <>{i18n.PAGE_TITLE}</>,
-      }}
     >
       <AllCases userCanCrud={userPermissions?.crud ?? false} />
     </ObservabilityPageTemplate>

diff --git a/x-pack/plugins/translations/translations/ja-JP.json b/x-pack/plugins/translations/translations/ja-JP.json
@@ -6995,7 +6995,6 @@
     "xpack.observability.cases.createCase.fieldTagsHelpText": "このケースの1つ以上のカスタム識別タグを入力します。新しいタグを開始するには、各タグの後でEnterを押します。",
     "xpack.observability.cases.createCase.titleFieldRequiredError": "タイトルが必要です。",
     "xpack.observability.cases.dismissErrorsPushServiceCallOutTitle": "閉じる",
-    "xpack.observability.cases.pageTitle": "ケース",
     "xpack.observability.casesLinkTitle": "ケース",
     "xpack.observability.emptySection.apps.alert.description": "503 エラーが累積していますか?サービスは応答していますか?CPUとRAMの使用量が跳ね上がっていますか?このような警告を、事後にではなく、発生と同時に把握しましょう。",
     "xpack.observability.emptySection.apps.alert.link": "ルールを作成",

diff --git a/x-pack/plugins/translations/translations/zh-CN.json b/x-pack/plugins/translations/translations/zh-CN.json
@@ -7053,7 +7053,6 @@
     "xpack.observability.cases.createCase.fieldTagsHelpText": "为此案例键入一个或多个定制识别标签。在每个标签后按 Enter 键可开始新的标签。",
     "xpack.observability.cases.createCase.titleFieldRequiredError": "标题必填。",
     "xpack.observability.cases.dismissErrorsPushServiceCallOutTitle": "关闭",
-    "xpack.observability.cases.pageTitle": "案例",
     "xpack.observability.casesLinkTitle": "案例",
     "xpack.observability.emptySection.apps.alert.description": "503 错误是否越来越多？服务是否响应？CPU 和 RAM 利用率是否激增？实时查看警告，而不是事后再进行剖析。",
     "xpack.observability.emptySection.apps.alert.link": "创建规则",