move banner under details

Author: Assem-Uber

…s__/schedule-page-paused-banner.test.tsx …/schedule-details-paused-banner.test.tsxsrc/views/schedule-page/schedule-page-paused-banner/__tests__/schedule-page-paused-banner.test.tsx renamed to src/views/schedule-details/schedule-details-paused-banner/__tests__/schedule-details-paused-banner.test.tsx src/views/schedule-page/schedule-page-paused-banner/__tests__/schedule-page-paused-banner.test.tsx renamed to src/views/schedule-details/schedule-details-paused-banner/__tests__/schedule-details-paused-banner.test.tsx

@@ -10,11 +10,12 @@ import {
 } from '@/route-handlers/describe-schedule/__fixtures__/mock-describe-schedule-response';
 import { type DescribeScheduleResponse } from '@/views/shared/hooks/use-describe-schedule/use-describe-schedule.types';
 
-import formatPausedAtTimestamp from '../helpers/format-paused-at-timestamp';
-import SchedulePagePausedBanner from '../schedule-page-paused-banner';
+import { formatScheduleTimestamp } from '../../helpers/format-schedule-timestamp';
 
-describe(SchedulePagePausedBanner.name, () => {
-  it('shows paused banner with mailto link when schedule is paused', async () => {
+import ScheduleDetailsPausedBanner from '../schedule-details-paused-banner';
+
+describe(ScheduleDetailsPausedBanner.name, () => {
+  it('shows paused banner when schedule is paused', async () => {
     const pausedAt = { seconds: '1704112496', nanos: 0 };
     const response = getMockPausedDescribeScheduleResponse({
       state: {
@@ -32,13 +33,10 @@ describe(SchedulePagePausedBanner.name, () => {
     expect(await screen.findByText(/Schedule was paused/)).toBeInTheDocument();
     expect(
       screen.getByText((content) =>
-        content.includes(formatPausedAtTimestamp(pausedAt)!)
+        content.includes(formatScheduleTimestamp(pausedAt)!)
       )
     ).toBeInTheDocument();
-    expect(screen.getByRole('link', { name: 'operator@example.com' })).toHaveAttribute(
-      'href',
-      'mailto:operator@example.com'
-    );
+    expect(screen.getByText(/operator@example.com/)).toBeInTheDocument();
     expect(document.body.textContent).toMatch(/Reason: "Paused for maintenance"/);
   });
 
@@ -77,7 +75,7 @@ function setup({
 }) {
   return render(
     <Suspense fallback={null}>
-      <SchedulePagePausedBanner
+      <ScheduleDetailsPausedBanner
         domain="test-domain"
         cluster="test-cluster"
         scheduleId="test-schedule"

src/views/schedule-details/schedule-details-paused-banner/schedule-details-paused-banner.styles.ts

@@ -0,0 +1,33 @@
+import { styled as createStyled, type Theme } from 'baseui';
+import type { BannerOverrides } from 'baseui/banner';
+import { type StyleObject } from 'styletron-react';
+
+export const PAUSED_BANNER_ICON_SIZE = 20;
+
+export const styled = {
+  ValueText: createStyled(
+    'span',
+    ({ $theme }: { $theme: Theme }): StyleObject => ({
+      fontWeight: $theme.typography.LabelSmall.fontWeight,
+    })
+  ),
+};
+
+export const overrides = {
+  banner: {
+    Root: {
+      style: ({ $theme }: { $theme: Theme }): StyleObject => ({
+        marginLeft: 0,
+        marginRight: 0,
+        marginTop: 0,
+        marginBottom: $theme.sizing.scale500,
+      }),
+    },
+    Message: {
+      style: ({ $theme }: { $theme: Theme }): StyleObject => ({
+        ...$theme.typography.LabelSmall,
+        fontWeight: 'normal',
+      }),
+    },
+  } satisfies BannerOverrides,
+};

src/views/schedule-details/schedule-details-paused-banner/schedule-details-paused-banner.tsx

@@ -0,0 +1,85 @@
+'use client';
+import React, { useMemo } from 'react';
+
+import { Banner, HIERARCHY, KIND } from 'baseui/banner';
+import { MdInfoOutline } from 'react-icons/md';
+
+import PageSection from '@/components/page-section/page-section';
+import useDescribeSchedule from '@/views/shared/hooks/use-describe-schedule/use-describe-schedule';
+
+import { formatScheduleTimestamp } from '../helpers/format-schedule-timestamp';
+
+import {
+  overrides,
+  PAUSED_BANNER_ICON_SIZE,
+  styled,
+} from './schedule-details-paused-banner.styles';
+import { type Props } from './schedule-details-paused-banner.types';
+
+export default function ScheduleDetailsPausedBanner(props: Props) {
+  const {
+    data: scheduleDetails,
+    isLoading,
+    isError,
+  } = useDescribeSchedule(props);
+
+  const isPaused =
+    !isLoading && !isError && Boolean(scheduleDetails?.state?.paused);
+  const pauseInfo = scheduleDetails?.state?.pauseInfo;
+
+  const message = useMemo(() => {
+    if (!isPaused) {
+      return null;
+    }
+
+    const pausedAt = formatScheduleTimestamp(pauseInfo?.pausedAt);
+    const pausedBy = pauseInfo?.pausedBy?.trim() || null;
+    const reason = pauseInfo?.reason?.trim() || null;
+
+    return (
+      <>
+        Schedule was paused
+        {pausedAt ? (
+          <>
+            {' '}
+            <styled.ValueText>{pausedAt}</styled.ValueText>
+          </>
+        ) : null}
+        {pausedBy ? (
+          <>
+            {' by '}
+            <styled.ValueText>{pausedBy}</styled.ValueText>
+          </>
+        ) : null}
+        {reason ? (
+          <>
+            {'. Reason: "'}
+            <styled.ValueText>{reason}</styled.ValueText>
+            {'"'}
+          </>
+        ) : null}
+      </>
+    );
+  }, [isPaused, pauseInfo]);
+
+  if (!isPaused) {
+    return null;
+  }
+
+  return (
+    <PageSection>
+      <Banner
+        hierarchy={HIERARCHY.low}
+        kind={KIND.warning}
+        artwork={{
+          icon: () => (
+            <MdInfoOutline size={PAUSED_BANNER_ICON_SIZE} aria-hidden />
+          ),
+        }}
+        overrides={overrides.banner}
+      >
+        {message}
+      </Banner>
+    </PageSection>
+  );
+}

src/views/schedule-details/schedule-details-paused-banner/schedule-details-paused-banner.types.ts

@@ -0,0 +1,6 @@
+import { type SchedulePageTabsParams } from '@/views/schedule-page/schedule-page-tabs/schedule-page-tabs.types';
+
+export type Props = Pick<
+  SchedulePageTabsParams,
+  'domain' | 'cluster' | 'scheduleId'
+>;

src/views/schedule-details/schedule-details.styles.ts

@@ -4,6 +4,6 @@ export const styled = {
   DetailsSectionsContainer: createStyled('div', ({ $theme }) => ({
     display: 'flex',
     flexDirection: 'column',
-    gap: $theme.sizing.scale900,
+    gap: $theme.sizing.scale950,
   })),
 };

src/views/schedule-details/schedule-details.tsx

@@ -7,6 +7,7 @@ import useDescribeSchedule from '@/views/shared/hooks/use-describe-schedule/use-
 
 import scheduleDetailsSectionsConfig from './config/schedule-details-sections.config';
 import { getRowsFromConfig } from './helpers/get-rows-from-config';
+import ScheduleDetailsPausedBanner from './schedule-details-paused-banner/schedule-details-paused-banner';
 import ScheduleDetailsSection from './schedule-details-section/schedule-details-section';
 import { styled } from './schedule-details.styles';
 import { type Props } from './schedule-details.types';
@@ -20,7 +21,16 @@ export default function ScheduleDetails({ params }: Props) {
   });
 
   if (isLoading || isPending) {
-    return <SectionLoadingIndicator />;
+    return (
+      <>
+        <ScheduleDetailsPausedBanner
+          domain={params.domain}
+          cluster={params.cluster}
+          scheduleId={params.scheduleId}
+        />
+        <SectionLoadingIndicator />
+      </>
+    );
   }
 
   // Should never happen as we have throwOnError set to true but it is for better type safety below
@@ -29,27 +39,34 @@ export default function ScheduleDetails({ params }: Props) {
   }
 
   return (
-    <PageSection>
-      <styled.DetailsSectionsContainer>
-        {scheduleDetailsSectionsConfig.map((section) => {
-          const rows = getRowsFromConfig(
-            section.rowsConfig,
-            data,
-            params.scheduleId
-          );
-          if (!rows.length) {
-            return null;
-          }
+    <>
+      <ScheduleDetailsPausedBanner
+        domain={params.domain}
+        cluster={params.cluster}
+        scheduleId={params.scheduleId}
+      />
+      <PageSection>
+        <styled.DetailsSectionsContainer>
+          {scheduleDetailsSectionsConfig.map((section) => {
+            const rows = getRowsFromConfig(
+              section.rowsConfig,
+              data,
+              params.scheduleId
+            );
+            if (!rows.length) {
+              return null;
+            }
 
-          return (
-            <ScheduleDetailsSection
-              key={section.key}
-              title={section.title}
-              rows={rows}
-            />
-          );
-        })}
-      </styled.DetailsSectionsContainer>
-    </PageSection>
+            return (
+              <ScheduleDetailsSection
+                key={section.key}
+                title={section.title}
+                rows={rows}
+              />
+            );
+          })}
+        </styled.DetailsSectionsContainer>
+      </PageSection>
+    </>
   );
 }