Show correct swap request dates (#4456)

# What this PR does Part of #4428 Additionally it fixes - NPE within `SchedulePersonal` - changes the line-break to use `contrastText` instead of `main` (from grafana theme)
grafana · Jun 4, 2024 · 038d78d · 038d78d
1 parent 0acb66b
commit 038d78d
Show file tree

Hide file tree

Showing 3 changed files with 32 additions and 15 deletions.
diff --git a/grafana-plugin/src/containers/Rotations/SchedulePersonal.tsx b/grafana-plugin/src/containers/Rotations/SchedulePersonal.tsx
@@ -2,12 +2,13 @@ import React, { FC, useEffect } from 'react';
 
 import { cx } from '@emotion/css';
 import { GrafanaTheme2 } from '@grafana/data';
-import { Badge, Button, HorizontalGroup, Icon, useStyles2, withTheme2 } from '@grafana/ui';
+import { Badge, BadgeColor, Button, HorizontalGroup, Icon, useStyles2, withTheme2 } from '@grafana/ui';
 import { observer } from 'mobx-react';
 import { RouteComponentProps, withRouter } from 'react-router-dom';
 import { CSSTransition, TransitionGroup } from 'react-transition-group';
 
 import { Avatar } from 'components/Avatar/Avatar';
+import { RenderConditionally } from 'components/RenderConditionally/RenderConditionally';
 import { Text } from 'components/Text/Text';
 import { Rotation } from 'containers/Rotation/Rotation';
 import { TimelineMarks } from 'containers/TimelineMarks/TimelineMarks';
@@ -102,14 +103,18 @@ const _SchedulePersonal: FC<SchedulePersonalProps> = observer(({ userPk, onSlotC
       <div className={styles.header}>
         <HorizontalGroup justify="space-between">
           <HorizontalGroup>
-            <Text type="secondary">
-              On-call schedule <Avatar src={storeUser.avatar} size="small" /> {storeUser.username}
-            </Text>
+            <RenderConditionally
+              shouldRender={Boolean(storeUser)}
+              render={() => (
+                <Text type="secondary">
+                  On-call schedule <Avatar src={storeUser.avatar} size="small" /> {storeUser.username}
+                </Text>
+              )}
+            />
             {isOncall ? (
               <Badge text="On-call now" color="green" />
             ) : (
-              /*  @ts-ignore */
-              <Badge text="Not on-call now" color="gray" />
+              <Badge text="Not on-call now" color={'gray' as BadgeColor} />
             )}
           </HorizontalGroup>
           <HorizontalGroup>

diff --git a/grafana-plugin/src/pages/schedule/Schedule.tsx b/grafana-plugin/src/pages/schedule/Schedule.tsx
@@ -598,23 +598,35 @@ class _SchedulePage extends React.Component<SchedulePageProps, SchedulePageState
     history.replace(`${PLUGIN_ROOT}/schedules`);
   };
 
-  handleShowShiftSwapForm = (id: ShiftSwap['id'] | 'new') => {
+  handleShowShiftSwapForm = (id: ShiftSwap['id'] | 'new', swap?: { swap_start: string; swap_end: string }) => {
+    const { filters } = this.state;
     const {
       store,
+      store: {
+        userStore: { currentUserPk },
+        timezoneStore: { currentDateInSelectedTimezone },
+      },
       match: {
         params: { id: scheduleId },
       },
     } = this.props;
 
-    const {
-      userStore: { currentUserPk },
-      timezoneStore: { currentDateInSelectedTimezone },
-    } = store;
-
-    const layers = getLayersFromStore(store, scheduleId, store.timezoneStore.calendarStartDate);
+    if (swap) {
+      if (!filters.users.includes(currentUserPk)) {
+        this.setState({ filters: { ...filters, users: [...this.state.filters.users, currentUserPk] } });
+        this.highlightMyShiftsWasToggled = true;
+      }
 
-    const { filters } = this.state;
+      return this.setState({
+        shiftSwapIdToShowForm: id,
+        shiftSwapParamsToShowForm: {
+          swap_start: swap.swap_start,
+          swap_end: swap.swap_end,
+        },
+      });
+    }
 
+    const layers = getLayersFromStore(store, scheduleId, store.timezoneStore.calendarStartDate);
     const closestEvent = findClosestUserEvent(dayjs(), currentUserPk, layers);
     const swapStart = closestEvent
       ? dayjs(closestEvent.start)

diff --git a/grafana-plugin/src/styles/utils.styles.ts b/grafana-plugin/src/styles/utils.styles.ts
@@ -19,7 +19,7 @@ export const getUtilStyles = (theme: GrafanaTheme2) => {
 
     thinLineBreak: css`
       width: 100%;
-      border-top: 1px solid ${theme.colors.secondary.main};
+      border-top: 1px solid ${theme.colors.secondary.contrastText};
       margin-top: 8px;
       opacity: 15%;
     `,