[8.6] Make page titles more consistent for Overview, Alerts, Rules, Rule Detail and Cases pages (#146150)

x-pack/plugins/cases/public/components/callouts/case_callouts.tsx

@@ -14,15 +14,17 @@ const CaseCalloutsComponent: React.FC = () => {
   const { euiTheme } = useEuiTheme();
   const { isAtLeastPlatinum } = useLicense();
 
-  return (
+  return !isAtLeastPlatinum() ? (
     <EuiFlexGroup
       gutterSize="none"
       css={{ marginBottom: euiTheme.size.l }}
       data-test-subj="case-callouts"
     >
-      <EuiFlexItem>{!isAtLeastPlatinum() ? <PlatinumLicenseCallout /> : null}</EuiFlexItem>
+      <EuiFlexItem>
+        <PlatinumLicenseCallout />
+      </EuiFlexItem>
     </EuiFlexGroup>
-  );
+  ) : null;
 };
 
 CaseCalloutsComponent.displayName = 'CaseCalloutsComponent';

x-pack/plugins/observability/public/components/shared/date_picker/index.tsx

@@ -16,6 +16,7 @@ export interface DatePickerProps {
   rangeTo?: string;
   refreshPaused?: boolean;
   refreshInterval?: number;
+  width?: 'auto' | 'restricted' | 'full';
   onTimeRangeRefresh?: (range: { start: string; end: string }) => void;
 }
 
@@ -24,6 +25,7 @@ export function DatePicker({
   rangeTo,
   refreshPaused,
   refreshInterval,
+  width = 'restricted',
   onTimeRangeRefresh,
 }: DatePickerProps) {
   const { updateTimeRange, updateRefreshInterval } = useDatePickerContext();
@@ -68,6 +70,7 @@ export function DatePicker({
       refreshInterval={refreshInterval}
       onRefreshChange={onRefreshChange}
       commonlyUsedRanges={commonlyUsedRanges}
+      width={width}
     />
   );
 }

x-pack/plugins/observability/public/pages/overview/containers/overview_page/overview_page.tsx

@@ -28,7 +28,7 @@ import { AlertConsumers } from '@kbn/rule-data-utils';
 import React, { useMemo, useRef, useCallback, useState, useEffect } from 'react';
 
 import { calculateBucketSize } from './helpers';
-import { PageHeaderProps } from './types';
+import { HeaderActionsProps } from './types';
 
 import { EmptySections } from '../../../../components/app/empty_sections';
 import { observabilityFeatureId } from '../../../../../common';
@@ -147,14 +147,17 @@ export function OverviewPage() {
     <ObservabilityPageTemplate
       isPageDataLoaded={isAllRequestsComplete}
       pageHeader={{
-        children: (
-          <PageHeader
+        pageTitle: i18n.translate('xpack.observability.overview.pageTitle', {
+          defaultMessage: 'Overview',
+        }),
+        rightSideItems: [
+          <HeaderActions
             showTour={isGuidedSetupTourVisible}
             onTourDismiss={hideGuidedSetupTour}
             handleGuidedSetupClick={handleGuidedSetupClick}
             onTimeRangeRefresh={onTimeRangeRefresh}
-          />
-        ),
+          />,
+        ],
       }}
     >
       <>
@@ -262,12 +265,12 @@ export function OverviewPage() {
   );
 }
 
-function PageHeader({
+function HeaderActions({
   showTour = false,
   onTourDismiss,
   handleGuidedSetupClick,
   onTimeRangeRefresh,
-}: PageHeaderProps) {
+}: HeaderActionsProps) {
   const { relativeStart, relativeEnd, refreshInterval, refreshPaused } = useDatePickerContext();
   const { endTour: endObservabilityTour, isTourVisible: isObservabilityTourVisible } =
     useObservabilityTourContext();
@@ -276,17 +279,13 @@ function PageHeader({
 
   return (
     <EuiFlexGroup wrap gutterSize="s" justifyContent="flexEnd">
-      <EuiFlexItem grow={1}>
-        <EuiTitle>
-          <h1 className="eui-textNoWrap">{overviewPageTitle}</h1>
-        </EuiTitle>
-      </EuiFlexItem>
       <EuiFlexItem grow={false}>
         <DatePicker
           rangeFrom={relativeStart}
           rangeTo={relativeEnd}
           refreshInterval={refreshInterval}
           refreshPaused={refreshPaused}
+          width="auto"
           onTimeRangeRefresh={onTimeRangeRefresh}
         />
       </EuiFlexItem>
@@ -345,7 +344,3 @@ function PageHeader({
     </EuiFlexGroup>
   );
 }
-
-const overviewPageTitle = i18n.translate('xpack.observability.overview.pageTitle', {
-  defaultMessage: 'Overview',
-});

x-pack/plugins/observability/public/pages/overview/containers/overview_page/types.ts

@@ -11,7 +11,7 @@ export interface Bucket {
 }
 export type BucketSize = { bucketSize: number; intervalString: string } | undefined;
 
-export interface PageHeaderProps {
+export interface HeaderActionsProps {
   showTour?: boolean;
   onTourDismiss: () => void;
   handleGuidedSetupClick: () => void;

x-pack/plugins/observability/public/pages/rule_details/components/page_title.tsx

@@ -23,14 +23,14 @@ export function PageTitle({ rule }: PageHeaderProps) {
         </EuiFlexItem>
       </EuiFlexGroup>
       <EuiFlexItem grow={false}>
-        <EuiSpacer size="xs" />
+        <EuiSpacer size="m" />
         <EuiText size="xs">
           <EuiBadge color={getHealthColor(rule.executionStatus.status)}>
             {rule.executionStatus.status.charAt(0).toUpperCase() +
               rule.executionStatus.status.slice(1)}
           </EuiBadge>
         </EuiText>
-        <EuiSpacer size="s" />
+        <EuiSpacer size="m" />
       </EuiFlexItem>
       <EuiFlexGroup direction="column" alignItems="flexStart">
         <EuiFlexItem component="span" grow={false}>

x-pack/plugins/observability/public/pages/rule_details/index.tsx

@@ -288,7 +288,7 @@ export function RuleDetailsPage() {
         bottomBorder: false,
         rightSideItems: hasEditButton
           ? [
-              <EuiFlexGroup direction="rowReverse" alignItems="center">
+              <EuiFlexGroup direction="rowReverse" alignItems="flexStart">
                 <EuiFlexItem>
                   <EuiPopover
                     id="contextRuleEditMenu"

x-pack/plugins/observability/public/pages/rules/index.test.tsx

@@ -129,9 +129,11 @@ describe('RulesPage with all capabilities', () => {
     );
   });
 
-  it('renders create rule button', async () => {
+  it('renders a create rule button that is not disabled', async () => {
     await setup();
-    expect(wrapper.find('[data-test-subj="createRuleButton"]').exists()).toBeTruthy();
+    expect(wrapper.find('[data-test-subj="createRuleButton"]').hostNodes().prop('disabled')).toBe(
+      false
+    );
   });
 });
 
@@ -179,8 +181,11 @@ describe('RulesPage with show only capability', () => {
     wrapper = mountWithIntl(<RulesPage />);
   }
 
-  it('does not render create rule button', async () => {
+  it('renders a create rule button that is disabled', async () => {
     await setup();
-    expect(wrapper.find('[data-test-subj="createRuleButton"]').exists()).toBeFalsy();
+
+    expect(wrapper.find('[data-test-subj="createRuleButton"]').hostNodes().prop('disabled')).toBe(
+      true
+    );
   });
 });

x-pack/plugins/observability/public/pages/rules/index.tsx

@@ -117,20 +117,19 @@ function RulesPage() {
       pageHeader={{
         pageTitle: <>{RULES_PAGE_TITLE}</>,
         rightSideItems: [
-          authorizedToCreateAnyRules && (
-            <EuiButton
-              iconType="plusInCircle"
-              key="create-alert"
-              data-test-subj="createRuleButton"
-              fill
-              onClick={() => setCreateRuleFlyoutVisibility(true)}
-            >
-              <FormattedMessage
-                id="xpack.observability.rules.addRuleButtonLabel"
-                defaultMessage="Create rule"
-              />
-            </EuiButton>
-          ),
+          <EuiButton
+            fill
+            iconType="plusInCircle"
+            key="create-alert"
+            data-test-subj="createRuleButton"
+            disabled={!authorizedToCreateAnyRules}
+            onClick={() => setCreateRuleFlyoutVisibility(true)}
+          >
+            <FormattedMessage
+              id="xpack.observability.rules.addRuleButtonLabel"
+              defaultMessage="Create rule"
+            />
+          </EuiButton>,
           <EuiButtonEmpty
             href={documentationLink}
             target="_blank"