From 732d5b6076d60ac71e913589950a0bec73edc2b9 Mon Sep 17 00:00:00 2001
From: Maxim Mordasov <maxim.mordasov@grafana.com>
Date: Tue, 7 May 2024 10:27:10 +0100
Subject: [PATCH 01/28] remove schedule tutorial code

---
 .../containers/Rotation/Rotation.module.css   |  17 ---
 .../src/containers/Rotation/Rotation.tsx      |   7 +-
 .../containers/Rotation/RotationTutorial.tsx  | 117 ------------------
 .../src/containers/Rotations/Rotations.tsx    |   1 -
 .../src/models/schedule/schedule.ts           |   9 --
 .../src/models/schedule/schedule.types.ts     |   9 --
 6 files changed, 1 insertion(+), 159 deletions(-)
 delete mode 100644 grafana-plugin/src/containers/Rotation/RotationTutorial.tsx

diff --git a/grafana-plugin/src/containers/Rotation/Rotation.module.css b/grafana-plugin/src/containers/Rotation/Rotation.module.css
index 87cb524c0d..ca7a578a0b 100644
--- a/grafana-plugin/src/containers/Rotation/Rotation.module.css
+++ b/grafana-plugin/src/containers/Rotation/Rotation.module.css
@@ -64,11 +64,6 @@
   margin: 0 2px;
 }
 
-.slots--tutorial {
-  position: absolute;
-  background: rgba(61, 113, 217, 0.15);
-}
-
 .pointer {
   position: absolute;
   top: -9px;
@@ -82,15 +77,3 @@
   transform: scale(1);
   opacity: 1;
 }
-
-.tutorial-slot {
-  width: 175px;
-  height: 28px;
-  border-radius: 2px;
-  margin: 0 1px;
-  padding: 4px;
-}
-
-.tutorial-slot--active {
-  box-shadow: var(--shadows-z3);
-}
diff --git a/grafana-plugin/src/containers/Rotation/Rotation.tsx b/grafana-plugin/src/containers/Rotation/Rotation.tsx
index f75e738a06..380319598b 100644
--- a/grafana-plugin/src/containers/Rotation/Rotation.tsx
+++ b/grafana-plugin/src/containers/Rotation/Rotation.tsx
@@ -9,11 +9,9 @@ import hash from 'object-hash';
 import { ScheduleFiltersType } from 'components/ScheduleFilters/ScheduleFilters.types';
 import { Text } from 'components/Text/Text';
 import { ScheduleSlot } from 'containers/ScheduleSlot/ScheduleSlot';
-import { Event, RotationFormLiveParams, ShiftSwap } from 'models/schedule/schedule.types';
+import { Event, ShiftSwap } from 'models/schedule/schedule.types';
 import { useStore } from 'state/useStore';
 
-import { RotationTutorial } from './RotationTutorial';
-
 import styles from './Rotation.module.css';
 
 const cx = cn.bind(styles);
@@ -30,7 +28,6 @@ interface RotationProps {
   onShiftSwapClick?: (swapId: ShiftSwap['id']) => void;
   days?: number;
   transparent?: boolean;
-  tutorialParams?: RotationFormLiveParams;
   simplified?: boolean;
   filters?: ScheduleFiltersType;
   getColor?: (event: Event) => string;
@@ -48,7 +45,6 @@ export const Rotation: FC<RotationProps> = observer((props) => {
     color: propsColor,
     days = 7,
     transparent = false,
-    tutorialParams,
     onClick,
     handleAddOverride,
     handleAddShiftSwap,
@@ -145,7 +141,6 @@ export const Rotation: FC<RotationProps> = observer((props) => {
   return (
     <div className={cx('root')} onClick={onClick && handleRotationClick}>
       <div className={cx('timeline')}>
-        {tutorialParams && <RotationTutorial {...tutorialParams} />}
         {events ? (
           events.length ? (
             <div
diff --git a/grafana-plugin/src/containers/Rotation/RotationTutorial.tsx b/grafana-plugin/src/containers/Rotation/RotationTutorial.tsx
deleted file mode 100644
index b379aed2e9..0000000000
--- a/grafana-plugin/src/containers/Rotation/RotationTutorial.tsx
+++ /dev/null
@@ -1,117 +0,0 @@
-import React, { FC, useMemo } from 'react';
-
-import cn from 'classnames/bind';
-import dayjs from 'dayjs';
-import { observer } from 'mobx-react';
-
-import { RotationFormLiveParams } from 'models/schedule/schedule.types';
-import { useStore } from 'state/useStore';
-
-import styles from './Rotation.module.css';
-
-const cx = cn.bind(styles);
-
-interface RotationProps extends RotationFormLiveParams {
-  days?: number;
-}
-
-export const RotationTutorial: FC<RotationProps> = observer((props) => {
-  const {
-    timezoneStore: { calendarStartDate },
-  } = useStore();
-  const { days = 7, shiftStart, shiftEnd, rotationStart, focusElementName } = props;
-
-  const duration = shiftEnd.diff(shiftStart, 'seconds');
-
-  const events = useMemo(() => {
-    return [
-      {
-        start: dayjs(shiftStart),
-        end: dayjs(shiftStart).add(duration, 'seconds'),
-      },
-    ];
-  }, [shiftStart, duration]);
-
-  const base = 60 * 60 * 24 * days;
-
-  const pointerX = useMemo(() => {
-    if (focusElementName === undefined) {
-      return undefined;
-    }
-
-    const moment = props[focusElementName];
-    const firstEvent = events[0];
-    const diff = dayjs(moment).diff(firstEvent.start, 'seconds');
-
-    return diff / base;
-  }, [focusElementName, events, rotationStart]);
-
-  const x = useMemo(() => {
-    if (!events || !events.length) {
-      return 0;
-    }
-
-    const firstEvent = events[0];
-    const firstShiftOffset = dayjs(firstEvent.start).diff(calendarStartDate, 'seconds');
-    const base = 60 * 60 * 24 * days;
-
-    return firstShiftOffset / base;
-  }, [events, calendarStartDate]);
-
-  return (
-    <div className={cx('slots', 'slots--tutorial')} style={{ transform: `translate(${x * 100}%, 0)` }}>
-      <Pointer
-        className={cx('pointer', { 'pointer--active': pointerX !== undefined })}
-        style={{ left: `calc(${pointerX * 100}% - 5px)` }}
-      />
-      {events.map((event, index) => {
-        const duration = event.end.diff(event.start, 'seconds');
-        const width = duration / base;
-        return (
-          <TutorialSlot
-            active={focusElementName === 'shiftStart' || focusElementName === 'shiftEnd'}
-            style={{ width: `${width * 100}%` }}
-            key={index}
-          />
-        );
-      })}
-    </div>
-  );
-});
-
-const TutorialSlot = (props: { style: React.CSSProperties; active: boolean }) => {
-  const { style, active } = props;
-
-  return <div className={cx('tutorial-slot', { 'tutorial-slot--active': active })} style={style} />;
-};
-
-const Pointer = (props: { className: string; style: React.CSSProperties }) => {
-  const { className, style } = props;
-
-  return (
-    <svg
-      className={className}
-      style={style}
-      width="9"
-      height="9"
-      viewBox="0 0 9 9"
-      fill="none"
-      xmlns="http://www.w3.org/2000/svg"
-    >
-      <path d="M4.5 9L0.602887 2.25L8.39711 2.25L4.5 9Z" fill="url(#paint0_linear_2230_44915)" />
-      <defs>
-        <linearGradient
-          id="paint0_linear_2230_44915"
-          x1="4.5"
-          y1="6.65625"
-          x2="4.5"
-          y2="-2.33215e-07"
-          gradientUnits="userSpaceOnUse"
-        >
-          <stop stopColor="#F55F3E" />
-          <stop offset="1" stopColor="#FF8833" />
-        </linearGradient>
-      </defs>
-    </svg>
-  );
-};
diff --git a/grafana-plugin/src/containers/Rotations/Rotations.tsx b/grafana-plugin/src/containers/Rotations/Rotations.tsx
index bb91f081d0..2e26cb3e21 100644
--- a/grafana-plugin/src/containers/Rotations/Rotations.tsx
+++ b/grafana-plugin/src/containers/Rotations/Rotations.tsx
@@ -180,7 +180,6 @@ class _Rotations extends Component<RotationsProps, RotationsState> {
                                 layerIndex={layerIndex}
                                 rotationIndex={rotationIndex}
                                 transparent={isPreview}
-                                tutorialParams={isPreview && store.scheduleStore.rotationFormLiveParams}
                                 filters={filters}
                                 onSlotClick={onSlotClick}
                               />
diff --git a/grafana-plugin/src/models/schedule/schedule.ts b/grafana-plugin/src/models/schedule/schedule.ts
index ded9afaa47..f455ad99f6 100644
--- a/grafana-plugin/src/models/schedule/schedule.ts
+++ b/grafana-plugin/src/models/schedule/schedule.ts
@@ -34,7 +34,6 @@ import {
   Event,
   Layer,
   ShiftEvents,
-  RotationFormLiveParams,
   ScheduleScoreQualityResponse,
   ShiftSwap,
 } from './schedule.types';
@@ -108,9 +107,6 @@ export class ScheduleStore extends BaseStore {
   @observable
   overridePreview?: { [fromString: string]: ShiftEvents[] };
 
-  @observable
-  rotationFormLiveParams: RotationFormLiveParams = undefined;
-
   @observable
   scheduleToScheduleEvents: {
     [id: string]: ScheduleEvent[];
@@ -277,10 +273,6 @@ export class ScheduleStore extends BaseStore {
     return response;
   }
 
-  setRotationFormLiveParams(params: RotationFormLiveParams) {
-    this.rotationFormLiveParams = params;
-  }
-
   async updateRotationPreview(
     scheduleId: Schedule['id'],
     shiftId: Shift['id'] | 'new',
@@ -356,7 +348,6 @@ export class ScheduleStore extends BaseStore {
     this.rotationPreview = undefined;
     this.overridePreview = undefined;
     this.shiftSwapsPreview = undefined;
-    this.rotationFormLiveParams = undefined;
   }
 
   @action.bound
diff --git a/grafana-plugin/src/models/schedule/schedule.types.ts b/grafana-plugin/src/models/schedule/schedule.types.ts
index 902d7c1ed7..1a7e8eb11d 100644
--- a/grafana-plugin/src/models/schedule/schedule.types.ts
+++ b/grafana-plugin/src/models/schedule/schedule.types.ts
@@ -1,5 +1,3 @@
-import dayjs from 'dayjs';
-
 import { GrafanaTeam } from 'models/grafana_team/grafana_team.types';
 import { SlackChannel } from 'models/slack_channel/slack_channel.types';
 import { UserGroup } from 'models/user_group/user_group.types';
@@ -11,13 +9,6 @@ export enum ScheduleType {
   'API',
 }
 
-export interface RotationFormLiveParams {
-  rotationStart: dayjs.Dayjs;
-  shiftStart: dayjs.Dayjs;
-  shiftEnd: dayjs.Dayjs;
-  focusElementName: string;
-}
-
 export interface Schedule {
   id: string;
   ical_url_primary: string;

From 03945591ac6489bf87f5e0e48fc59dadb7d493c4 Mon Sep 17 00:00:00 2001
From: Maxim Mordasov <maxim.mordasov@grafana.com>
Date: Tue, 7 May 2024 13:53:12 +0100
Subject: [PATCH 02/28] update layers visualization

---
 .../containers/RotationForm/RotationForm.tsx  |  2 +-
 .../containers/Rotations/Rotations.module.css | 24 +++++++++++--------
 .../src/containers/Rotations/Rotations.tsx    | 21 ++++++++--------
 .../containers/Rotations/ScheduleFinal.tsx    |  2 +-
 .../Rotations/ScheduleOverrides.tsx           | 11 +++++++--
 .../TimelineMarks/TimelineMarks.tsx           |  8 +++----
 .../src/pages/schedule/Schedule.module.css    |  7 ++++++
 7 files changed, 45 insertions(+), 30 deletions(-)

diff --git a/grafana-plugin/src/containers/RotationForm/RotationForm.tsx b/grafana-plugin/src/containers/RotationForm/RotationForm.tsx
index e45fc18698..c9f9b9ae5b 100644
--- a/grafana-plugin/src/containers/RotationForm/RotationForm.tsx
+++ b/grafana-plugin/src/containers/RotationForm/RotationForm.tsx
@@ -766,7 +766,7 @@ export const RotationForm = observer((props: RotationFormProps) => {
   );
 
   function onResize() {
-    onHide();
+    //onHide();
   }
 
   function onDraggableInit(_e: DraggableEvent, data: DraggableData) {
diff --git a/grafana-plugin/src/containers/Rotations/Rotations.module.css b/grafana-plugin/src/containers/Rotations/Rotations.module.css
index b764648cd3..7bb3634220 100644
--- a/grafana-plugin/src/containers/Rotations/Rotations.module.css
+++ b/grafana-plugin/src/containers/Rotations/Rotations.module.css
@@ -24,8 +24,17 @@
   margin: 16px 0;
 }
 
+.layers {
+  position: relative;
+}
+
 .layer {
   display: block;
+  margin: 10px 0;
+}
+
+.layer-first {
+  margin-top: 30px;
 }
 
 .rotations {
@@ -33,15 +42,12 @@
 }
 
 .layer-title {
-  text-align: center;
-  font-weight: 500;
-  line-height: 16px;
-  padding: 8px;
-  background: var(--secondary-background);
+  margin-left: 10px;
+  margin-bottom: 10px;
 }
 
-.layer-title:hover {
-  background: rgba(204, 204, 220, 0.12);
+.layer-title_first {
+  margin-top: 40px;
 }
 
 .rotations-plus-title {
@@ -51,8 +57,6 @@
 
 .header-plus-content {
   position: relative;
-  padding-top: 26px;
-  padding-bottom: 26px;
 }
 
 .layer-header {
@@ -76,7 +80,7 @@
   font-weight: 400;
   font-size: 12px;
   line-height: 16px;
-  text-align: center;
+  text-align: left;
   padding: 12px;
   cursor: pointer;
 }
diff --git a/grafana-plugin/src/containers/Rotations/Rotations.tsx b/grafana-plugin/src/containers/Rotations/Rotations.tsx
index 2e26cb3e21..756977c3db 100644
--- a/grafana-plugin/src/containers/Rotations/Rotations.tsx
+++ b/grafana-plugin/src/containers/Rotations/Rotations.tsx
@@ -8,6 +8,7 @@ import { observer } from 'mobx-react';
 import { CSSTransition, TransitionGroup } from 'react-transition-group';
 
 import { ScheduleFiltersType } from 'components/ScheduleFilters/ScheduleFilters.types';
+import { Tag } from 'components/Tag/Tag';
 import { Text } from 'components/Text/Text';
 import { Rotation } from 'containers/Rotation/Rotation';
 import { RotationForm } from 'containers/RotationForm/RotationForm';
@@ -148,19 +149,17 @@ class _Rotations extends Component<RotationsProps, RotationsState> {
           <div className={cx('rotations-plus-title')}>
             {layers && layers.length ? (
               <TransitionGroup className={cx('layers')}>
+                <TimelineMarks />
+                {!currentTimeHidden && (
+                  <div className={cx('current-time')} style={{ left: `${currentTimeX * 100}%` }} />
+                )}
                 {layers.map((layer, layerIndex) => (
                   <CSSTransition key={layerIndex} timeout={DEFAULT_TRANSITION_TIMEOUT} classNames={{ ...styles }}>
-                    <div id={`layer${layer.priority}`} className={cx('layer')}>
-                      <div className={cx('layer-title')}>
-                        <HorizontalGroup spacing="sm" justify="center">
-                          <Text type="secondary">Layer {layer.priority}</Text>
-                        </HorizontalGroup>
-                      </div>
+                    <div id={`layer${layer.priority}`} className={cx('layer', { ['layer-first']: layerIndex === 0 })}>
+                      <Tag className={cx('layer-title')} color="secondary">
+                        <Text type="secondary"> Layer {layer.priority}</Text>
+                      </Tag>
                       <div className={cx('header-plus-content')}>
-                        <TimelineMarks />
-                        {!currentTimeHidden && (
-                          <div className={cx('current-time')} style={{ left: `${currentTimeX * 100}%` }} />
-                        )}
                         <TransitionGroup className={cx('rotations')}>
                           {layer.shifts.map(({ shiftId, isPreview, events }, rotationIndex) => (
                             <CSSTransition
@@ -226,7 +225,7 @@ class _Rotations extends Component<RotationsProps, RotationsState> {
                   this.handleAddLayer(nextPriority, store.timezoneStore.calendarStartDate);
                 }}
               >
-                <Text type={disabled ? 'disabled' : 'primary'}>+ Add new layer with rotation</Text>
+                <Text type={disabled ? 'disabled' : 'link'}>+ Add new layer with rotation</Text>
               </div>
             )}
           </div>
diff --git a/grafana-plugin/src/containers/Rotations/ScheduleFinal.tsx b/grafana-plugin/src/containers/Rotations/ScheduleFinal.tsx
index 51837b6f8d..9f436c7f25 100644
--- a/grafana-plugin/src/containers/Rotations/ScheduleFinal.tsx
+++ b/grafana-plugin/src/containers/Rotations/ScheduleFinal.tsx
@@ -82,7 +82,7 @@ const _ScheduleFinal: FC<ScheduleFinalProps> = observer(
         <div className={cx('header-plus-content')}>
           {!currentTimeHidden && <div className={cx('current-time')} style={{ left: `${currentTimeX * 100}%` }} />}
           <TimelineMarks />
-          <TransitionGroup className={cx('rotations')}>
+          <TransitionGroup className={cx('rotations', 'layer', 'layer-first')}>
             {shifts && shifts.length ? (
               shifts.map(({ events }, index) => {
                 return (
diff --git a/grafana-plugin/src/containers/Rotations/ScheduleOverrides.tsx b/grafana-plugin/src/containers/Rotations/ScheduleOverrides.tsx
index f4e81887af..a8726d59b2 100644
--- a/grafana-plugin/src/containers/Rotations/ScheduleOverrides.tsx
+++ b/grafana-plugin/src/containers/Rotations/ScheduleOverrides.tsx
@@ -7,6 +7,7 @@ import { observer } from 'mobx-react';
 import { CSSTransition, TransitionGroup } from 'react-transition-group';
 
 import { ScheduleFiltersType } from 'components/ScheduleFilters/ScheduleFilters.types';
+import { Tag } from 'components/Tag/Tag';
 import { Text } from 'components/Text/Text';
 import { Rotation } from 'containers/Rotation/Rotation';
 import { ScheduleOverrideForm } from 'containers/RotationForm/ScheduleOverrideForm';
@@ -150,7 +151,10 @@ class _ScheduleOverrides extends Component<ScheduleOverridesProps, ScheduleOverr
           <div className={cx('header-plus-content')}>
             {!currentTimeHidden && <div className={cx('current-time')} style={{ left: `${currentTimeX * 100}%` }} />}
             <TimelineMarks />
-            <TransitionGroup className={cx('rotations')}>
+            <TransitionGroup className={cx('rotations', 'layer', 'layer-first')}>
+              <Tag className={cx('layer-title')} color="secondary">
+                <Text type="secondary">Swaps</Text>
+              </Tag>
               {shiftSwaps && shiftSwaps.length
                 ? shiftSwaps.map(({ isPreview, events }, index) => (
                     <CSSTransition key={index} timeout={DEFAULT_TRANSITION_TIMEOUT} classNames={{ ...styles }}>
@@ -170,7 +174,10 @@ class _ScheduleOverrides extends Component<ScheduleOverridesProps, ScheduleOverr
                   ))
                 : null}
             </TransitionGroup>
-            <TransitionGroup className={cx('rotations')}>
+            <TransitionGroup className={cx('rotations', 'layer')}>
+              <Tag className={cx('layer-title')} color="secondary">
+                <Text type="secondary">Overrides</Text>
+              </Tag>
               {shifts && shifts.length ? (
                 shifts.map(({ shiftId, isPreview, events }, index) => (
                   <CSSTransition key={index} timeout={DEFAULT_TRANSITION_TIMEOUT} classNames={{ ...styles }}>
diff --git a/grafana-plugin/src/containers/TimelineMarks/TimelineMarks.tsx b/grafana-plugin/src/containers/TimelineMarks/TimelineMarks.tsx
index 95d23fce44..d8e84eb2c1 100644
--- a/grafana-plugin/src/containers/TimelineMarks/TimelineMarks.tsx
+++ b/grafana-plugin/src/containers/TimelineMarks/TimelineMarks.tsx
@@ -73,11 +73,9 @@ export const TimelineMarks: FC<TimelineMarksProps> = observer((props) => {
         return (
           <div key={i} className={cx('weekday' /* , { 'weekday--weekend': isWeekend } */)}>
             <div className={cx('weekday-title')}>
-              <Text type="secondary" strong={isCurrentDay}>
-                {m.moment.format('ddd D MMM')}
-              </Text>
+              <Text type={isCurrentDay ? 'primary' : 'secondary'}>{m.moment.format('ddd D MMM')}</Text>
             </div>
-            <div className={cx('weekday-times')}>
+            {/* <div className={cx('weekday-times')}>
               {m.moments.map((mm, j) => (
                 <div key={j} className={cx('weekday-time')}>
                   <div
@@ -89,7 +87,7 @@ export const TimelineMarks: FC<TimelineMarksProps> = observer((props) => {
                   </div>
                 </div>
               ))}
-            </div>
+            </div> */}
           </div>
         );
       })}
diff --git a/grafana-plugin/src/pages/schedule/Schedule.module.css b/grafana-plugin/src/pages/schedule/Schedule.module.css
index 351819f45f..e6dc9f8bc5 100644
--- a/grafana-plugin/src/pages/schedule/Schedule.module.css
+++ b/grafana-plugin/src/pages/schedule/Schedule.module.css
@@ -28,6 +28,13 @@
 
 .controls {
   width: 100%;
+  position: sticky;
+  top: 10px;
+  z-index: 2;
+  padding: 10px;
+  background: var(--background-secondary);
+  border: var(--border-weak);
+  border-radius: var(--border-radius);
 }
 
 .rotations {

From ddeef32d043456a93a6a7ec632d4b2a7149c408b Mon Sep 17 00:00:00 2001
From: Maxim Mordasov <maxim.mordasov@grafana.com>
Date: Wed, 8 May 2024 15:50:11 +0100
Subject: [PATCH 03/28] add superbutton to the schedule page

---
 .../containers/RotationForm/RotationForm.tsx  |   6 +-
 .../RotationForm/ScheduleOverrideForm.tsx     |   4 +-
 .../containers/Rotations/Rotations.module.css |   4 -
 .../src/containers/Rotations/Rotations.tsx    |  49 ++++----
 .../Rotations/ScheduleOverrides.tsx           |  71 ++++-------
 .../src/pages/schedule/Schedule.tsx           | 118 ++++++++++++++++--
 6 files changed, 162 insertions(+), 90 deletions(-)

diff --git a/grafana-plugin/src/containers/RotationForm/RotationForm.tsx b/grafana-plugin/src/containers/RotationForm/RotationForm.tsx
index c9f9b9ae5b..94235e3f8e 100644
--- a/grafana-plugin/src/containers/RotationForm/RotationForm.tsx
+++ b/grafana-plugin/src/containers/RotationForm/RotationForm.tsx
@@ -108,7 +108,7 @@ export const RotationForm = observer((props: RotationFormProps) => {
 
   const [rotationName, setRotationName] = useState<string>(`[L${layerPriority}] Rotation`);
   const [isOpen, setIsOpen] = useState<boolean>(false);
-  const [offsetTop, setOffsetTop] = useState<number>(0);
+  const [offsetTop, setOffsetTop] = useState<number>(GRAFANA_HEADER_HEIGHT + 10);
 
   const [shiftStart, setShiftStart] = useState<dayjs.Dayjs>(propsShiftStart);
   const [shiftEnd, setShiftEnd] = useState<dayjs.Dayjs>(propsShiftEnd || shiftStart.add(1, 'day'));
@@ -198,7 +198,9 @@ export const RotationForm = observer((props: RotationFormProps) => {
     } catch (err) {
       onError(err);
     } finally {
-      setIsOpen(true);
+      setTimeout(() => {
+        setIsOpen(true);
+      }, 1000);
     }
   };
 
diff --git a/grafana-plugin/src/containers/RotationForm/ScheduleOverrideForm.tsx b/grafana-plugin/src/containers/RotationForm/ScheduleOverrideForm.tsx
index cf79d6006a..a125af4b49 100644
--- a/grafana-plugin/src/containers/RotationForm/ScheduleOverrideForm.tsx
+++ b/grafana-plugin/src/containers/RotationForm/ScheduleOverrideForm.tsx
@@ -171,7 +171,9 @@ export const ScheduleOverrideForm: FC<RotationFormProps> = (props) => {
     } catch (err) {
       onError(err);
     } finally {
-      setIsOpen(true);
+      setTimeout(() => {
+        setIsOpen(true);
+      }, 500);
     }
   };
 
diff --git a/grafana-plugin/src/containers/Rotations/Rotations.module.css b/grafana-plugin/src/containers/Rotations/Rotations.module.css
index 7bb3634220..67003f21eb 100644
--- a/grafana-plugin/src/containers/Rotations/Rotations.module.css
+++ b/grafana-plugin/src/containers/Rotations/Rotations.module.css
@@ -46,10 +46,6 @@
   margin-bottom: 10px;
 }
 
-.layer-title_first {
-  margin-top: 40px;
-}
-
 .rotations-plus-title {
   display: flex;
   flex-direction: column;
diff --git a/grafana-plugin/src/containers/Rotations/Rotations.tsx b/grafana-plugin/src/containers/Rotations/Rotations.tsx
index 756977c3db..8d3e33f4a2 100644
--- a/grafana-plugin/src/containers/Rotations/Rotations.tsx
+++ b/grafana-plugin/src/containers/Rotations/Rotations.tsx
@@ -15,7 +15,7 @@ import { RotationForm } from 'containers/RotationForm/RotationForm';
 import { TimelineMarks } from 'containers/TimelineMarks/TimelineMarks';
 import { WithPermissionControlTooltip } from 'containers/WithPermissionControl/WithPermissionControlTooltip';
 import { getColor, getLayersFromStore } from 'models/schedule/schedule.helpers';
-import { Layer, Schedule, ScheduleType, Shift, ShiftSwap, Event } from 'models/schedule/schedule.types';
+import { Schedule, ScheduleType, Shift, ShiftSwap, Event, Layer } from 'models/schedule/schedule.types';
 import { ApiSchemas } from 'network/oncall-api/api.types';
 import { WithStoreProps } from 'state/types';
 import { withMobXProviderContext } from 'state/withStore';
@@ -30,8 +30,9 @@ const cx = cn.bind(styles);
 
 interface RotationsProps extends WithStoreProps {
   shiftIdToShowRotationForm?: Shift['id'] | 'new';
+  layerPriorityToShowRotationForm?: Layer['priority'];
   scheduleId: Schedule['id'];
-  onShowRotationForm: (shiftId: Shift['id'] | 'new') => void;
+  onShowRotationForm: (shiftId: Shift['id'] | 'new', layerPriority?: Layer['priority']) => void;
   onClick: (id: Shift['id'] | 'new') => void;
   onShowOverrideForm: (shiftId: 'new', shiftStart: dayjs.Dayjs, shiftEnd: dayjs.Dayjs) => void;
   onShowShiftSwapForm: (id: ShiftSwap['id'] | 'new', params?: Partial<ShiftSwap>) => void;
@@ -45,7 +46,6 @@ interface RotationsProps extends WithStoreProps {
 }
 
 interface RotationsState {
-  layerPriority?: Layer['priority'];
   shiftStartToShowRotationForm?: dayjs.Dayjs;
   shiftEndToShowRotationForm?: dayjs.Dayjs;
 }
@@ -53,7 +53,6 @@ interface RotationsState {
 @observer
 class _Rotations extends Component<RotationsProps, RotationsState> {
   state: RotationsState = {
-    layerPriority: undefined,
     shiftStartToShowRotationForm: undefined,
     shiftEndToShowRotationForm: undefined,
   };
@@ -70,8 +69,9 @@ class _Rotations extends Component<RotationsProps, RotationsState> {
       filters,
       onShowShiftSwapForm,
       onSlotClick,
+      layerPriorityToShowRotationForm,
     } = this.props;
-    const { layerPriority, shiftStartToShowRotationForm, shiftEndToShowRotationForm } = this.state;
+    const { shiftStartToShowRotationForm, shiftEndToShowRotationForm } = this.state;
 
     const base = 7 * 24 * 60; // in minutes
     const diff = store.timezoneStore.currentDateInSelectedTimezone.diff(
@@ -101,7 +101,7 @@ class _Rotations extends Component<RotationsProps, RotationsState> {
 
     return (
       <>
-        <div className={cx('root')}>
+        <div id="rotations" className={cx('root')}>
           <div className={cx('header')}>
             <HorizontalGroup justify="space-between">
               <div className={cx('title')}>
@@ -191,16 +191,14 @@ class _Rotations extends Component<RotationsProps, RotationsState> {
                 ))}
               </TransitionGroup>
             ) : (
-              <div>
-                <div id={`layer1`} className={cx('layer')}>
-                  <div className={cx('layer-title')}>
-                    <HorizontalGroup spacing="sm" justify="center">
-                      <Text type="secondary">Layer 1</Text>
-                    </HorizontalGroup>
-                  </div>
+              <div className={cx('layers')}>
+                <TimelineMarks />
+                <div className={cx('current-time')} style={{ left: `${currentTimeX * 100}%` }} />
+                <div id="layer1" className={cx('layer', 'layer-first')}>
+                  <Tag className={cx('layer-title')} color="secondary">
+                    <Text type="secondary"> Layer 1</Text>
+                  </Tag>
                   <div className={cx('header-plus-content')}>
-                    <div className={cx('current-time')} style={{ left: `${currentTimeX * 100}%` }} />
-                    <TimelineMarks />
                     <div className={cx('rotations')}>
                       <Rotation
                         onClick={(shiftStart, shiftEnd) => {
@@ -235,7 +233,7 @@ class _Rotations extends Component<RotationsProps, RotationsState> {
             shiftId={shiftIdToShowRotationForm}
             shiftColor={findColor(shiftIdToShowRotationForm, layers)}
             scheduleId={scheduleId}
-            layerPriority={layerPriority}
+            layerPriority={layerPriorityToShowRotationForm}
             shiftStart={shiftStartToShowRotationForm}
             shiftEnd={shiftEndToShowRotationForm}
             onHide={() => {
@@ -284,12 +282,9 @@ class _Rotations extends Component<RotationsProps, RotationsState> {
       return;
     }
 
-    this.setState(
-      { layerPriority, shiftStartToShowRotationForm: shiftStart, shiftEndToShowRotationForm: shiftEnd },
-      () => {
-        this.onShowRotationForm('new');
-      }
-    );
+    this.setState({ shiftStartToShowRotationForm: shiftStart, shiftEndToShowRotationForm: shiftEnd }, () => {
+      this.onShowRotationForm('new', layerPriority);
+    });
   };
 
   handleAddRotation = (option: SelectableValue) => {
@@ -301,11 +296,10 @@ class _Rotations extends Component<RotationsProps, RotationsState> {
 
     this.setState(
       {
-        layerPriority: option.value,
         shiftStartToShowRotationForm: store.timezoneStore.calendarStartDate,
       },
       () => {
-        this.onShowRotationForm('new');
+        this.onShowRotationForm('new', option.value);
       }
     );
   };
@@ -313,20 +307,19 @@ class _Rotations extends Component<RotationsProps, RotationsState> {
   hideRotationForm = () => {
     this.setState(
       {
-        layerPriority: undefined,
         shiftStartToShowRotationForm: undefined,
         shiftEndToShowRotationForm: undefined,
       },
       () => {
-        this.onShowRotationForm(undefined);
+        this.onShowRotationForm(undefined, undefined);
       }
     );
   };
 
-  onShowRotationForm = (shiftId: Shift['id']) => {
+  onShowRotationForm = (shiftId: Shift['id'], layerPriority?: Layer['priority']) => {
     const { onShowRotationForm } = this.props;
 
-    onShowRotationForm(shiftId);
+    onShowRotationForm(shiftId, layerPriority);
   };
 
   handleShowOverrideForm = (shiftStart: dayjs.Dayjs, shiftEnd: dayjs.Dayjs) => {
diff --git a/grafana-plugin/src/containers/Rotations/ScheduleOverrides.tsx b/grafana-plugin/src/containers/Rotations/ScheduleOverrides.tsx
index a8726d59b2..30a4466887 100644
--- a/grafana-plugin/src/containers/Rotations/ScheduleOverrides.tsx
+++ b/grafana-plugin/src/containers/Rotations/ScheduleOverrides.tsx
@@ -14,20 +14,18 @@ import { ScheduleOverrideForm } from 'containers/RotationForm/ScheduleOverrideFo
 import { TimelineMarks } from 'containers/TimelineMarks/TimelineMarks';
 import { WithPermissionControlTooltip } from 'containers/WithPermissionControl/WithPermissionControlTooltip';
 import {
-  getLayersFromStore,
   getOverrideColor,
   getOverridesFromStore,
   getShiftSwapsFromStore,
   SHIFT_SWAP_COLOR,
 } from 'models/schedule/schedule.helpers';
 import { Schedule, Shift, ShiftEvents, ShiftSwap } from 'models/schedule/schedule.types';
-import { getUTCString } from 'pages/schedule/Schedule.helpers';
 import { WithStoreProps } from 'state/types';
 import { withMobXProviderContext } from 'state/withStore';
 import { UserActions } from 'utils/authorization/authorization';
 
 import { DEFAULT_TRANSITION_TIMEOUT } from './Rotations.config';
-import { findClosestUserEvent, findColor } from './Rotations.helpers';
+import { findColor } from './Rotations.helpers';
 
 import styles from './Rotations.module.css';
 
@@ -39,7 +37,7 @@ interface ScheduleOverridesProps extends WithStoreProps {
   scheduleId: Schedule['id'];
   shiftIdToShowRotationForm?: Shift['id'] | 'new';
   onShowRotationForm: (shiftId: Shift['id'] | 'new') => void;
-  onShowShiftSwapForm: (id: ShiftSwap['id'] | 'new', params?: Partial<ShiftSwap>) => void;
+  onShowShiftSwapForm: (id: ShiftSwap['id'] | 'new') => void;
   onCreate: () => void;
   onUpdate: () => void;
   onDelete: () => void;
@@ -74,16 +72,11 @@ class _ScheduleOverrides extends Component<ScheduleOverridesProps, ScheduleOverr
       shiftEndToShowOverrideForm: propsShiftEndToShowOverrideForm,
       onShowShiftSwapForm,
       filters,
-      store: {
-        userStore: { currentUserPk },
-      },
     } = this.props;
     const { shiftStartToShowOverrideForm, shiftEndToShowOverrideForm } = this.state;
 
     const shifts = getOverridesFromStore(store, scheduleId, store.timezoneStore.calendarStartDate) as ShiftEvents[];
 
-    const layers = getLayersFromStore(store, scheduleId, store.timezoneStore.calendarStartDate);
-
     const shiftSwaps = getShiftSwapsFromStore(store, scheduleId, store.timezoneStore.calendarStartDate);
 
     const base = 7 * 24 * 60; // in minutes
@@ -115,17 +108,7 @@ class _ScheduleOverrides extends Component<ScheduleOverridesProps, ScheduleOverr
                   variant="secondary"
                   disabled={disableShiftSwaps}
                   onClick={() => {
-                    const closestEvent = findClosestUserEvent(dayjs(), currentUserPk, layers);
-                    const swapStart = closestEvent
-                      ? dayjs(closestEvent.start)
-                      : store.timezoneStore.currentDateInSelectedTimezone.startOf('day').add(1, 'day');
-
-                    const swapEnd = closestEvent ? dayjs(closestEvent.end) : swapStart.add(1, 'day');
-
-                    onShowShiftSwapForm('new', {
-                      swap_start: getUTCString(swapStart),
-                      swap_end: getUTCString(swapEnd),
-                    });
+                    onShowShiftSwapForm('new');
                   }}
                 >
                   Request shift swap
@@ -151,30 +134,30 @@ class _ScheduleOverrides extends Component<ScheduleOverridesProps, ScheduleOverr
           <div className={cx('header-plus-content')}>
             {!currentTimeHidden && <div className={cx('current-time')} style={{ left: `${currentTimeX * 100}%` }} />}
             <TimelineMarks />
-            <TransitionGroup className={cx('rotations', 'layer', 'layer-first')}>
-              <Tag className={cx('layer-title')} color="secondary">
-                <Text type="secondary">Swaps</Text>
-              </Tag>
-              {shiftSwaps && shiftSwaps.length
-                ? shiftSwaps.map(({ isPreview, events }, index) => (
-                    <CSSTransition key={index} timeout={DEFAULT_TRANSITION_TIMEOUT} classNames={{ ...styles }}>
-                      <Rotation
-                        events={events}
-                        color={SHIFT_SWAP_COLOR}
-                        onSlotClick={(event) => {
-                          if (event.is_gap) {
-                            return;
-                          }
-                          onShowShiftSwapForm(event.shiftSwapId);
-                        }}
-                        transparent={isPreview}
-                        filters={filters}
-                      />
-                    </CSSTransition>
-                  ))
-                : null}
-            </TransitionGroup>
-            <TransitionGroup className={cx('rotations', 'layer')}>
+            {shiftSwaps && shiftSwaps.length ? (
+              <TransitionGroup className={cx('rotations', 'layer', 'layer-first')}>
+                <Tag className={cx('layer-title')} color="secondary">
+                  <Text type="secondary">Swaps</Text>
+                </Tag>
+                {shiftSwaps.map(({ isPreview, events }, index) => (
+                  <CSSTransition key={index} timeout={DEFAULT_TRANSITION_TIMEOUT} classNames={{ ...styles }}>
+                    <Rotation
+                      events={events}
+                      color={SHIFT_SWAP_COLOR}
+                      onSlotClick={(event) => {
+                        if (event.is_gap) {
+                          return;
+                        }
+                        onShowShiftSwapForm(event.shiftSwapId);
+                      }}
+                      transparent={isPreview}
+                      filters={filters}
+                    />
+                  </CSSTransition>
+                ))}
+              </TransitionGroup>
+            ) : null}
+            <TransitionGroup className={cx('rotations', 'layer', { 'layer-first': !shiftSwaps || !shiftSwaps.length })}>
               <Tag className={cx('layer-title')} color="secondary">
                 <Text type="secondary">Overrides</Text>
               </Tag>
diff --git a/grafana-plugin/src/pages/schedule/Schedule.tsx b/grafana-plugin/src/pages/schedule/Schedule.tsx
index e5a8cf183f..2466a22e61 100644
--- a/grafana-plugin/src/pages/schedule/Schedule.tsx
+++ b/grafana-plugin/src/pages/schedule/Schedule.tsx
@@ -1,6 +1,17 @@
 import React from 'react';
 
-import { Button, HorizontalGroup, VerticalGroup, IconButton, ToolbarButton, Icon, Modal } from '@grafana/ui';
+import {
+  Button,
+  HorizontalGroup,
+  VerticalGroup,
+  IconButton,
+  ToolbarButton,
+  Icon,
+  Modal,
+  Dropdown,
+  Menu,
+  ButtonGroup,
+} from '@grafana/ui';
 import cn from 'classnames/bind';
 import dayjs from 'dayjs';
 import { observer } from 'mobx-react';
@@ -15,6 +26,7 @@ import { Text } from 'components/Text/Text';
 import { WithConfirm } from 'components/WithConfirm/WithConfirm';
 import { ShiftSwapForm } from 'containers/RotationForm/ShiftSwapForm';
 import { Rotations } from 'containers/Rotations/Rotations';
+import { findClosestUserEvent } from 'containers/Rotations/Rotations.helpers';
 import { ScheduleFinal } from 'containers/Rotations/ScheduleFinal';
 import { ScheduleOverrides } from 'containers/Rotations/ScheduleOverrides';
 import { ScheduleForm } from 'containers/ScheduleForm/ScheduleForm';
@@ -22,14 +34,15 @@ import { ScheduleICalSettings } from 'containers/ScheduleIcalLink/ScheduleIcalLi
 import { UserTimezoneSelect } from 'containers/UserTimezoneSelect/UserTimezoneSelect';
 import { UsersTimezones } from 'containers/UsersTimezones/UsersTimezones';
 import { WithPermissionControlTooltip } from 'containers/WithPermissionControl/WithPermissionControlTooltip';
-import { Event, Schedule, ScheduleType, Shift, ShiftSwap } from 'models/schedule/schedule.types';
+import { getLayersFromStore } from 'models/schedule/schedule.helpers';
+import { Event, Layer, Schedule, ScheduleType, Shift, ShiftSwap } from 'models/schedule/schedule.types';
 import { UserHelper } from 'models/user/user.helpers';
 import { PageProps, WithStoreProps } from 'state/types';
 import { withMobXProviderContext } from 'state/withStore';
 import { isUserActionAllowed, UserActions } from 'utils/authorization/authorization';
 import { PLUGIN_ROOT } from 'utils/consts';
 
-import { getStartOfWeekBasedOnCurrentDate } from './Schedule.helpers';
+import { getStartOfWeekBasedOnCurrentDate, getUTCString } from './Schedule.helpers';
 
 import styles from './Schedule.module.css';
 
@@ -41,6 +54,7 @@ interface SchedulePageState {
   schedulePeriodType: string;
   renderType: string;
   shiftIdToShowRotationForm?: Shift['id'];
+  layerPriorityToShowRotationForm: Layer['priority'];
   shiftIdToShowOverridesForm?: Shift['id'];
   shiftStartToShowOverrideForm?: dayjs.Dayjs;
   shiftEndToShowOverrideForm?: dayjs.Dayjs;
@@ -65,6 +79,7 @@ class _SchedulePage extends React.Component<SchedulePageProps, SchedulePageState
       schedulePeriodType: 'week',
       renderType: 'timeline',
       shiftIdToShowRotationForm: undefined,
+      layerPriorityToShowRotationForm: undefined,
       shiftIdToShowOverridesForm: undefined,
       isLoading: true,
       showEditForm: false,
@@ -104,6 +119,7 @@ class _SchedulePage extends React.Component<SchedulePageProps, SchedulePageState
 
     const {
       shiftIdToShowRotationForm,
+      layerPriorityToShowRotationForm,
       shiftIdToShowOverridesForm,
       showEditForm,
       showScheduleICalSettings,
@@ -141,6 +157,9 @@ class _SchedulePage extends React.Component<SchedulePageProps, SchedulePageState
       shiftIdToShowRotationForm ||
       shiftSwapIdToShowForm;
 
+    const layers = getLayersFromStore(store, scheduleId, store.timezoneStore.calendarStartDate);
+    const nextPriority = layers && layers.length ? layers[layers.length - 1].priority + 1 : 1;
+
     return (
       <PageErrorHandlingWrapper
         errorData={store.scheduleStore.refreshEventsError}
@@ -202,6 +221,60 @@ class _SchedulePage extends React.Component<SchedulePageProps, SchedulePageState
                                 </Button>
                               </WithPermissionControlTooltip>
                             )}
+                            <Dropdown
+                              overlay={
+                                <Menu>
+                                  {layers?.map((layer, index) => (
+                                    <Menu.Item
+                                      key={index}
+                                      label={`L${layer.priority} rotation`}
+                                      onClick={() => {
+                                        document
+                                          .getElementById('rotations')
+                                          .scrollIntoView({ behavior: 'smooth', block: 'center' });
+
+                                        this.handleShowRotationForm('new', layer.priority);
+                                      }}
+                                    />
+                                  ))}
+                                  <Menu.Item
+                                    label="New layer with rotation"
+                                    onClick={() => {
+                                      document
+                                        .getElementById('rotations')
+                                        .scrollIntoView({ behavior: 'smooth', block: 'center' });
+
+                                      this.handleShowRotationForm('new', nextPriority);
+                                    }}
+                                  />
+                                  <Menu.Item
+                                    label="Shift swap request"
+                                    onClick={() => {
+                                      document
+                                        .getElementById('overrides-list')
+                                        .scrollIntoView({ behavior: 'smooth', block: 'center' });
+
+                                      this.handleShowShiftSwapForm('new');
+                                    }}
+                                  />
+                                  <Menu.Item
+                                    label="Override"
+                                    onClick={() => {
+                                      document
+                                        .getElementById('overrides-list')
+                                        .scrollIntoView({ behavior: 'smooth', block: 'center' });
+
+                                      this.handleShowOverridesForm('new');
+                                    }}
+                                  />
+                                </Menu>
+                              }
+                            >
+                              <ButtonGroup>
+                                <Button>Add</Button>
+                                <Button icon="angle-down" />
+                              </ButtonGroup>
+                            </Dropdown>
                           </HorizontalGroup>
                           <ToolbarButton
                             icon="cog"
@@ -282,6 +355,7 @@ class _SchedulePage extends React.Component<SchedulePageProps, SchedulePageState
                       onUpdate={this.refreshEventsAndClearPreview}
                       onDelete={this.refreshEventsAndClearPreview}
                       shiftIdToShowRotationForm={shiftIdToShowRotationForm}
+                      layerPriorityToShowRotationForm={layerPriorityToShowRotationForm}
                       onShowRotationForm={this.handleShowRotationForm}
                       onShowOverrideForm={this.handleShowOverridesForm}
                       disabled={disabledRotationForm}
@@ -355,8 +429,8 @@ class _SchedulePage extends React.Component<SchedulePageProps, SchedulePageState
     store.setPageTitle(schedule?.name);
   };
 
-  handleShowRotationForm = (shiftId: Shift['id'] | 'new') => {
-    this.setState({ shiftIdToShowRotationForm: shiftId });
+  handleShowRotationForm = (shiftId: Shift['id'] | 'new', layerPriority?: Layer['priority']) => {
+    this.setState({ shiftIdToShowRotationForm: shiftId, layerPriorityToShowRotationForm: layerPriority });
   };
 
   handleShowOverridesForm = (shiftId: Shift['id'] | 'new', shiftStart?: dayjs.Dayjs, shiftEnd?: dayjs.Dayjs) => {
@@ -454,15 +528,37 @@ class _SchedulePage extends React.Component<SchedulePageProps, SchedulePageState
     history.replace(`${PLUGIN_ROOT}/schedules`);
   };
 
-  handleShowShiftSwapForm = (id: ShiftSwap['id'], params: Partial<ShiftSwap>) => {
-    const { filters } = this.state;
-
+  handleShowShiftSwapForm = (id: ShiftSwap['id'] | 'new') => {
     const {
-      store: { userStore },
+      store,
+      match: {
+        params: { id: scheduleId },
+      },
     } = this.props;
 
-    if (!filters.users.includes(userStore.currentUserPk)) {
-      this.setState({ filters: { ...filters, users: [...this.state.filters.users, userStore.currentUserPk] } });
+    const {
+      userStore: { currentUserPk },
+      timezoneStore: { currentDateInSelectedTimezone },
+    } = store;
+
+    const layers = getLayersFromStore(store, scheduleId, store.timezoneStore.calendarStartDate);
+
+    const { filters } = this.state;
+
+    const closestEvent = findClosestUserEvent(dayjs(), currentUserPk, layers);
+    const swapStart = closestEvent
+      ? dayjs(closestEvent.start)
+      : currentDateInSelectedTimezone.startOf('day').add(1, 'day');
+
+    const swapEnd = closestEvent ? dayjs(closestEvent.end) : swapStart.add(1, 'day');
+
+    const params = {
+      swap_start: getUTCString(swapStart),
+      swap_end: getUTCString(swapEnd),
+    };
+
+    if (!filters.users.includes(currentUserPk)) {
+      this.setState({ filters: { ...filters, users: [...this.state.filters.users, currentUserPk] } });
       this.highlightMyShiftsWasToggled = true;
     }
 

From d8e18fa11cb8738d28c6f68ee9b5d9932bc16a3e Mon Sep 17 00:00:00 2001
From: Maxim Mordasov <maxim.mordasov@grafana.com>
Date: Thu, 9 May 2024 12:49:20 +0100
Subject: [PATCH 04/28] add 2 weeks view

---
 .../src/containers/Rotation/Rotation.tsx      |  8 ++--
 .../src/containers/Rotations/Rotations.tsx    |  5 +-
 .../containers/Rotations/ScheduleFinal.tsx    |  4 +-
 .../Rotations/ScheduleOverrides.tsx           |  3 +-
 .../containers/Rotations/SchedulePersonal.tsx |  2 +-
 .../containers/ScheduleSlot/ScheduleSlot.tsx  |  8 ++--
 .../TimelineMarks/TimelineMarks.tsx           | 16 ++++---
 .../src/models/schedule/schedule.helpers.ts   |  8 +++-
 .../src/models/schedule/schedule.ts           | 30 +++++++++---
 .../src/models/schedule/schedule.types.ts     |  6 +++
 .../src/pages/schedule/Schedule.tsx           | 47 +++++++++++++------
 11 files changed, 98 insertions(+), 39 deletions(-)

diff --git a/grafana-plugin/src/containers/Rotation/Rotation.tsx b/grafana-plugin/src/containers/Rotation/Rotation.tsx
index 380319598b..1a4bb1b986 100644
--- a/grafana-plugin/src/containers/Rotation/Rotation.tsx
+++ b/grafana-plugin/src/containers/Rotation/Rotation.tsx
@@ -9,6 +9,7 @@ import hash from 'object-hash';
 import { ScheduleFiltersType } from 'components/ScheduleFilters/ScheduleFilters.types';
 import { Text } from 'components/Text/Text';
 import { ScheduleSlot } from 'containers/ScheduleSlot/ScheduleSlot';
+import { scheduleViewToDaysInOneRow } from 'models/schedule/schedule.helpers';
 import { Event, ShiftSwap } from 'models/schedule/schedule.types';
 import { useStore } from 'state/useStore';
 
@@ -26,7 +27,6 @@ interface RotationProps {
   handleAddShiftSwap?: (id: 'new', params: Partial<ShiftSwap>) => void;
   handleOpenSchedule?: (event: Event) => void;
   onShiftSwapClick?: (swapId: ShiftSwap['id']) => void;
-  days?: number;
   transparent?: boolean;
   simplified?: boolean;
   filters?: ScheduleFiltersType;
@@ -39,11 +39,11 @@ interface RotationProps {
 export const Rotation: FC<RotationProps> = observer((props) => {
   const {
     timezoneStore: { calendarStartDate, getDateInSelectedTimezone },
+    scheduleStore,
   } = useStore();
   const {
     events,
     color: propsColor,
-    days = 7,
     transparent = false,
     onClick,
     handleAddOverride,
@@ -58,6 +58,8 @@ export const Rotation: FC<RotationProps> = observer((props) => {
     showScheduleNameAsSlotTitle,
   } = props;
 
+  const days = scheduleViewToDaysInOneRow[scheduleStore.scheduleView];
+
   const [animate, _setAnimate] = useState<boolean>(true);
 
   const handleRotationClick = (event: React.MouseEvent<HTMLDivElement>) => {
@@ -65,7 +67,7 @@ export const Rotation: FC<RotationProps> = observer((props) => {
     const x = event.clientX - rect.left; //x position within the element.
     const width = event.currentTarget.offsetWidth;
 
-    const dayOffset = Math.floor((x / width) * 7);
+    const dayOffset = Math.floor((x / width) * scheduleViewToDaysInOneRow[scheduleStore.scheduleView]);
 
     const shiftStart = calendarStartDate.add(dayOffset, 'day');
     const shiftEnd = shiftStart.add(1, 'day');
diff --git a/grafana-plugin/src/containers/Rotations/Rotations.tsx b/grafana-plugin/src/containers/Rotations/Rotations.tsx
index 8d3e33f4a2..133aa8de9c 100644
--- a/grafana-plugin/src/containers/Rotations/Rotations.tsx
+++ b/grafana-plugin/src/containers/Rotations/Rotations.tsx
@@ -14,7 +14,7 @@ import { Rotation } from 'containers/Rotation/Rotation';
 import { RotationForm } from 'containers/RotationForm/RotationForm';
 import { TimelineMarks } from 'containers/TimelineMarks/TimelineMarks';
 import { WithPermissionControlTooltip } from 'containers/WithPermissionControl/WithPermissionControlTooltip';
-import { getColor, getLayersFromStore } from 'models/schedule/schedule.helpers';
+import { getColor, getLayersFromStore, scheduleViewToDaysInOneRow } from 'models/schedule/schedule.helpers';
 import { Schedule, ScheduleType, Shift, ShiftSwap, Event, Layer } from 'models/schedule/schedule.types';
 import { ApiSchemas } from 'network/oncall-api/api.types';
 import { WithStoreProps } from 'state/types';
@@ -71,9 +71,10 @@ class _Rotations extends Component<RotationsProps, RotationsState> {
       onSlotClick,
       layerPriorityToShowRotationForm,
     } = this.props;
+
     const { shiftStartToShowRotationForm, shiftEndToShowRotationForm } = this.state;
 
-    const base = 7 * 24 * 60; // in minutes
+    const base = scheduleViewToDaysInOneRow[store.scheduleStore.scheduleView] * 24 * 60; // in minutes
     const diff = store.timezoneStore.currentDateInSelectedTimezone.diff(
       store.timezoneStore.calendarStartDate,
       'minutes'
diff --git a/grafana-plugin/src/containers/Rotations/ScheduleFinal.tsx b/grafana-plugin/src/containers/Rotations/ScheduleFinal.tsx
index 9f436c7f25..e8e222e1e4 100644
--- a/grafana-plugin/src/containers/Rotations/ScheduleFinal.tsx
+++ b/grafana-plugin/src/containers/Rotations/ScheduleFinal.tsx
@@ -15,6 +15,7 @@ import {
   getLayersFromStore,
   getOverridesFromStore,
   getShiftsFromStore,
+  scheduleViewToDaysInOneRow,
 } from 'models/schedule/schedule.helpers';
 import { Schedule, ShiftSwap, Event } from 'models/schedule/schedule.types';
 import { WithStoreProps } from 'state/types';
@@ -43,7 +44,8 @@ const _ScheduleFinal: FC<ScheduleFinalProps> = observer(
       timezoneStore: { currentDateInSelectedTimezone, calendarStartDate, selectedTimezoneOffset },
       scheduleStore: { refreshEvents },
     } = store;
-    const base = 7 * 24 * 60; // in minutes
+
+    const base = scheduleViewToDaysInOneRow[store.scheduleStore.scheduleView] * 24 * 60; // in minutes
     const diff = currentDateInSelectedTimezone.diff(calendarStartDate, 'minutes');
 
     const currentTimeX = diff / base;
diff --git a/grafana-plugin/src/containers/Rotations/ScheduleOverrides.tsx b/grafana-plugin/src/containers/Rotations/ScheduleOverrides.tsx
index 30a4466887..8093a2c916 100644
--- a/grafana-plugin/src/containers/Rotations/ScheduleOverrides.tsx
+++ b/grafana-plugin/src/containers/Rotations/ScheduleOverrides.tsx
@@ -17,6 +17,7 @@ import {
   getOverrideColor,
   getOverridesFromStore,
   getShiftSwapsFromStore,
+  scheduleViewToDaysInOneRow,
   SHIFT_SWAP_COLOR,
 } from 'models/schedule/schedule.helpers';
 import { Schedule, Shift, ShiftEvents, ShiftSwap } from 'models/schedule/schedule.types';
@@ -79,7 +80,7 @@ class _ScheduleOverrides extends Component<ScheduleOverridesProps, ScheduleOverr
 
     const shiftSwaps = getShiftSwapsFromStore(store, scheduleId, store.timezoneStore.calendarStartDate);
 
-    const base = 7 * 24 * 60; // in minutes
+    const base = scheduleViewToDaysInOneRow[store.scheduleStore.scheduleView] * 24 * 60; // in minutes
     const diff = store.timezoneStore.currentDateInSelectedTimezone.diff(
       store.timezoneStore.calendarStartDate,
       'minutes'
diff --git a/grafana-plugin/src/containers/Rotations/SchedulePersonal.tsx b/grafana-plugin/src/containers/Rotations/SchedulePersonal.tsx
index 2846fa7e25..f4b95311c7 100644
--- a/grafana-plugin/src/containers/Rotations/SchedulePersonal.tsx
+++ b/grafana-plugin/src/containers/Rotations/SchedulePersonal.tsx
@@ -119,7 +119,7 @@ const _SchedulePersonal: FC<SchedulePersonalProps> = observer(({ userPk, onSlotC
       <div className={cx('header-plus-content')}>
         {!currentTimeHidden && <div className={cx('current-time')} style={{ left: `${currentTimeX * 100}%` }} />}
         <TimelineMarks />
-        <TransitionGroup className={cx('rotations')}>
+        <TransitionGroup className={cx('rotations', 'layer', 'layer-first')}>
           {shifts?.length ? (
             shifts.map(({ events }, index) => {
               return (
diff --git a/grafana-plugin/src/containers/ScheduleSlot/ScheduleSlot.tsx b/grafana-plugin/src/containers/ScheduleSlot/ScheduleSlot.tsx
index e5b6277576..0d2399736c 100644
--- a/grafana-plugin/src/containers/ScheduleSlot/ScheduleSlot.tsx
+++ b/grafana-plugin/src/containers/ScheduleSlot/ScheduleSlot.tsx
@@ -11,7 +11,7 @@ import { RenderConditionally } from 'components/RenderConditionally/RenderCondit
 import { ScheduleFiltersType } from 'components/ScheduleFilters/ScheduleFilters.types';
 import { Text } from 'components/Text/Text';
 import { WorkingHours } from 'components/WorkingHours/WorkingHours';
-import { getShiftName, SHIFT_SWAP_COLOR } from 'models/schedule/schedule.helpers';
+import { getShiftName, scheduleViewToDaysInOneRow, SHIFT_SWAP_COLOR } from 'models/schedule/schedule.helpers';
 import { Event, ShiftSwap } from 'models/schedule/schedule.types';
 import { getTzOffsetString } from 'models/timezone/timezone.helpers';
 import { ApiSchemas } from 'network/oncall-api/api.types';
@@ -34,11 +34,11 @@ interface ScheduleSlotProps {
 }
 
 const cx = cn.bind(styles);
-const ONE_WEEK_IN_SECONDS = 7 * 24 * 60 * 60;
 
 export const ScheduleSlot: FC<ScheduleSlotProps> = observer((props) => {
   const {
     timezoneStore: { getDateInSelectedTimezone },
+    scheduleStore,
   } = useStore();
   const {
     event,
@@ -57,7 +57,9 @@ export const ScheduleSlot: FC<ScheduleSlotProps> = observer((props) => {
 
   const durationInSeconds = end.diff(start, 'seconds');
 
-  const width = Math.max(durationInSeconds / ONE_WEEK_IN_SECONDS, 0);
+  const rowInSeconds = scheduleViewToDaysInOneRow[scheduleStore.scheduleView] * 24 * 60 * 60;
+
+  const width = Math.max(durationInSeconds / rowInSeconds, 0);
 
   const currentMoment = useMemo(() => dayjs(), []);
 
diff --git a/grafana-plugin/src/containers/TimelineMarks/TimelineMarks.tsx b/grafana-plugin/src/containers/TimelineMarks/TimelineMarks.tsx
index d8e84eb2c1..e4028ba449 100644
--- a/grafana-plugin/src/containers/TimelineMarks/TimelineMarks.tsx
+++ b/grafana-plugin/src/containers/TimelineMarks/TimelineMarks.tsx
@@ -5,6 +5,7 @@ import dayjs from 'dayjs';
 import { observer } from 'mobx-react';
 
 import { Text } from 'components/Text/Text';
+import { scheduleViewToDaysInOneRow } from 'models/schedule/schedule.helpers';
 import { useStore } from 'state/useStore';
 
 import styles from './TimelineMarks.module.scss';
@@ -18,16 +19,19 @@ const cx = cn.bind(styles);
 export const TimelineMarks: FC<TimelineMarksProps> = observer((props) => {
   const {
     timezoneStore: { currentDateInSelectedTimezone, calendarStartDate },
+    scheduleStore,
   } = useStore();
   const { debug } = props;
 
+  const days = scheduleViewToDaysInOneRow[scheduleStore.scheduleView];
+
   const momentsToRender = useMemo(() => {
     const hoursToSplit = 12;
 
     const momentsToRender = [];
     const jLimit = 24 / hoursToSplit;
 
-    for (let i = 0; i < 7; i++) {
+    for (let i = 0; i < days; i++) {
       const d = dayjs(calendarStartDate).add(i, 'days');
       const obj = { moment: d, moments: [] };
       for (let j = 0; j < jLimit; j++) {
@@ -37,15 +41,15 @@ export const TimelineMarks: FC<TimelineMarksProps> = observer((props) => {
       momentsToRender.push(obj);
     }
     return momentsToRender;
-  }, [calendarStartDate]);
+  }, [calendarStartDate, days]);
 
   const cuts = useMemo(() => {
     const cuts = [];
-    for (let i = 0; i <= 24 * 7; i++) {
+    for (let i = 0; i <= 24 * days; i++) {
       cuts.push({});
     }
     return cuts;
-  }, []);
+  }, [days]);
 
   return (
     <div className={cx('root')}>
@@ -54,10 +58,10 @@ export const TimelineMarks: FC<TimelineMarksProps> = observer((props) => {
           {cuts.map((_cut, index) => (
             <line
               key={index}
-              x1={`${(index * 100) / (24 * 7)}%`}
+              x1={`${(index * 100) / (24 * days)}%`}
               strokeWidth={1}
               y1="0"
-              x2={`${(index * 100) / (24 * 7)}%`}
+              x2={`${(index * 100) / (24 * days)}%`}
               y2="6px"
               stroke="rgba(204, 204, 220, 0.65)"
             />
diff --git a/grafana-plugin/src/models/schedule/schedule.helpers.ts b/grafana-plugin/src/models/schedule/schedule.helpers.ts
index 3a1ca043a0..52f8071aa4 100644
--- a/grafana-plugin/src/models/schedule/schedule.helpers.ts
+++ b/grafana-plugin/src/models/schedule/schedule.helpers.ts
@@ -3,7 +3,7 @@ import dayjs from 'dayjs';
 import { ApiSchemas } from 'network/oncall-api/api.types';
 import { RootStore } from 'state/rootStore';
 
-import { Event, Layer, Schedule, ScheduleType, Shift, ShiftEvents, ShiftSwap } from './schedule.types';
+import { Event, Layer, Schedule, ScheduleType, ScheduleView, Shift, ShiftEvents, ShiftSwap } from './schedule.types';
 
 export const getFromString = (moment: dayjs.Dayjs) => {
   return moment.format('YYYY-MM-DD');
@@ -63,6 +63,12 @@ export const fillGaps = (events: Event[]) => {
   return newEvents;
 };
 
+export const scheduleViewToDaysInOneRow = {
+  [ScheduleView.OneWeek]: 7,
+  [ScheduleView.TwoWeeks]: 14,
+  [ScheduleView.OneMonth]: 7,
+};
+
 export const splitToShifts = (events: Event[]) => {
   const shifts: Array<{ shiftId: Shift['id']; priority: Shift['priority_level']; events: Event[] }> = [];
 
diff --git a/grafana-plugin/src/models/schedule/schedule.ts b/grafana-plugin/src/models/schedule/schedule.ts
index f455ad99f6..b07194f010 100644
--- a/grafana-plugin/src/models/schedule/schedule.ts
+++ b/grafana-plugin/src/models/schedule/schedule.ts
@@ -21,6 +21,7 @@ import {
   fillGapsInShifts,
   flattenShiftEvents,
   getFromString,
+  scheduleViewToDaysInOneRow,
   splitToLayers,
   splitToShifts,
   unFlattenShiftEvents,
@@ -36,6 +37,7 @@ import {
   ShiftEvents,
   ScheduleScoreQualityResponse,
   ShiftSwap,
+  ScheduleView,
 } from './schedule.types';
 
 export class ScheduleStore extends BaseStore {
@@ -121,6 +123,9 @@ export class ScheduleStore extends BaseStore {
     wrongTeamNoPermissions: false,
   };
 
+  @observable
+  scheduleView = ScheduleView.TwoWeeks;
+
   constructor(rootStore: RootStore) {
     super(rootStore);
 
@@ -129,6 +134,11 @@ export class ScheduleStore extends BaseStore {
     this.path = '/schedules/';
   }
 
+  @action.bound
+  setScheduleView(value: ScheduleView) {
+    this.scheduleView = value;
+  }
+
   @action.bound
   async loadItem(id: Schedule['id'], skipErrorHandling = false): Promise<Schedule> {
     const schedule = await this.getById(id, skipErrorHandling);
@@ -282,12 +292,14 @@ export class ScheduleStore extends BaseStore {
   ) {
     const type = isOverride ? 3 : 2;
 
+    const days = scheduleViewToDaysInOneRow[this.scheduleView];
+
     const fromString = getFromString(startMoment);
 
     const dayBefore = startMoment.subtract(1, 'day');
 
     const response = await makeRequest(`/oncall_shifts/preview/`, {
-      params: { date: getFromString(dayBefore), days: 8 },
+      params: { date: getFromString(dayBefore), days },
       data: { type, schedule: scheduleId, shift_pk: shiftId === 'new' ? undefined : shiftId, ...params },
       method: 'POST',
     });
@@ -488,7 +500,7 @@ export class ScheduleStore extends BaseStore {
   }
 
   @action.bound
-  async updateEvents(scheduleId: Schedule['id'], startMoment: dayjs.Dayjs, type: RotationType = 'rotation', days = 9) {
+  async updateEvents(scheduleId: Schedule['id'], startMoment: dayjs.Dayjs, type: RotationType = 'rotation', days) {
     const dayBefore = startMoment.subtract(1, 'day');
 
     const response = await makeRequest(`/schedules/${scheduleId}/filter_events/`, {
@@ -525,6 +537,8 @@ export class ScheduleStore extends BaseStore {
     this.refreshEventsError = {};
     const startMoment = this.rootStore.timezoneStore.calendarStartDate;
 
+    const days = scheduleViewToDaysInOneRow[this.scheduleView];
+
     try {
       const schedule = await this.loadItem(scheduleId);
       this.rootStore.setPageTitle(schedule?.name);
@@ -536,10 +550,10 @@ export class ScheduleStore extends BaseStore {
 
     this.updateRelatedUsers(scheduleId); // to refresh related users
     await Promise.all([
-      this.updateEvents(scheduleId, startMoment, 'rotation'),
-      this.updateEvents(scheduleId, startMoment, 'override'),
-      this.updateEvents(scheduleId, startMoment, 'final'),
-      this.updateShiftSwaps(scheduleId, startMoment),
+      this.updateEvents(scheduleId, startMoment, 'rotation', days),
+      this.updateEvents(scheduleId, startMoment, 'override', days),
+      this.updateEvents(scheduleId, startMoment, 'final', days),
+      this.updateShiftSwaps(scheduleId, startMoment, days),
     ]);
   }
 
@@ -596,9 +610,11 @@ export class ScheduleStore extends BaseStore {
   }
 
   @action.bound
-  async updateShiftSwaps(scheduleId: Schedule['id'], startMoment: dayjs.Dayjs, days = 9) {
+  async updateShiftSwaps(scheduleId: Schedule['id'], startMoment: dayjs.Dayjs) {
     const fromString = getFromString(startMoment);
 
+    const days = scheduleViewToDaysInOneRow[this.scheduleView];
+
     const dayBefore = startMoment.subtract(1, 'day');
 
     const result = await makeRequest(`/schedules/${scheduleId}/filter_shift_swaps/`, {
diff --git a/grafana-plugin/src/models/schedule/schedule.types.ts b/grafana-plugin/src/models/schedule/schedule.types.ts
index 1a7e8eb11d..bf77f32d71 100644
--- a/grafana-plugin/src/models/schedule/schedule.types.ts
+++ b/grafana-plugin/src/models/schedule/schedule.types.ts
@@ -9,6 +9,12 @@ export enum ScheduleType {
   'API',
 }
 
+export enum ScheduleView {
+  'OneWeek' = 'Week',
+  'TwoWeeks' = '2 weeks',
+  'OneMonth' = 'Month',
+}
+
 export interface Schedule {
   id: string;
   ical_url_primary: string;
diff --git a/grafana-plugin/src/pages/schedule/Schedule.tsx b/grafana-plugin/src/pages/schedule/Schedule.tsx
index 2466a22e61..b40fe58446 100644
--- a/grafana-plugin/src/pages/schedule/Schedule.tsx
+++ b/grafana-plugin/src/pages/schedule/Schedule.tsx
@@ -11,6 +11,7 @@ import {
   Dropdown,
   Menu,
   ButtonGroup,
+  RadioButtonGroup,
 } from '@grafana/ui';
 import cn from 'classnames/bind';
 import dayjs from 'dayjs';
@@ -34,8 +35,8 @@ import { ScheduleICalSettings } from 'containers/ScheduleIcalLink/ScheduleIcalLi
 import { UserTimezoneSelect } from 'containers/UserTimezoneSelect/UserTimezoneSelect';
 import { UsersTimezones } from 'containers/UsersTimezones/UsersTimezones';
 import { WithPermissionControlTooltip } from 'containers/WithPermissionControl/WithPermissionControlTooltip';
-import { getLayersFromStore } from 'models/schedule/schedule.helpers';
-import { Event, Layer, Schedule, ScheduleType, Shift, ShiftSwap } from 'models/schedule/schedule.types';
+import { getLayersFromStore, scheduleViewToDaysInOneRow } from 'models/schedule/schedule.helpers';
+import { Event, Layer, Schedule, ScheduleType, ScheduleView, Shift, ShiftSwap } from 'models/schedule/schedule.types';
 import { UserHelper } from 'models/user/user.helpers';
 import { PageProps, WithStoreProps } from 'state/types';
 import { withMobXProviderContext } from 'state/withStore';
@@ -160,12 +161,10 @@ class _SchedulePage extends React.Component<SchedulePageProps, SchedulePageState
     const layers = getLayersFromStore(store, scheduleId, store.timezoneStore.calendarStartDate);
     const nextPriority = layers && layers.length ? layers[layers.length - 1].priority + 1 : 1;
 
+    const { scheduleView } = scheduleStore;
+
     return (
-      <PageErrorHandlingWrapper
-        errorData={store.scheduleStore.refreshEventsError}
-        objectName="schedule"
-        pageName="schedules"
-      >
+      <PageErrorHandlingWrapper errorData={scheduleStore.refreshEventsError} objectName="schedule" pageName="schedules">
         {() => (
           <>
             <div className={cx('root')}>
@@ -322,11 +321,25 @@ class _SchedulePage extends React.Component<SchedulePageProps, SchedulePageState
                             {store.timezoneStore.calendarStartDate.add(6, 'day').format('DD MMM')}
                           </Text.Title>
                         </HorizontalGroup>
-                        <ScheduleFilters
-                          value={filters}
-                          onChange={(value) => this.setState({ filters: value })}
-                          currentUserPk={store.userStore.currentUserPk}
-                        />
+                        <HorizontalGroup>
+                          <RadioButtonGroup
+                            options={[
+                              { label: ScheduleView.OneWeek, value: ScheduleView.OneWeek },
+                              { label: ScheduleView.TwoWeeks, value: ScheduleView.TwoWeeks },
+                              { label: ScheduleView.OneMonth, value: ScheduleView.OneMonth },
+                            ]}
+                            value={scheduleView}
+                            onChange={(value) => {
+                              scheduleStore.setScheduleView(value);
+                              scheduleStore.refreshEvents(scheduleId);
+                            }}
+                          />
+                          <ScheduleFilters
+                            value={filters}
+                            onChange={(value) => this.setState({ filters: value })}
+                            currentUserPk={store.userStore.currentUserPk}
+                          />
+                        </HorizontalGroup>
                       </HorizontalGroup>
                     </div>
                     <ScheduleFinal
@@ -486,13 +499,19 @@ class _SchedulePage extends React.Component<SchedulePageProps, SchedulePageState
 
   handleLeftClick = () => {
     const { store } = this.props;
-    store.timezoneStore.setCalendarStartDate(store.timezoneStore.calendarStartDate.subtract(7, 'day'));
+    const { scheduleStore } = store;
+    store.timezoneStore.setCalendarStartDate(
+      store.timezoneStore.calendarStartDate.subtract(scheduleViewToDaysInOneRow[scheduleStore.scheduleView], 'day')
+    );
     this.handleDateRangeUpdate();
   };
 
   handleRightClick = () => {
     const { store } = this.props;
-    store.timezoneStore.setCalendarStartDate(store.timezoneStore.calendarStartDate.add(7, 'day'));
+    const { scheduleStore } = store;
+    store.timezoneStore.setCalendarStartDate(
+      store.timezoneStore.calendarStartDate.add(scheduleViewToDaysInOneRow[scheduleStore.scheduleView], 'day')
+    );
     this.handleDateRangeUpdate();
   };
 

From e6f9919c3279611a8f0459f6c83c38ed33d5deff Mon Sep 17 00:00:00 2001
From: Maxim Mordasov <maxim.mordasov@grafana.com>
Date: Mon, 13 May 2024 12:12:51 +0100
Subject: [PATCH 05/28] visual minor fixes

---
 .../src/containers/Rotation/Rotation.module.css      |  2 +-
 .../src/containers/Rotations/Rotations.tsx           |  6 ++++--
 .../src/containers/Rotations/ScheduleOverrides.tsx   | 12 ++++++++----
 .../src/pages/schedule/Schedule.module.css           |  2 +-
 grafana-plugin/src/pages/schedule/Schedule.tsx       |  4 ++--
 grafana-plugin/src/pages/schedules/Schedules.tsx     |  5 ++++-
 6 files changed, 20 insertions(+), 11 deletions(-)

diff --git a/grafana-plugin/src/containers/Rotation/Rotation.module.css b/grafana-plugin/src/containers/Rotation/Rotation.module.css
index ca7a578a0b..b217c5b50b 100644
--- a/grafana-plugin/src/containers/Rotation/Rotation.module.css
+++ b/grafana-plugin/src/containers/Rotation/Rotation.module.css
@@ -40,7 +40,7 @@
 }
 
 .slots__animate {
-  transition: transform 500ms ease;
+  /* transition: transform 500ms ease; TODO either remove or uncomment */
 }
 
 .current-time {
diff --git a/grafana-plugin/src/containers/Rotations/Rotations.tsx b/grafana-plugin/src/containers/Rotations/Rotations.tsx
index 133aa8de9c..1b12e33671 100644
--- a/grafana-plugin/src/containers/Rotations/Rotations.tsx
+++ b/grafana-plugin/src/containers/Rotations/Rotations.tsx
@@ -157,8 +157,10 @@ class _Rotations extends Component<RotationsProps, RotationsState> {
                 {layers.map((layer, layerIndex) => (
                   <CSSTransition key={layerIndex} timeout={DEFAULT_TRANSITION_TIMEOUT} classNames={{ ...styles }}>
                     <div id={`layer${layer.priority}`} className={cx('layer', { ['layer-first']: layerIndex === 0 })}>
-                      <Tag className={cx('layer-title')} color="secondary">
-                        <Text type="secondary"> Layer {layer.priority}</Text>
+                      <Tag className={cx('layer-title')} color="var(--background-canvas)">
+                        <Text size="small" type="primary">
+                          Layer {layer.priority}
+                        </Text>
                       </Tag>
                       <div className={cx('header-plus-content')}>
                         <TransitionGroup className={cx('rotations')}>
diff --git a/grafana-plugin/src/containers/Rotations/ScheduleOverrides.tsx b/grafana-plugin/src/containers/Rotations/ScheduleOverrides.tsx
index 8093a2c916..a1c66809d4 100644
--- a/grafana-plugin/src/containers/Rotations/ScheduleOverrides.tsx
+++ b/grafana-plugin/src/containers/Rotations/ScheduleOverrides.tsx
@@ -137,8 +137,10 @@ class _ScheduleOverrides extends Component<ScheduleOverridesProps, ScheduleOverr
             <TimelineMarks />
             {shiftSwaps && shiftSwaps.length ? (
               <TransitionGroup className={cx('rotations', 'layer', 'layer-first')}>
-                <Tag className={cx('layer-title')} color="secondary">
-                  <Text type="secondary">Swaps</Text>
+                <Tag className={cx('layer-title')} color="var(--background-canvas)">
+                  <Text type="primary" size="small">
+                    Swaps
+                  </Text>
                 </Tag>
                 {shiftSwaps.map(({ isPreview, events }, index) => (
                   <CSSTransition key={index} timeout={DEFAULT_TRANSITION_TIMEOUT} classNames={{ ...styles }}>
@@ -159,8 +161,10 @@ class _ScheduleOverrides extends Component<ScheduleOverridesProps, ScheduleOverr
               </TransitionGroup>
             ) : null}
             <TransitionGroup className={cx('rotations', 'layer', { 'layer-first': !shiftSwaps || !shiftSwaps.length })}>
-              <Tag className={cx('layer-title')} color="secondary">
-                <Text type="secondary">Overrides</Text>
+              <Tag className={cx('layer-title')} color="var(--background-canvas)">
+                <Text type="primary" size="small">
+                  Overrides
+                </Text>
               </Tag>
               {shifts && shifts.length ? (
                 shifts.map(({ shiftId, isPreview, events }, index) => (
diff --git a/grafana-plugin/src/pages/schedule/Schedule.module.css b/grafana-plugin/src/pages/schedule/Schedule.module.css
index e6dc9f8bc5..bd4feb50f9 100644
--- a/grafana-plugin/src/pages/schedule/Schedule.module.css
+++ b/grafana-plugin/src/pages/schedule/Schedule.module.css
@@ -29,7 +29,7 @@
 .controls {
   width: 100%;
   position: sticky;
-  top: 10px;
+  top: 0;
   z-index: 2;
   padding: 10px;
   background: var(--background-secondary);
diff --git a/grafana-plugin/src/pages/schedule/Schedule.tsx b/grafana-plugin/src/pages/schedule/Schedule.tsx
index b40fe58446..e23bb6d197 100644
--- a/grafana-plugin/src/pages/schedule/Schedule.tsx
+++ b/grafana-plugin/src/pages/schedule/Schedule.tsx
@@ -201,7 +201,7 @@ class _SchedulePage extends React.Component<SchedulePageProps, SchedulePageState
                       <HorizontalGroup spacing="lg">
                         {users && (
                           <HorizontalGroup>
-                            <Text type="secondary">Current timezone:</Text>
+                            <Text type="secondary">View in timezone:</Text>
                             <UserTimezoneSelect scheduleId={scheduleId} />
                           </HorizontalGroup>
                         )}
@@ -316,7 +316,7 @@ class _SchedulePage extends React.Component<SchedulePageProps, SchedulePageState
                               <Icon name="angle-right" />
                             </Button>
                           </HorizontalGroup>
-                          <Text.Title style={{ marginLeft: '8px' }} level={4} type="primary">
+                          <Text.Title style={{ marginLeft: '8px', whiteSpace: 'nowrap' }} level={4} type="primary">
                             {store.timezoneStore.calendarStartDate.format('DD MMM')} -{' '}
                             {store.timezoneStore.calendarStartDate.add(6, 'day').format('DD MMM')}
                           </Text.Title>
diff --git a/grafana-plugin/src/pages/schedules/Schedules.tsx b/grafana-plugin/src/pages/schedules/Schedules.tsx
index 50a99b5c37..c5576150cc 100644
--- a/grafana-plugin/src/pages/schedules/Schedules.tsx
+++ b/grafana-plugin/src/pages/schedules/Schedules.tsx
@@ -80,7 +80,10 @@ class _SchedulesPage extends React.Component<SchedulesPageProps, SchedulesPageSt
             <HorizontalGroup justify="space-between">
               <Text.Title level={3}>Schedules</Text.Title>
               <div className={cx('schedules__actions')}>
-                <UserTimezoneSelect />
+                <HorizontalGroup>
+                  <Text type="secondary">View in timezone:</Text>
+                  <UserTimezoneSelect />
+                </HorizontalGroup>
                 <WithPermissionControlTooltip userAction={UserActions.SchedulesWrite}>
                   <Button variant="primary" onClick={this.handleCreateScheduleClick}>
                     + New schedule

From f70c8961d6e935dac933cdee044ab6a46a2308c6 Mon Sep 17 00:00:00 2001
From: Maxim Mordasov <maxim.mordasov@grafana.com>
Date: Thu, 16 May 2024 11:37:25 +0100
Subject: [PATCH 06/28] add monthly view

---
 .../src/containers/Rotation/Rotation.tsx      |  10 +-
 .../containers/Rotations/Rotations.module.css |   2 +-
 .../containers/Rotations/ScheduleFinal.tsx    |  92 ++++++++------
 .../TimelineMarks/TimelineMarks.tsx           |  13 +-
 .../src/models/schedule/schedule.helpers.ts   |  20 +++
 .../src/models/schedule/schedule.ts           |  12 +-
 .../src/models/timezone/timezone.ts           |  13 +-
 .../src/pages/schedule/Schedule.helpers.ts    |  38 +++++-
 .../src/pages/schedule/Schedule.module.css    |   6 +-
 .../src/pages/schedule/Schedule.tsx           | 114 +++++++++++-------
 10 files changed, 218 insertions(+), 102 deletions(-)

diff --git a/grafana-plugin/src/containers/Rotation/Rotation.tsx b/grafana-plugin/src/containers/Rotation/Rotation.tsx
index 1a4bb1b986..1f5cc5988c 100644
--- a/grafana-plugin/src/containers/Rotation/Rotation.tsx
+++ b/grafana-plugin/src/containers/Rotation/Rotation.tsx
@@ -34,6 +34,7 @@ interface RotationProps {
   onSlotClick?: (event: Event) => void;
   emptyText?: string;
   showScheduleNameAsSlotTitle?: boolean;
+  startDate?: dayjs.Dayjs;
 }
 
 export const Rotation: FC<RotationProps> = observer((props) => {
@@ -56,8 +57,11 @@ export const Rotation: FC<RotationProps> = observer((props) => {
     onSlotClick,
     emptyText,
     showScheduleNameAsSlotTitle,
+    startDate: propsStartDate,
   } = props;
 
+  const startDate = propsStartDate || calendarStartDate;
+
   const days = scheduleViewToDaysInOneRow[scheduleStore.scheduleView];
 
   const [animate, _setAnimate] = useState<boolean>(true);
@@ -69,7 +73,7 @@ export const Rotation: FC<RotationProps> = observer((props) => {
 
     const dayOffset = Math.floor((x / width) * scheduleViewToDaysInOneRow[scheduleStore.scheduleView]);
 
-    const shiftStart = calendarStartDate.add(dayOffset, 'day');
+    const shiftStart = startDate.add(dayOffset, 'day');
     const shiftEnd = shiftStart.add(1, 'day');
 
     onClick(shiftStart, shiftEnd);
@@ -132,13 +136,13 @@ export const Rotation: FC<RotationProps> = observer((props) => {
 
     const firstShift = events[0];
     const firstShiftOffset = getDateInSelectedTimezone(firstShift.start).diff(
-      getDateInSelectedTimezone(calendarStartDate),
+      getDateInSelectedTimezone(startDate),
       'seconds'
     );
     const base = 60 * 60 * 24 * days;
 
     return firstShiftOffset / base;
-  }, [events, calendarStartDate]);
+  }, [events, startDate]);
 
   return (
     <div className={cx('root')} onClick={onClick && handleRotationClick}>
diff --git a/grafana-plugin/src/containers/Rotations/Rotations.module.css b/grafana-plugin/src/containers/Rotations/Rotations.module.css
index 67003f21eb..8b2bacff71 100644
--- a/grafana-plugin/src/containers/Rotations/Rotations.module.css
+++ b/grafana-plugin/src/containers/Rotations/Rotations.module.css
@@ -34,7 +34,7 @@
 }
 
 .layer-first {
-  margin-top: 30px;
+  padding-top: 30px;
 }
 
 .rotations {
diff --git a/grafana-plugin/src/containers/Rotations/ScheduleFinal.tsx b/grafana-plugin/src/containers/Rotations/ScheduleFinal.tsx
index e8e222e1e4..a2f3743bf2 100644
--- a/grafana-plugin/src/containers/Rotations/ScheduleFinal.tsx
+++ b/grafana-plugin/src/containers/Rotations/ScheduleFinal.tsx
@@ -1,4 +1,4 @@
-import React, { FC, useEffect } from 'react';
+import React, { FC, useEffect, useMemo } from 'react';
 
 import { HorizontalGroup } from '@grafana/ui';
 import cn from 'classnames/bind';
@@ -15,9 +15,11 @@ import {
   getLayersFromStore,
   getOverridesFromStore,
   getShiftsFromStore,
+  getTotalDaysToDisplay,
   scheduleViewToDaysInOneRow,
 } from 'models/schedule/schedule.helpers';
-import { Schedule, ShiftSwap, Event } from 'models/schedule/schedule.types';
+import { Event, Schedule, ShiftSwap } from 'models/schedule/schedule.types';
+import { getCurrentTimeX } from 'pages/schedule/Schedule.helpers';
 import { WithStoreProps } from 'state/types';
 import { withMobXProviderContext } from 'state/withStore';
 
@@ -45,19 +47,12 @@ const _ScheduleFinal: FC<ScheduleFinalProps> = observer(
       scheduleStore: { refreshEvents },
     } = store;
 
-    const base = scheduleViewToDaysInOneRow[store.scheduleStore.scheduleView] * 24 * 60; // in minutes
-    const diff = currentDateInSelectedTimezone.diff(calendarStartDate, 'minutes');
-
-    const currentTimeX = diff / base;
-
     const shifts = flattenShiftEvents(getShiftsFromStore(store, scheduleId, calendarStartDate));
 
     const layers = getLayersFromStore(store, scheduleId, calendarStartDate);
 
     const overrides = getOverridesFromStore(store, scheduleId, calendarStartDate);
 
-    const currentTimeHidden = currentTimeX < 0 || currentTimeX > 1;
-
     const getColor = (event: Event) => findColor(event.shift?.pk, layers, overrides);
 
     const handleShowOverrideForm = (shiftStart: dayjs.Dayjs, shiftEnd: dayjs.Dayjs) => {
@@ -68,6 +63,17 @@ const _ScheduleFinal: FC<ScheduleFinalProps> = observer(
       refreshEvents(scheduleId);
     }, [selectedTimezoneOffset]);
 
+    const rows = useMemo(() => {
+      const totalDays = getTotalDaysToDisplay(store.scheduleStore.scheduleView, calendarStartDate);
+      const rows = [];
+      for (let i = 0; i < totalDays / scheduleViewToDaysInOneRow[store.scheduleStore.scheduleView]; i++) {
+        rows.push({
+          startDate: calendarStartDate.add(scheduleViewToDaysInOneRow[store.scheduleStore.scheduleView] * i, 'days'),
+        });
+      }
+      return rows;
+    }, [calendarStartDate, store.scheduleStore.scheduleView]);
+
     return (
       <div className={cx('root')}>
         {!simplified && (
@@ -82,33 +88,47 @@ const _ScheduleFinal: FC<ScheduleFinalProps> = observer(
           </div>
         )}
         <div className={cx('header-plus-content')}>
-          {!currentTimeHidden && <div className={cx('current-time')} style={{ left: `${currentTimeX * 100}%` }} />}
-          <TimelineMarks />
-          <TransitionGroup className={cx('rotations', 'layer', 'layer-first')}>
-            {shifts && shifts.length ? (
-              shifts.map(({ events }, index) => {
-                return (
-                  <CSSTransition key={index} timeout={DEFAULT_TRANSITION_TIMEOUT} classNames={{ ...styles }}>
-                    <Rotation
-                      key={index}
-                      events={events}
-                      handleAddOverride={handleShowOverrideForm}
-                      handleAddShiftSwap={onShowShiftSwapForm}
-                      onShiftSwapClick={onShowShiftSwapForm}
-                      simplified={simplified}
-                      filters={filters}
-                      getColor={getColor}
-                      onSlotClick={onSlotClick}
-                    />
-                  </CSSTransition>
-                );
-              })
-            ) : (
-              <CSSTransition key={0} timeout={DEFAULT_TRANSITION_TIMEOUT} classNames={{ ...styles }}>
-                <Rotation events={[]} />
-              </CSSTransition>
-            )}
-          </TransitionGroup>
+          {rows.map(({ startDate }, index) => (
+            <TransitionGroup key={index} className={cx('rotations', 'layer', 'layer-first')}>
+              <TimelineMarks startDate={startDate} />
+              <div
+                className={cx('current-time', 'CURRENT_TIME')}
+                style={{
+                  left: `${
+                    getCurrentTimeX(
+                      currentDateInSelectedTimezone,
+                      startDate,
+                      scheduleViewToDaysInOneRow[store.scheduleStore.scheduleView] * 24 * 60
+                    ) * 100
+                  }%`,
+                }}
+              />
+              {shifts?.length ? (
+                shifts.map(({ events }, index) => {
+                  return (
+                    <CSSTransition key={index} timeout={DEFAULT_TRANSITION_TIMEOUT} classNames={{ ...styles }}>
+                      <Rotation
+                        startDate={startDate}
+                        key={index}
+                        events={events}
+                        handleAddOverride={handleShowOverrideForm}
+                        handleAddShiftSwap={onShowShiftSwapForm}
+                        onShiftSwapClick={onShowShiftSwapForm}
+                        simplified={simplified}
+                        filters={filters}
+                        getColor={getColor}
+                        onSlotClick={onSlotClick}
+                      />
+                    </CSSTransition>
+                  );
+                })
+              ) : (
+                <CSSTransition key={0} timeout={DEFAULT_TRANSITION_TIMEOUT} classNames={{ ...styles }}>
+                  <Rotation startDate={calendarStartDate} events={[]} />
+                </CSSTransition>
+              )}
+            </TransitionGroup>
+          ))}
         </div>
       </div>
     );
diff --git a/grafana-plugin/src/containers/TimelineMarks/TimelineMarks.tsx b/grafana-plugin/src/containers/TimelineMarks/TimelineMarks.tsx
index e4028ba449..6cd2917898 100644
--- a/grafana-plugin/src/containers/TimelineMarks/TimelineMarks.tsx
+++ b/grafana-plugin/src/containers/TimelineMarks/TimelineMarks.tsx
@@ -12,6 +12,7 @@ import styles from './TimelineMarks.module.scss';
 
 interface TimelineMarksProps {
   debug?: boolean;
+  startDate?: dayjs.Dayjs;
 }
 
 const cx = cn.bind(styles);
@@ -21,7 +22,9 @@ export const TimelineMarks: FC<TimelineMarksProps> = observer((props) => {
     timezoneStore: { currentDateInSelectedTimezone, calendarStartDate },
     scheduleStore,
   } = useStore();
-  const { debug } = props;
+  const { debug, startDate: propsStartDate } = props;
+
+  const startDate = propsStartDate || calendarStartDate;
 
   const days = scheduleViewToDaysInOneRow[scheduleStore.scheduleView];
 
@@ -32,7 +35,7 @@ export const TimelineMarks: FC<TimelineMarksProps> = observer((props) => {
     const jLimit = 24 / hoursToSplit;
 
     for (let i = 0; i < days; i++) {
-      const d = dayjs(calendarStartDate).add(i, 'days');
+      const d = dayjs(startDate).add(i, 'days');
       const obj = { moment: d, moments: [] };
       for (let j = 0; j < jLimit; j++) {
         const m = dayjs(d).add(j * hoursToSplit, 'hour');
@@ -41,7 +44,7 @@ export const TimelineMarks: FC<TimelineMarksProps> = observer((props) => {
       momentsToRender.push(obj);
     }
     return momentsToRender;
-  }, [calendarStartDate, days]);
+  }, [startDate, days]);
 
   const cuts = useMemo(() => {
     const cuts = [];
@@ -77,7 +80,9 @@ export const TimelineMarks: FC<TimelineMarksProps> = observer((props) => {
         return (
           <div key={i} className={cx('weekday' /* , { 'weekday--weekend': isWeekend } */)}>
             <div className={cx('weekday-title')}>
-              <Text type={isCurrentDay ? 'primary' : 'secondary'}>{m.moment.format('ddd D MMM')}</Text>
+              <Text type={isCurrentDay ? 'primary' : 'secondary'}>
+                {m.moment.date() === 1 ? m.moment.format('ddd D MMM') : m.moment.format('ddd D')}
+              </Text>
             </div>
             {/* <div className={cx('weekday-times')}>
               {m.moments.map((mm, j) => (
diff --git a/grafana-plugin/src/models/schedule/schedule.helpers.ts b/grafana-plugin/src/models/schedule/schedule.helpers.ts
index 52f8071aa4..e22de095a3 100644
--- a/grafana-plugin/src/models/schedule/schedule.helpers.ts
+++ b/grafana-plugin/src/models/schedule/schedule.helpers.ts
@@ -69,6 +69,26 @@ export const scheduleViewToDaysInOneRow = {
   [ScheduleView.OneMonth]: 7,
 };
 
+export const getTotalDaysToDisplay = (scheduleView: ScheduleView, calendarStartDate: dayjs.Dayjs) => {
+  switch (scheduleView) {
+    case ScheduleView.OneWeek:
+      return 7;
+    case ScheduleView.TwoWeeks:
+      return 14;
+    case ScheduleView.OneMonth:
+      const firstDayOfCurrentMonth =
+        calendarStartDate.date() === 1 ? calendarStartDate : calendarStartDate.add(1, 'month').startOf('month');
+
+      const lastDayOfCurrentMonth = firstDayOfCurrentMonth.endOf('month');
+
+      const lastDayOfLastWeek = lastDayOfCurrentMonth.endOf('isoWeek');
+
+      const totalDays = lastDayOfLastWeek.diff(calendarStartDate, 'days') + 1;
+
+      return totalDays;
+  }
+};
+
 export const splitToShifts = (events: Event[]) => {
   const shifts: Array<{ shiftId: Shift['id']; priority: Shift['priority_level']; events: Event[] }> = [];
 
diff --git a/grafana-plugin/src/models/schedule/schedule.ts b/grafana-plugin/src/models/schedule/schedule.ts
index b07194f010..a3beb72c50 100644
--- a/grafana-plugin/src/models/schedule/schedule.ts
+++ b/grafana-plugin/src/models/schedule/schedule.ts
@@ -21,7 +21,7 @@ import {
   fillGapsInShifts,
   flattenShiftEvents,
   getFromString,
-  scheduleViewToDaysInOneRow,
+  getTotalDaysToDisplay,
   splitToLayers,
   splitToShifts,
   unFlattenShiftEvents,
@@ -124,7 +124,7 @@ export class ScheduleStore extends BaseStore {
   };
 
   @observable
-  scheduleView = ScheduleView.TwoWeeks;
+  scheduleView = ScheduleView.OneWeek;
 
   constructor(rootStore: RootStore) {
     super(rootStore);
@@ -292,7 +292,7 @@ export class ScheduleStore extends BaseStore {
   ) {
     const type = isOverride ? 3 : 2;
 
-    const days = scheduleViewToDaysInOneRow[this.scheduleView];
+    const days = getTotalDaysToDisplay(this.scheduleView, this.rootStore.timezoneStore.calendarStartDate);
 
     const fromString = getFromString(startMoment);
 
@@ -537,7 +537,7 @@ export class ScheduleStore extends BaseStore {
     this.refreshEventsError = {};
     const startMoment = this.rootStore.timezoneStore.calendarStartDate;
 
-    const days = scheduleViewToDaysInOneRow[this.scheduleView];
+    const days = getTotalDaysToDisplay(this.scheduleView, this.rootStore.timezoneStore.calendarStartDate) + 1;
 
     try {
       const schedule = await this.loadItem(scheduleId);
@@ -553,7 +553,7 @@ export class ScheduleStore extends BaseStore {
       this.updateEvents(scheduleId, startMoment, 'rotation', days),
       this.updateEvents(scheduleId, startMoment, 'override', days),
       this.updateEvents(scheduleId, startMoment, 'final', days),
-      this.updateShiftSwaps(scheduleId, startMoment, days),
+      this.updateShiftSwaps(scheduleId, startMoment),
     ]);
   }
 
@@ -613,7 +613,7 @@ export class ScheduleStore extends BaseStore {
   async updateShiftSwaps(scheduleId: Schedule['id'], startMoment: dayjs.Dayjs) {
     const fromString = getFromString(startMoment);
 
-    const days = scheduleViewToDaysInOneRow[this.scheduleView];
+    const days = getTotalDaysToDisplay(this.scheduleView, this.rootStore.timezoneStore.calendarStartDate) + 1;
 
     const dayBefore = startMoment.subtract(1, 'day');
 
diff --git a/grafana-plugin/src/models/timezone/timezone.ts b/grafana-plugin/src/models/timezone/timezone.ts
index 3b9b8d9def..e8561c7955 100644
--- a/grafana-plugin/src/models/timezone/timezone.ts
+++ b/grafana-plugin/src/models/timezone/timezone.ts
@@ -2,7 +2,8 @@ import dayjs, { Dayjs } from 'dayjs';
 import { observable, action, computed, makeObservable } from 'mobx';
 
 // TODO: move utils from Schedule.helpers to common place
-import { getStartOfWeekBasedOnCurrentDate } from 'pages/schedule/Schedule.helpers';
+import { ScheduleView } from 'models/schedule/schedule.types';
+import { getCalendarStartDate } from 'pages/schedule/Schedule.helpers';
 import { RootStore } from 'state/rootStore';
 
 import { getOffsetOfCurrentUser, getGMTTimezoneLabelBasedOnOffset } from './timezone.helpers';
@@ -19,13 +20,19 @@ export class TimezoneStore {
   @observable
   selectedTimezoneOffset = getOffsetOfCurrentUser();
 
+  /* @observable
+  calendarStartDate = getStartOfWeekBasedOnCurrentDate(this.currentDateInSelectedTimezone); */
+
   @observable
-  calendarStartDate = getStartOfWeekBasedOnCurrentDate(this.currentDateInSelectedTimezone);
+  calendarStartDate = getCalendarStartDate(this.currentDateInSelectedTimezone, ScheduleView.OneWeek);
 
   @action.bound
   setSelectedTimezoneOffset(offset: number) {
     this.selectedTimezoneOffset = offset;
-    this.calendarStartDate = getStartOfWeekBasedOnCurrentDate(this.currentDateInSelectedTimezone);
+    this.calendarStartDate = getCalendarStartDate(
+      this.currentDateInSelectedTimezone,
+      this.rootStore.scheduleStore.scheduleView
+    );
   }
 
   @action.bound
diff --git a/grafana-plugin/src/pages/schedule/Schedule.helpers.ts b/grafana-plugin/src/pages/schedule/Schedule.helpers.ts
index cfcdb123cb..440960570e 100644
--- a/grafana-plugin/src/pages/schedule/Schedule.helpers.ts
+++ b/grafana-plugin/src/pages/schedule/Schedule.helpers.ts
@@ -2,8 +2,13 @@ import { config } from '@grafana/runtime';
 import dayjs from 'dayjs';
 
 import { findColor } from 'containers/Rotations/Rotations.helpers';
-import { getLayersFromStore, getOverridesFromStore, getShiftsFromStore } from 'models/schedule/schedule.helpers';
-import { Event, Layer } from 'models/schedule/schedule.types';
+import {
+  getLayersFromStore,
+  getOverridesFromStore,
+  getShiftsFromStore,
+  getTotalDaysToDisplay,
+} from 'models/schedule/schedule.helpers';
+import { Event, Layer, ScheduleView } from 'models/schedule/schedule.types';
 import { Timezone } from 'models/timezone/timezone.types';
 import { RootStore } from 'state/rootStore';
 import { SelectOption } from 'state/types';
@@ -35,6 +40,35 @@ export const getStartOfWeekBasedOnCurrentDate = (date: dayjs.Dayjs) => {
   return date.startOf('isoWeek'); // it's Monday always
 };
 
+export const getCalendarStartDate = (date: dayjs.Dayjs, scheduleView: ScheduleView) => {
+  switch (scheduleView) {
+    case ScheduleView.OneMonth:
+      const startOfMonth = date.startOf('month');
+      return startOfMonth.startOf('isoWeek');
+    default:
+      return date.startOf('isoWeek');
+  }
+};
+
+export const getNewCalendarStartDate = (date: dayjs.Dayjs, scheduleView: ScheduleView, direction: 'prev' | 'next') => {
+  switch (scheduleView) {
+    case ScheduleView.OneMonth:
+      return direction === 'prev'
+        ? date.subtract(1, 'day').startOf('month').startOf('isoWeek')
+        : date.add(10, 'days').endOf('month').add(1, 'day').startOf('month').startOf('isoWeek');
+    default:
+      return direction === 'prev'
+        ? date.subtract(getTotalDaysToDisplay(scheduleView, date), 'days')
+        : date.add(getTotalDaysToDisplay(scheduleView, date), 'days');
+  }
+};
+
+export const getCurrentTimeX = (currentDate: dayjs.Dayjs, startDate: dayjs.Dayjs, baseInMinutes: number) => {
+  const diff = currentDate.diff(startDate, 'minutes');
+
+  return diff / baseInMinutes;
+};
+
 export const getUTCString = (moment: dayjs.Dayjs) => {
   return moment.utc().format('YYYY-MM-DDTHH:mm:ss.000Z');
 };
diff --git a/grafana-plugin/src/pages/schedule/Schedule.module.css b/grafana-plugin/src/pages/schedule/Schedule.module.css
index bd4feb50f9..eb21e80392 100644
--- a/grafana-plugin/src/pages/schedule/Schedule.module.css
+++ b/grafana-plugin/src/pages/schedule/Schedule.module.css
@@ -31,10 +31,8 @@
   position: sticky;
   top: 0;
   z-index: 2;
-  padding: 10px;
-  background: var(--background-secondary);
-  border: var(--border-weak);
-  border-radius: var(--border-radius);
+  padding: 16px 0;
+  background: var(--background-primary);
 }
 
 .rotations {
diff --git a/grafana-plugin/src/pages/schedule/Schedule.tsx b/grafana-plugin/src/pages/schedule/Schedule.tsx
index e23bb6d197..074d1e0fed 100644
--- a/grafana-plugin/src/pages/schedule/Schedule.tsx
+++ b/grafana-plugin/src/pages/schedule/Schedule.tsx
@@ -20,6 +20,7 @@ import { RouteComponentProps, withRouter } from 'react-router-dom';
 
 import { PageErrorHandlingWrapper } from 'components/PageErrorHandlingWrapper/PageErrorHandlingWrapper';
 import { PluginLink } from 'components/PluginLink/PluginLink';
+import { RenderConditionally } from 'components/RenderConditionally/RenderConditionally';
 import { ScheduleFilters } from 'components/ScheduleFilters/ScheduleFilters';
 import { ScheduleFiltersType } from 'components/ScheduleFilters/ScheduleFilters.types';
 import { ScheduleQuality } from 'components/ScheduleQuality/ScheduleQuality';
@@ -35,7 +36,7 @@ import { ScheduleICalSettings } from 'containers/ScheduleIcalLink/ScheduleIcalLi
 import { UserTimezoneSelect } from 'containers/UserTimezoneSelect/UserTimezoneSelect';
 import { UsersTimezones } from 'containers/UsersTimezones/UsersTimezones';
 import { WithPermissionControlTooltip } from 'containers/WithPermissionControl/WithPermissionControlTooltip';
-import { getLayersFromStore, scheduleViewToDaysInOneRow } from 'models/schedule/schedule.helpers';
+import { getLayersFromStore, getTotalDaysToDisplay } from 'models/schedule/schedule.helpers';
 import { Event, Layer, Schedule, ScheduleType, ScheduleView, Shift, ShiftSwap } from 'models/schedule/schedule.types';
 import { UserHelper } from 'models/user/user.helpers';
 import { PageProps, WithStoreProps } from 'state/types';
@@ -43,7 +44,7 @@ import { withMobXProviderContext } from 'state/withStore';
 import { isUserActionAllowed, UserActions } from 'utils/authorization/authorization';
 import { PLUGIN_ROOT } from 'utils/consts';
 
-import { getStartOfWeekBasedOnCurrentDate, getUTCString } from './Schedule.helpers';
+import { getCalendarStartDate, getNewCalendarStartDate, getUTCString } from './Schedule.helpers';
 
 import styles from './Schedule.module.css';
 
@@ -133,7 +134,7 @@ class _SchedulePage extends React.Component<SchedulePageProps, SchedulePageState
 
     const { isNotFoundError } = store.scheduleStore.refreshEventsError;
 
-    const { scheduleStore } = store;
+    const { scheduleStore, timezoneStore } = store;
 
     const users = UserHelper.getSearchResult(store.userStore).results;
     const schedule = scheduleStore.items[scheduleId];
@@ -230,7 +231,7 @@ class _SchedulePage extends React.Component<SchedulePageProps, SchedulePageState
                                       onClick={() => {
                                         document
                                           .getElementById('rotations')
-                                          .scrollIntoView({ behavior: 'smooth', block: 'center' });
+                                          .scrollIntoView({ behavior: 'instant', block: 'center' });
 
                                         this.handleShowRotationForm('new', layer.priority);
                                       }}
@@ -241,7 +242,7 @@ class _SchedulePage extends React.Component<SchedulePageProps, SchedulePageState
                                     onClick={() => {
                                       document
                                         .getElementById('rotations')
-                                        .scrollIntoView({ behavior: 'smooth', block: 'center' });
+                                        .scrollIntoView({ behavior: 'instant', block: 'center' });
 
                                       this.handleShowRotationForm('new', nextPriority);
                                     }}
@@ -251,7 +252,7 @@ class _SchedulePage extends React.Component<SchedulePageProps, SchedulePageState
                                     onClick={() => {
                                       document
                                         .getElementById('overrides-list')
-                                        .scrollIntoView({ behavior: 'smooth', block: 'center' });
+                                        .scrollIntoView({ behavior: 'instant', block: 'center' });
 
                                       this.handleShowShiftSwapForm('new');
                                     }}
@@ -261,7 +262,7 @@ class _SchedulePage extends React.Component<SchedulePageProps, SchedulePageState
                                     onClick={() => {
                                       document
                                         .getElementById('overrides-list')
-                                        .scrollIntoView({ behavior: 'smooth', block: 'center' });
+                                        .scrollIntoView({ behavior: 'instant', block: 'center' });
 
                                       this.handleShowOverridesForm('new');
                                     }}
@@ -318,7 +319,12 @@ class _SchedulePage extends React.Component<SchedulePageProps, SchedulePageState
                           </HorizontalGroup>
                           <Text.Title style={{ marginLeft: '8px', whiteSpace: 'nowrap' }} level={4} type="primary">
                             {store.timezoneStore.calendarStartDate.format('DD MMM')} -{' '}
-                            {store.timezoneStore.calendarStartDate.add(6, 'day').format('DD MMM')}
+                            {store.timezoneStore.calendarStartDate
+                              .add(
+                                getTotalDaysToDisplay(scheduleStore.scheduleView, timezoneStore.calendarStartDate) - 1,
+                                'day'
+                              )
+                              .format('DD MMM')}
                           </Text.Title>
                         </HorizontalGroup>
                         <HorizontalGroup>
@@ -331,6 +337,15 @@ class _SchedulePage extends React.Component<SchedulePageProps, SchedulePageState
                             value={scheduleView}
                             onChange={(value) => {
                               scheduleStore.setScheduleView(value);
+                              if (value === ScheduleView.OneMonth) {
+                                timezoneStore.setCalendarStartDate(
+                                  getCalendarStartDate(
+                                    timezoneStore.calendarStartDate.endOf('isoWeek').startOf('month'),
+                                    value
+                                  )
+                                );
+                              }
+
                               scheduleStore.refreshEvents(scheduleId);
                             }}
                           />
@@ -362,34 +377,38 @@ class _SchedulePage extends React.Component<SchedulePageProps, SchedulePageState
                             }
                       }
                     />
-                    <Rotations
-                      scheduleId={scheduleId}
-                      onCreate={this.refreshEventsAndClearPreview}
-                      onUpdate={this.refreshEventsAndClearPreview}
-                      onDelete={this.refreshEventsAndClearPreview}
-                      shiftIdToShowRotationForm={shiftIdToShowRotationForm}
-                      layerPriorityToShowRotationForm={layerPriorityToShowRotationForm}
-                      onShowRotationForm={this.handleShowRotationForm}
-                      onShowOverrideForm={this.handleShowOverridesForm}
-                      disabled={disabledRotationForm}
-                      filters={filters}
-                      onShowShiftSwapForm={!shiftSwapIdToShowForm ? this.handleShowShiftSwapForm : undefined}
-                      onSlotClick={shiftSwapIdToShowForm ? this.adjustShiftSwapForm : undefined}
-                    />
-                    <ScheduleOverrides
-                      scheduleId={scheduleId}
-                      onCreate={this.refreshEventsAndClearPreview}
-                      onUpdate={this.refreshEventsAndClearPreview}
-                      onDelete={this.refreshEventsAndClearPreview}
-                      shiftIdToShowRotationForm={shiftIdToShowOverridesForm}
-                      onShowRotationForm={this.handleShowOverridesForm}
-                      disabled={disabledOverrideForm}
-                      disableShiftSwaps={disabledShiftSwaps}
-                      shiftStartToShowOverrideForm={shiftStartToShowOverrideForm}
-                      shiftEndToShowOverrideForm={shiftEndToShowOverrideForm}
-                      onShowShiftSwapForm={!shiftSwapIdToShowForm ? this.handleShowShiftSwapForm : undefined}
-                      filters={filters}
-                    />
+                    <RenderConditionally shouldRender={scheduleView !== ScheduleView.OneMonth}>
+                      <Rotations
+                        scheduleId={scheduleId}
+                        onCreate={this.refreshEventsAndClearPreview}
+                        onUpdate={this.refreshEventsAndClearPreview}
+                        onDelete={this.refreshEventsAndClearPreview}
+                        shiftIdToShowRotationForm={shiftIdToShowRotationForm}
+                        layerPriorityToShowRotationForm={layerPriorityToShowRotationForm}
+                        onShowRotationForm={this.handleShowRotationForm}
+                        onShowOverrideForm={this.handleShowOverridesForm}
+                        disabled={disabledRotationForm}
+                        filters={filters}
+                        onShowShiftSwapForm={!shiftSwapIdToShowForm ? this.handleShowShiftSwapForm : undefined}
+                        onSlotClick={shiftSwapIdToShowForm ? this.adjustShiftSwapForm : undefined}
+                      />
+                    </RenderConditionally>
+                    <RenderConditionally shouldRender={scheduleView !== ScheduleView.OneMonth}>
+                      <ScheduleOverrides
+                        scheduleId={scheduleId}
+                        onCreate={this.refreshEventsAndClearPreview}
+                        onUpdate={this.refreshEventsAndClearPreview}
+                        onDelete={this.refreshEventsAndClearPreview}
+                        shiftIdToShowRotationForm={shiftIdToShowOverridesForm}
+                        onShowRotationForm={this.handleShowOverridesForm}
+                        disabled={disabledOverrideForm}
+                        disableShiftSwaps={disabledShiftSwaps}
+                        shiftStartToShowOverrideForm={shiftStartToShowOverrideForm}
+                        shiftEndToShowOverrideForm={shiftEndToShowOverrideForm}
+                        onShowShiftSwapForm={!shiftSwapIdToShowForm ? this.handleShowShiftSwapForm : undefined}
+                        filters={filters}
+                      />
+                    </RenderConditionally>
                   </div>
                 </VerticalGroup>
               )}
@@ -492,26 +511,35 @@ class _SchedulePage extends React.Component<SchedulePageProps, SchedulePageState
   handleTodayClick = () => {
     const { store } = this.props;
     store.timezoneStore.setCalendarStartDate(
-      getStartOfWeekBasedOnCurrentDate(store.timezoneStore.currentDateInSelectedTimezone)
+      getCalendarStartDate(store.timezoneStore.currentDateInSelectedTimezone, store.scheduleStore.scheduleView)
     );
     this.handleDateRangeUpdate();
   };
 
   handleLeftClick = () => {
     const { store } = this.props;
-    const { scheduleStore } = store;
-    store.timezoneStore.setCalendarStartDate(
-      store.timezoneStore.calendarStartDate.subtract(scheduleViewToDaysInOneRow[scheduleStore.scheduleView], 'day')
+    const { scheduleStore, timezoneStore } = store;
+
+    const newCalendarStartDate = getNewCalendarStartDate(
+      timezoneStore.calendarStartDate,
+      scheduleStore.scheduleView,
+      'prev'
     );
+
+    store.timezoneStore.setCalendarStartDate(newCalendarStartDate);
     this.handleDateRangeUpdate();
   };
 
   handleRightClick = () => {
     const { store } = this.props;
-    const { scheduleStore } = store;
-    store.timezoneStore.setCalendarStartDate(
-      store.timezoneStore.calendarStartDate.add(scheduleViewToDaysInOneRow[scheduleStore.scheduleView], 'day')
+    const { scheduleStore, timezoneStore } = store;
+    const newCalendarStartDate = getNewCalendarStartDate(
+      timezoneStore.calendarStartDate,
+      scheduleStore.scheduleView,
+      'next'
     );
+
+    store.timezoneStore.setCalendarStartDate(newCalendarStartDate);
     this.handleDateRangeUpdate();
   };
 

From becc75cacbbacfb67b985d77a309ae772f4e8f4c Mon Sep 17 00:00:00 2001
From: Maxim Mordasov <maxim.mordasov@grafana.com>
Date: Mon, 20 May 2024 14:58:07 +0100
Subject: [PATCH 07/28] make css and scss modules classnames human readable

---
 .../.config/webpack/webpack.config.ts         |  8 -----
 grafana-plugin/webpack.config.ts              | 31 +++++++++++++++++++
 2 files changed, 31 insertions(+), 8 deletions(-)

diff --git a/grafana-plugin/.config/webpack/webpack.config.ts b/grafana-plugin/.config/webpack/webpack.config.ts
index 9bd75a0fb2..93f20a24ee 100644
--- a/grafana-plugin/.config/webpack/webpack.config.ts
+++ b/grafana-plugin/.config/webpack/webpack.config.ts
@@ -95,14 +95,6 @@ const config = async (env): Promise<Configuration> => {
             },
           },
         },
-        {
-          test: /\.css$/,
-          use: ['style-loader', 'css-loader'],
-        },
-        {
-          test: /\.s[ac]ss$/,
-          use: ['style-loader', 'css-loader', 'sass-loader'],
-        },
         {
           test: /\.(png|jpe?g|gif|svg)$/,
           type: 'asset/resource',
diff --git a/grafana-plugin/webpack.config.ts b/grafana-plugin/webpack.config.ts
index 95f395ac32..49c66ee9ed 100644
--- a/grafana-plugin/webpack.config.ts
+++ b/grafana-plugin/webpack.config.ts
@@ -23,6 +23,37 @@ const config = async (env): Promise<Configuration> => {
             },
           },
         },
+        {
+          test: /\.s[ac]ss$/,
+          use: [
+            'style-loader',
+            {
+              loader: 'css-loader',
+              options: {
+                modules: {
+                  auto: true,
+                  localIdentName: env.development ? '[path][name]__[local]' : '[name]__[hash:base64]',
+                },
+              },
+            },
+            'sass-loader',
+          ],
+        },
+        {
+          test: /\.css$/,
+          use: [
+            'style-loader',
+            {
+              loader: 'css-loader',
+              options: {
+                modules: {
+                  auto: true,
+                  localIdentName: env.development ? '[path][name]__[local]' : '[name]__[hash:base64]',
+                },
+              },
+            },
+          ],
+        },
       ],
     },
     watchOptions: {

From e8abe0825725d9dfb79be4ae46413ba8eb487cbe Mon Sep 17 00:00:00 2001
From: Maxim Mordasov <maxim.mordasov@grafana.com>
Date: Mon, 20 May 2024 14:58:30 +0100
Subject: [PATCH 08/28] polish rotations css

---
 grafana-plugin/src/assets/style/vars.css      |  2 +
 .../containers/Rotations/Rotations.module.css | 45 +++-----------
 .../src/containers/Rotations/Rotations.tsx    | 62 ++++++++++---------
 .../containers/Rotations/ScheduleFinal.tsx    | 14 ++---
 .../Rotations/ScheduleOverrides.tsx           | 23 +++----
 .../TimelineMarks/TimelineMarks.module.scss   | 17 +++--
 .../TimelineMarks/TimelineMarks.tsx           |  9 +--
 .../src/pages/schedule/Schedule.tsx           | 17 ++---
 grafana-plugin/src/utils/DOM.ts               |  4 ++
 9 files changed, 82 insertions(+), 111 deletions(-)

diff --git a/grafana-plugin/src/assets/style/vars.css b/grafana-plugin/src/assets/style/vars.css
index fbd53fca5f..725d1a0e4b 100644
--- a/grafana-plugin/src/assets/style/vars.css
+++ b/grafana-plugin/src/assets/style/vars.css
@@ -34,6 +34,7 @@
   --background-canvas: #f4f5f5;
   --background-primary: #fff;
   --background-secondary: #f4f5f5;
+  --background-disabled: rgba(204, 204, 220, 0.04);
   --border-medium-color: rgba(36, 41, 46, 0.3);
   --border-medium: 1px solid rgba(36, 41, 46, 0.3);
   --border-strong: 1px solid rgba(36, 41, 46, 0.4);
@@ -81,6 +82,7 @@
   --background-canvas: #111217;
   --background-primary: #181b1f;
   --background-secondary: #22252b;
+  --background-disabled: rgba(204, 204, 220, 0.04);
   --border-medium-color: rgba(204, 204, 220, 0.15);
   --border-medium: 1px solid rgba(204, 204, 220, 0.15);
   --border-strong: 1px solid rgba(204, 204, 220, 0.25);
diff --git a/grafana-plugin/src/containers/Rotations/Rotations.module.css b/grafana-plugin/src/containers/Rotations/Rotations.module.css
index 8b2bacff71..bb53d23392 100644
--- a/grafana-plugin/src/containers/Rotations/Rotations.module.css
+++ b/grafana-plugin/src/containers/Rotations/Rotations.module.css
@@ -6,6 +6,10 @@
   border-radius: var(--border-radius);
 }
 
+.header {
+  padding: 12px;
+}
+
 .current-time {
   position: absolute;
   width: 1px;
@@ -16,34 +20,16 @@
   transition: left 500ms ease;
 }
 
-.header {
-  padding: 0 10px;
-}
-
-.title {
-  margin: 16px 0;
-}
-
-.layers {
-  position: relative;
-}
-
 .layer {
-  display: block;
-  margin: 10px 0;
+  padding-bottom: 10px;
 }
 
 .layer-first {
-  padding-top: 30px;
-}
-
-.rotations {
-  position: relative;
+  padding-top: 32px;
 }
 
 .layer-title {
-  margin-left: 10px;
-  margin-bottom: 10px;
+  margin: 8px;
 }
 
 .rotations-plus-title {
@@ -55,23 +41,6 @@
   position: relative;
 }
 
-.layer-header {
-  padding: 12px;
-  display: flex;
-  justify-content: space-between;
-}
-
-.layer-header-title {
-  font-weight: 400;
-  font-size: 14px;
-  line-height: 20px;
-  color: rgba(204, 204, 220, 0.65);
-}
-
-.layer-content {
-  position: relative;
-}
-
 .add-rotations-layer {
   font-weight: 400;
   font-size: 12px;
diff --git a/grafana-plugin/src/containers/Rotations/Rotations.tsx b/grafana-plugin/src/containers/Rotations/Rotations.tsx
index 1b12e33671..3d4a4e575e 100644
--- a/grafana-plugin/src/containers/Rotations/Rotations.tsx
+++ b/grafana-plugin/src/containers/Rotations/Rotations.tsx
@@ -17,6 +17,7 @@ import { WithPermissionControlTooltip } from 'containers/WithPermissionControl/W
 import { getColor, getLayersFromStore, scheduleViewToDaysInOneRow } from 'models/schedule/schedule.helpers';
 import { Schedule, ScheduleType, Shift, ShiftSwap, Event, Layer } from 'models/schedule/schedule.types';
 import { ApiSchemas } from 'network/oncall-api/api.types';
+import { getCurrentTimeX } from 'pages/schedule/Schedule.helpers';
 import { WithStoreProps } from 'state/types';
 import { withMobXProviderContext } from 'state/withStore';
 import { UserActions } from 'utils/authorization/authorization';
@@ -74,14 +75,12 @@ class _Rotations extends Component<RotationsProps, RotationsState> {
 
     const { shiftStartToShowRotationForm, shiftEndToShowRotationForm } = this.state;
 
-    const base = scheduleViewToDaysInOneRow[store.scheduleStore.scheduleView] * 24 * 60; // in minutes
-    const diff = store.timezoneStore.currentDateInSelectedTimezone.diff(
+    const currentTimeX = getCurrentTimeX(
+      store.timezoneStore.currentDateInSelectedTimezone,
       store.timezoneStore.calendarStartDate,
-      'minutes'
+      scheduleViewToDaysInOneRow[store.scheduleStore.scheduleView] * 24 * 60
     );
 
-    const currentTimeX = diff / base;
-
     const currentTimeHidden = currentTimeX < 0 || currentTimeX > 1;
 
     const layers = getLayersFromStore(store, scheduleId, store.timezoneStore.calendarStartDate);
@@ -105,24 +104,22 @@ class _Rotations extends Component<RotationsProps, RotationsState> {
         <div id="rotations" className={cx('root')}>
           <div className={cx('header')}>
             <HorizontalGroup justify="space-between">
-              <div className={cx('title')}>
-                <Text.Title level={4} type="primary">
-                  Rotations
-                </Text.Title>
-              </div>
+              <Text.Title level={5} type="primary">
+                Rotations
+              </Text.Title>
               <HorizontalGroup>
                 {disabled ? (
                   isTypeReadOnly ? (
                     <Tooltip content="Ical and API/Terraform rotations are read-only here" placement="top">
                       <div>
-                        <Button variant="primary" icon="plus" disabled>
+                        <Button variant="secondary" icon="plus" disabled>
                           Add rotation
                         </Button>
                       </div>
                     </Tooltip>
                   ) : (
                     <WithPermissionControlTooltip userAction={UserActions.SchedulesWrite}>
-                      <Button variant="primary" icon="plus" disabled>
+                      <Button variant="secondary" icon="plus" disabled>
                         Add rotation
                       </Button>
                     </WithPermissionControlTooltip>
@@ -132,12 +129,12 @@ class _Rotations extends Component<RotationsProps, RotationsState> {
                     label="Add rotation"
                     options={options}
                     onChange={this.handleAddRotation}
-                    variant="primary"
+                    variant="secondary"
                     size="md"
                   />
                 ) : (
                   <Button
-                    variant="primary"
+                    variant="secondary"
                     icon="plus"
                     onClick={() => this.handleAddLayer(nextPriority, store.timezoneStore.calendarStartDate)}
                   >
@@ -149,10 +146,15 @@ class _Rotations extends Component<RotationsProps, RotationsState> {
           </div>
           <div className={cx('rotations-plus-title')}>
             {layers && layers.length ? (
-              <TransitionGroup className={cx('layers')}>
+              <TransitionGroup className={'u-position-relative'}>
                 <TimelineMarks />
                 {!currentTimeHidden && (
-                  <div className={cx('current-time')} style={{ left: `${currentTimeX * 100}%` }} />
+                  <div
+                    className={cx('current-time')}
+                    style={{
+                      left: `${currentTimeX * 100}%`,
+                    }}
+                  />
                 )}
                 {layers.map((layer, layerIndex) => (
                   <CSSTransition key={layerIndex} timeout={DEFAULT_TRANSITION_TIMEOUT} classNames={{ ...styles }}>
@@ -163,7 +165,7 @@ class _Rotations extends Component<RotationsProps, RotationsState> {
                         </Text>
                       </Tag>
                       <div className={cx('header-plus-content')}>
-                        <TransitionGroup className={cx('rotations')}>
+                        <TransitionGroup className={'u-position-relative'}>
                           {layer.shifts.map(({ shiftId, isPreview, events }, rotationIndex) => (
                             <CSSTransition
                               key={rotationIndex}
@@ -194,24 +196,24 @@ class _Rotations extends Component<RotationsProps, RotationsState> {
                 ))}
               </TransitionGroup>
             ) : (
-              <div className={cx('layers')}>
+              <div className="u-position-relative">
                 <TimelineMarks />
                 <div className={cx('current-time')} style={{ left: `${currentTimeX * 100}%` }} />
                 <div id="layer1" className={cx('layer', 'layer-first')}>
-                  <Tag className={cx('layer-title')} color="secondary">
-                    <Text type="secondary"> Layer 1</Text>
+                  <Tag className={cx('layer-title')} color="var(--background-canvas)">
+                    <Text size="small" type="primary">
+                      Layer 1
+                    </Text>
                   </Tag>
                   <div className={cx('header-plus-content')}>
-                    <div className={cx('rotations')}>
-                      <Rotation
-                        onClick={(shiftStart, shiftEnd) => {
-                          this.handleAddLayer(nextPriority, shiftStart, shiftEnd);
-                        }}
-                        events={[]}
-                        layerIndex={0}
-                        rotationIndex={0}
-                      />
-                    </div>
+                    <Rotation
+                      onClick={(shiftStart, shiftEnd) => {
+                        this.handleAddLayer(nextPriority, shiftStart, shiftEnd);
+                      }}
+                      events={[]}
+                      layerIndex={0}
+                      rotationIndex={0}
+                    />
                   </div>
                 </div>
               </div>
diff --git a/grafana-plugin/src/containers/Rotations/ScheduleFinal.tsx b/grafana-plugin/src/containers/Rotations/ScheduleFinal.tsx
index a2f3743bf2..0d75baa51c 100644
--- a/grafana-plugin/src/containers/Rotations/ScheduleFinal.tsx
+++ b/grafana-plugin/src/containers/Rotations/ScheduleFinal.tsx
@@ -79,20 +79,18 @@ const _ScheduleFinal: FC<ScheduleFinalProps> = observer(
         {!simplified && (
           <div className={cx('header')}>
             <HorizontalGroup justify="space-between">
-              <div className={cx('title')}>
-                <Text.Title level={4} type="primary">
-                  Final schedule
-                </Text.Title>
-              </div>
+              <Text.Title level={5} type="primary">
+                Final schedule
+              </Text.Title>
             </HorizontalGroup>
           </div>
         )}
         <div className={cx('header-plus-content')}>
           {rows.map(({ startDate }, index) => (
-            <TransitionGroup key={index} className={cx('rotations', 'layer', 'layer-first')}>
-              <TimelineMarks startDate={startDate} />
+            <TransitionGroup key={index} className={cx('u-position-relative', 'layer', 'layer-first')}>
+              <TimelineMarks startDate={startDate} withBorderBottom={index !== rows.length - 1} />
               <div
-                className={cx('current-time', 'CURRENT_TIME')}
+                className={cx('current-time')}
                 style={{
                   left: `${
                     getCurrentTimeX(
diff --git a/grafana-plugin/src/containers/Rotations/ScheduleOverrides.tsx b/grafana-plugin/src/containers/Rotations/ScheduleOverrides.tsx
index a1c66809d4..6bdd2fcfd6 100644
--- a/grafana-plugin/src/containers/Rotations/ScheduleOverrides.tsx
+++ b/grafana-plugin/src/containers/Rotations/ScheduleOverrides.tsx
@@ -21,6 +21,7 @@ import {
   SHIFT_SWAP_COLOR,
 } from 'models/schedule/schedule.helpers';
 import { Schedule, Shift, ShiftEvents, ShiftSwap } from 'models/schedule/schedule.types';
+import { getCurrentTimeX } from 'pages/schedule/Schedule.helpers';
 import { WithStoreProps } from 'state/types';
 import { withMobXProviderContext } from 'state/withStore';
 import { UserActions } from 'utils/authorization/authorization';
@@ -80,14 +81,12 @@ class _ScheduleOverrides extends Component<ScheduleOverridesProps, ScheduleOverr
 
     const shiftSwaps = getShiftSwapsFromStore(store, scheduleId, store.timezoneStore.calendarStartDate);
 
-    const base = scheduleViewToDaysInOneRow[store.scheduleStore.scheduleView] * 24 * 60; // in minutes
-    const diff = store.timezoneStore.currentDateInSelectedTimezone.diff(
+    const currentTimeX = getCurrentTimeX(
+      store.timezoneStore.currentDateInSelectedTimezone,
       store.timezoneStore.calendarStartDate,
-      'minutes'
+      scheduleViewToDaysInOneRow[store.scheduleStore.scheduleView] * 24 * 60
     );
 
-    const currentTimeX = diff / base;
-
     const currentTimeHidden = currentTimeX < 0 || currentTimeX > 1;
 
     const schedule = store.scheduleStore.items[scheduleId];
@@ -99,11 +98,9 @@ class _ScheduleOverrides extends Component<ScheduleOverridesProps, ScheduleOverr
         <div id="overrides-list" className={cx('root')}>
           <div className={cx('header')}>
             <HorizontalGroup justify="space-between">
-              <div className={cx('title')}>
-                <Text.Title level={4} type="primary">
-                  Overrides and swaps
-                </Text.Title>
-              </div>
+              <Text.Title level={5} type="primary">
+                Overrides and swaps
+              </Text.Title>
               <HorizontalGroup>
                 <Button
                   variant="secondary"
@@ -132,11 +129,11 @@ class _ScheduleOverrides extends Component<ScheduleOverridesProps, ScheduleOverr
               </HorizontalGroup>
             </HorizontalGroup>
           </div>
-          <div className={cx('header-plus-content')}>
+          <div className="u-position-relative">
             {!currentTimeHidden && <div className={cx('current-time')} style={{ left: `${currentTimeX * 100}%` }} />}
             <TimelineMarks />
             {shiftSwaps && shiftSwaps.length ? (
-              <TransitionGroup className={cx('rotations', 'layer', 'layer-first')}>
+              <TransitionGroup className={cx('layer', 'layer-first')}>
                 <Tag className={cx('layer-title')} color="var(--background-canvas)">
                   <Text type="primary" size="small">
                     Swaps
@@ -160,7 +157,7 @@ class _ScheduleOverrides extends Component<ScheduleOverridesProps, ScheduleOverr
                 ))}
               </TransitionGroup>
             ) : null}
-            <TransitionGroup className={cx('rotations', 'layer', { 'layer-first': !shiftSwaps || !shiftSwaps.length })}>
+            <TransitionGroup className={cx('layer', { 'layer-first': !shiftSwaps || !shiftSwaps.length })}>
               <Tag className={cx('layer-title')} color="var(--background-canvas)">
                 <Text type="primary" size="small">
                   Overrides
diff --git a/grafana-plugin/src/containers/TimelineMarks/TimelineMarks.module.scss b/grafana-plugin/src/containers/TimelineMarks/TimelineMarks.module.scss
index bd73516db3..c4198028ca 100644
--- a/grafana-plugin/src/containers/TimelineMarks/TimelineMarks.module.scss
+++ b/grafana-plugin/src/containers/TimelineMarks/TimelineMarks.module.scss
@@ -1,7 +1,6 @@
 .root {
   position: absolute;
   display: flex;
-  z-index: 1;
   width: 100%;
   top: 0;
   bottom: 0;
@@ -11,6 +10,10 @@
   pointer-events: none;
 }
 
+.root--borderBottom {
+  border-bottom: var(--border-medium);
+}
+
 .weekday {
   width: calc(100% / 7);
   display: flex;
@@ -28,6 +31,14 @@
   }
 }
 
+.weekday:not(:last-child) {
+  border-right: var(--border-medium);
+}
+
+.weekday--weekEnd {
+  background: var(--background-disabled);
+}
+
 .weekday-title {
   width: 100%;
   text-align: center;
@@ -35,10 +46,6 @@
   flex-grow: 1;
 }
 
-.weekday:not(:last-child) .weekday-title {
-  border-right: var(--border-medium);
-}
-
 .weekday-times {
   width: 100%;
   display: flex;
diff --git a/grafana-plugin/src/containers/TimelineMarks/TimelineMarks.tsx b/grafana-plugin/src/containers/TimelineMarks/TimelineMarks.tsx
index 6cd2917898..08ac985c0d 100644
--- a/grafana-plugin/src/containers/TimelineMarks/TimelineMarks.tsx
+++ b/grafana-plugin/src/containers/TimelineMarks/TimelineMarks.tsx
@@ -13,6 +13,7 @@ import styles from './TimelineMarks.module.scss';
 interface TimelineMarksProps {
   debug?: boolean;
   startDate?: dayjs.Dayjs;
+  withBorderBottom?: boolean;
 }
 
 const cx = cn.bind(styles);
@@ -22,7 +23,7 @@ export const TimelineMarks: FC<TimelineMarksProps> = observer((props) => {
     timezoneStore: { currentDateInSelectedTimezone, calendarStartDate },
     scheduleStore,
   } = useStore();
-  const { debug, startDate: propsStartDate } = props;
+  const { debug, startDate: propsStartDate, withBorderBottom = false } = props;
 
   const startDate = propsStartDate || calendarStartDate;
 
@@ -55,7 +56,7 @@ export const TimelineMarks: FC<TimelineMarksProps> = observer((props) => {
   }, [days]);
 
   return (
-    <div className={cx('root')}>
+    <div className={cx('root', { 'root--borderBottom': withBorderBottom })}>
       {debug && (
         <svg version="1.1" width="100%" height="6px" xmlns="http://www.w3.org/2000/svg" className={cx('debug-scale')}>
           {cuts.map((_cut, index) => (
@@ -75,10 +76,10 @@ export const TimelineMarks: FC<TimelineMarksProps> = observer((props) => {
       {momentsToRender.map((m, i) => {
         const isCurrentDay = currentDateInSelectedTimezone.isSame(m.moment, 'day');
 
-        // const isWeekend = m.moment.day() == 0 || m.moment.day() === 6;
+        const isWeekend = m.moment.day() === 0 || m.moment.day() === 6;
 
         return (
-          <div key={i} className={cx('weekday' /* , { 'weekday--weekend': isWeekend } */)}>
+          <div key={i} className={cx('weekday', { 'weekday--weekEnd': isWeekend })}>
             <div className={cx('weekday-title')}>
               <Text type={isCurrentDay ? 'primary' : 'secondary'}>
                 {m.moment.date() === 1 ? m.moment.format('ddd D MMM') : m.moment.format('ddd D')}
diff --git a/grafana-plugin/src/pages/schedule/Schedule.tsx b/grafana-plugin/src/pages/schedule/Schedule.tsx
index 074d1e0fed..eea4035fff 100644
--- a/grafana-plugin/src/pages/schedule/Schedule.tsx
+++ b/grafana-plugin/src/pages/schedule/Schedule.tsx
@@ -41,6 +41,7 @@ import { Event, Layer, Schedule, ScheduleType, ScheduleView, Shift, ShiftSwap }
 import { UserHelper } from 'models/user/user.helpers';
 import { PageProps, WithStoreProps } from 'state/types';
 import { withMobXProviderContext } from 'state/withStore';
+import { scrollToElement } from 'utils/DOM';
 import { isUserActionAllowed, UserActions } from 'utils/authorization/authorization';
 import { PLUGIN_ROOT } from 'utils/consts';
 
@@ -229,9 +230,7 @@ class _SchedulePage extends React.Component<SchedulePageProps, SchedulePageState
                                       key={index}
                                       label={`L${layer.priority} rotation`}
                                       onClick={() => {
-                                        document
-                                          .getElementById('rotations')
-                                          .scrollIntoView({ behavior: 'instant', block: 'center' });
+                                        scrollToElement(document.getElementById('rotations'));
 
                                         this.handleShowRotationForm('new', layer.priority);
                                       }}
@@ -240,9 +239,7 @@ class _SchedulePage extends React.Component<SchedulePageProps, SchedulePageState
                                   <Menu.Item
                                     label="New layer with rotation"
                                     onClick={() => {
-                                      document
-                                        .getElementById('rotations')
-                                        .scrollIntoView({ behavior: 'instant', block: 'center' });
+                                      scrollToElement(document.getElementById('rotations'));
 
                                       this.handleShowRotationForm('new', nextPriority);
                                     }}
@@ -250,19 +247,13 @@ class _SchedulePage extends React.Component<SchedulePageProps, SchedulePageState
                                   <Menu.Item
                                     label="Shift swap request"
                                     onClick={() => {
-                                      document
-                                        .getElementById('overrides-list')
-                                        .scrollIntoView({ behavior: 'instant', block: 'center' });
-
                                       this.handleShowShiftSwapForm('new');
                                     }}
                                   />
                                   <Menu.Item
                                     label="Override"
                                     onClick={() => {
-                                      document
-                                        .getElementById('overrides-list')
-                                        .scrollIntoView({ behavior: 'instant', block: 'center' });
+                                      scrollToElement(document.getElementById('overrides-list'));
 
                                       this.handleShowOverridesForm('new');
                                     }}
diff --git a/grafana-plugin/src/utils/DOM.ts b/grafana-plugin/src/utils/DOM.ts
index 2fc58cb507..fcf08d8eff 100644
--- a/grafana-plugin/src/utils/DOM.ts
+++ b/grafana-plugin/src/utils/DOM.ts
@@ -18,6 +18,10 @@ export const waitForElement = (selector: string) => {
   });
 };
 
+export const scrollToElement = (element: Element, behavior: ScrollBehavior = 'instant' as ScrollBehavior) => {
+  document.getElementById('rotations').scrollIntoView({ behavior, block: 'center' });
+};
+
 export const getCoords = (elem) => {
   // crossbrowser version
   const box = elem.getBoundingClientRect();

From 595ceb2791a1f7dc71fcd6e2615e0b2c274d7ba6 Mon Sep 17 00:00:00 2001
From: Maxim Mordasov <maxim.mordasov@grafana.com>
Date: Tue, 21 May 2024 16:46:16 +0100
Subject: [PATCH 09/28] polixh schedules styling

---
 grafana-plugin/src/assets/style/vars.css                    | 2 +-
 grafana-plugin/src/containers/Rotation/Rotation.module.css  | 2 +-
 .../src/containers/Rotations/Rotations.module.css           | 2 +-
 .../src/containers/ScheduleSlot/ScheduleSlot.module.css     | 6 ++----
 .../src/containers/UsersTimezones/UsersTimezones.tsx        | 2 +-
 grafana-plugin/src/pages/schedule/Schedule.tsx              | 2 +-
 6 files changed, 7 insertions(+), 9 deletions(-)

diff --git a/grafana-plugin/src/assets/style/vars.css b/grafana-plugin/src/assets/style/vars.css
index 725d1a0e4b..d38c7811de 100644
--- a/grafana-plugin/src/assets/style/vars.css
+++ b/grafana-plugin/src/assets/style/vars.css
@@ -34,7 +34,7 @@
   --background-canvas: #f4f5f5;
   --background-primary: #fff;
   --background-secondary: #f4f5f5;
-  --background-disabled: rgba(204, 204, 220, 0.04);
+  --background-disabled: rgba(204, 204, 220, 0.11);
   --border-medium-color: rgba(36, 41, 46, 0.3);
   --border-medium: 1px solid rgba(36, 41, 46, 0.3);
   --border-strong: 1px solid rgba(36, 41, 46, 0.4);
diff --git a/grafana-plugin/src/containers/Rotation/Rotation.module.css b/grafana-plugin/src/containers/Rotation/Rotation.module.css
index b217c5b50b..ed1d8f1f17 100644
--- a/grafana-plugin/src/containers/Rotation/Rotation.module.css
+++ b/grafana-plugin/src/containers/Rotation/Rotation.module.css
@@ -40,7 +40,7 @@
 }
 
 .slots__animate {
-  /* transition: transform 500ms ease; TODO either remove or uncomment */
+  /*  transition: transform 500ms ease; */
 }
 
 .current-time {
diff --git a/grafana-plugin/src/containers/Rotations/Rotations.module.css b/grafana-plugin/src/containers/Rotations/Rotations.module.css
index bb53d23392..4ba49e4855 100644
--- a/grafana-plugin/src/containers/Rotations/Rotations.module.css
+++ b/grafana-plugin/src/containers/Rotations/Rotations.module.css
@@ -21,7 +21,7 @@
 }
 
 .layer {
-  padding-bottom: 10px;
+  padding-bottom: 8px;
 }
 
 .layer-first {
diff --git a/grafana-plugin/src/containers/ScheduleSlot/ScheduleSlot.module.css b/grafana-plugin/src/containers/ScheduleSlot/ScheduleSlot.module.css
index 6243b495f1..82e4f38bd8 100644
--- a/grafana-plugin/src/containers/ScheduleSlot/ScheduleSlot.module.css
+++ b/grafana-plugin/src/containers/ScheduleSlot/ScheduleSlot.module.css
@@ -5,7 +5,7 @@
   position: relative;
   display: flex;
   overflow: hidden;
-  margin: 0 1px;
+  margin-right: 1px;
   padding: 4px;
   align-items: center;
   transition: opacity 0.2s ease;
@@ -34,9 +34,7 @@
 }
 
 .root__type_shift-swap {
-  border-radius: 10px;
-  background: #ff99002e;
-  height: 20px;
+  background: rgba(255, 153, 0, 0.18);
 }
 
 .no-user {
diff --git a/grafana-plugin/src/containers/UsersTimezones/UsersTimezones.tsx b/grafana-plugin/src/containers/UsersTimezones/UsersTimezones.tsx
index 7ec461ccb1..97a6ed602b 100644
--- a/grafana-plugin/src/containers/UsersTimezones/UsersTimezones.tsx
+++ b/grafana-plugin/src/containers/UsersTimezones/UsersTimezones.tsx
@@ -83,7 +83,7 @@ export const UsersTimezones: FC<UsersTimezonesProps> = observer((props) => {
           <HorizontalGroup justify="space-between">
             <HorizontalGroup>
               <div className={cx('title')}>
-                <Text.Title level={4} type="primary">
+                <Text.Title level={5} type="primary">
                   Schedule team and timezones
                 </Text.Title>
               </div>
diff --git a/grafana-plugin/src/pages/schedule/Schedule.tsx b/grafana-plugin/src/pages/schedule/Schedule.tsx
index eea4035fff..373c08c653 100644
--- a/grafana-plugin/src/pages/schedule/Schedule.tsx
+++ b/grafana-plugin/src/pages/schedule/Schedule.tsx
@@ -308,7 +308,7 @@ class _SchedulePage extends React.Component<SchedulePageProps, SchedulePageState
                               <Icon name="angle-right" />
                             </Button>
                           </HorizontalGroup>
-                          <Text.Title style={{ marginLeft: '8px', whiteSpace: 'nowrap' }} level={4} type="primary">
+                          <Text.Title style={{ marginLeft: '8px', whiteSpace: 'nowrap' }} level={5} type="primary">
                             {store.timezoneStore.calendarStartDate.format('DD MMM')} -{' '}
                             {store.timezoneStore.calendarStartDate
                               .add(

From 7b3e232022840e321beec880c76db4e976b5c4f1 Mon Sep 17 00:00:00 2001
From: Maxim Mordasov <maxim.mordasov@grafana.com>
Date: Wed, 22 May 2024 14:18:12 +0100
Subject: [PATCH 10/28] minor polishing

---
 .../containers/RotationForm/RotationForm.tsx  |  3 +-
 .../RotationForm/ScheduleOverrideForm.tsx     |  3 +-
 .../containers/Rotations/Rotations.module.css |  1 -
 .../containers/Rotations/ScheduleFinal.tsx    | 27 ++++++++++----
 .../containers/Rotations/SchedulePersonal.tsx | 36 +++++++++++++------
 .../src/models/schedule/schedule.ts           |  9 ++---
 .../src/pages/schedule/Schedule.tsx           | 13 ++++---
 .../src/pages/schedules/Schedules.tsx         |  9 +++--
 8 files changed, 68 insertions(+), 33 deletions(-)

diff --git a/grafana-plugin/src/containers/RotationForm/RotationForm.tsx b/grafana-plugin/src/containers/RotationForm/RotationForm.tsx
index 498fb4fa09..4958285d24 100644
--- a/grafana-plugin/src/containers/RotationForm/RotationForm.tsx
+++ b/grafana-plugin/src/containers/RotationForm/RotationForm.tsx
@@ -198,9 +198,10 @@ export const RotationForm = observer((props: RotationFormProps) => {
     } catch (err) {
       onError(err);
     } finally {
+      // wait until a scroll to the "Rotations" happened
       setTimeout(() => {
         setIsOpen(true);
-      }, 1000);
+      }, 100);
     }
   };
 
diff --git a/grafana-plugin/src/containers/RotationForm/ScheduleOverrideForm.tsx b/grafana-plugin/src/containers/RotationForm/ScheduleOverrideForm.tsx
index a125af4b49..d28e510a2a 100644
--- a/grafana-plugin/src/containers/RotationForm/ScheduleOverrideForm.tsx
+++ b/grafana-plugin/src/containers/RotationForm/ScheduleOverrideForm.tsx
@@ -171,9 +171,10 @@ export const ScheduleOverrideForm: FC<RotationFormProps> = (props) => {
     } catch (err) {
       onError(err);
     } finally {
+      // wait until a scroll to the "Overrides and swaps" happened
       setTimeout(() => {
         setIsOpen(true);
-      }, 500);
+      }, 100);
     }
   };
 
diff --git a/grafana-plugin/src/containers/Rotations/Rotations.module.css b/grafana-plugin/src/containers/Rotations/Rotations.module.css
index 4ba49e4855..ffabb48bc7 100644
--- a/grafana-plugin/src/containers/Rotations/Rotations.module.css
+++ b/grafana-plugin/src/containers/Rotations/Rotations.module.css
@@ -17,7 +17,6 @@
   top: 0;
   bottom: 0;
   z-index: 1;
-  transition: left 500ms ease;
 }
 
 .layer {
diff --git a/grafana-plugin/src/containers/Rotations/ScheduleFinal.tsx b/grafana-plugin/src/containers/Rotations/ScheduleFinal.tsx
index c92a64ce31..8adbb1873b 100644
--- a/grafana-plugin/src/containers/Rotations/ScheduleFinal.tsx
+++ b/grafana-plugin/src/containers/Rotations/ScheduleFinal.tsx
@@ -18,7 +18,7 @@ import {
   getTotalDaysToDisplay,
   scheduleViewToDaysInOneRow,
 } from 'models/schedule/schedule.helpers';
-import { Event, Schedule, ShiftSwap } from 'models/schedule/schedule.types';
+import { Event, Schedule, ScheduleView, ShiftSwap } from 'models/schedule/schedule.types';
 import { getCurrentTimeX } from 'pages/schedule/Schedule.helpers';
 import { WithStoreProps } from 'state/types';
 import { withMobXProviderContext } from 'state/withStore';
@@ -38,14 +38,27 @@ interface ScheduleFinalProps extends WithStoreProps {
   disabled?: boolean;
   filters: ScheduleFiltersType;
   onSlotClick?: (event: Event) => void;
+  scheduleView?: ScheduleView;
 }
 
 const _ScheduleFinal: FC<ScheduleFinalProps> = observer(
-  ({ store, simplified, scheduleId, filters, onShowShiftSwapForm, onShowOverrideForm, onSlotClick }) => {
+  ({
+    store,
+    simplified,
+    scheduleId,
+    filters,
+    onShowShiftSwapForm,
+    onShowOverrideForm,
+    onSlotClick,
+    scheduleView: propsScheduleView,
+  }) => {
     const {
       timezoneStore: { currentDateInSelectedTimezone, calendarStartDate },
+      scheduleStore: { scheduleView: storeScheduleView },
     } = store;
 
+    const scheduleView = propsScheduleView || storeScheduleView;
+
     const shifts = flattenShiftEvents(getShiftsFromStore(store, scheduleId, calendarStartDate));
 
     const layers = getLayersFromStore(store, scheduleId, calendarStartDate);
@@ -59,15 +72,15 @@ const _ScheduleFinal: FC<ScheduleFinalProps> = observer(
     };
 
     const rows = useMemo(() => {
-      const totalDays = getTotalDaysToDisplay(store.scheduleStore.scheduleView, calendarStartDate);
+      const totalDays = getTotalDaysToDisplay(scheduleView, calendarStartDate);
       const rows = [];
-      for (let i = 0; i < totalDays / scheduleViewToDaysInOneRow[store.scheduleStore.scheduleView]; i++) {
+      for (let i = 0; i < totalDays / scheduleViewToDaysInOneRow[scheduleView]; i++) {
         rows.push({
-          startDate: calendarStartDate.add(scheduleViewToDaysInOneRow[store.scheduleStore.scheduleView] * i, 'days'),
+          startDate: calendarStartDate.add(scheduleViewToDaysInOneRow[scheduleView] * i, 'days'),
         });
       }
       return rows;
-    }, [calendarStartDate, store.scheduleStore.scheduleView]);
+    }, [calendarStartDate, scheduleView]);
 
     return (
       <div className={cx('root')}>
@@ -91,7 +104,7 @@ const _ScheduleFinal: FC<ScheduleFinalProps> = observer(
                     getCurrentTimeX(
                       currentDateInSelectedTimezone,
                       startDate,
-                      scheduleViewToDaysInOneRow[store.scheduleStore.scheduleView] * 24 * 60
+                      scheduleViewToDaysInOneRow[scheduleView] * 24 * 60
                     ) * 100
                   }%`,
                 }}
diff --git a/grafana-plugin/src/containers/Rotations/SchedulePersonal.tsx b/grafana-plugin/src/containers/Rotations/SchedulePersonal.tsx
index f4b95311c7..7faea66ebd 100644
--- a/grafana-plugin/src/containers/Rotations/SchedulePersonal.tsx
+++ b/grafana-plugin/src/containers/Rotations/SchedulePersonal.tsx
@@ -11,10 +11,15 @@ import { Text } from 'components/Text/Text';
 import { Rotation } from 'containers/Rotation/Rotation';
 import { TimelineMarks } from 'containers/TimelineMarks/TimelineMarks';
 import { ActionKey } from 'models/loader/action-keys';
-import { getColorForSchedule, getPersonalShiftsFromStore } from 'models/schedule/schedule.helpers';
-import { Event } from 'models/schedule/schedule.types';
+import {
+  getColorForSchedule,
+  getPersonalShiftsFromStore,
+  getTotalDaysToDisplay,
+  scheduleViewToDaysInOneRow,
+} from 'models/schedule/schedule.helpers';
+import { Event, ScheduleView } from 'models/schedule/schedule.types';
 import { ApiSchemas } from 'network/oncall-api/api.types';
-import { getStartOfWeekBasedOnCurrentDate } from 'pages/schedule/Schedule.helpers';
+import { getCurrentTimeX, getStartOfWeekBasedOnCurrentDate } from 'pages/schedule/Schedule.helpers';
 import { useStore } from 'state/useStore';
 import { PLUGIN_ROOT } from 'utils/consts';
 import { useIsLoading } from 'utils/hooks';
@@ -40,7 +45,7 @@ const _SchedulePersonal: FC<SchedulePersonalProps> = observer(({ userPk, onSlotC
   }, [timezoneStore.selectedTimezoneOffset]);
 
   const updatePersonalEvents = () => {
-    scheduleStore.updatePersonalEvents(userStore.currentUserPk, timezoneStore.calendarStartDate, 9, true);
+    scheduleStore.updatePersonalEvents(userStore.currentUserPk, timezoneStore.calendarStartDate, true);
   };
 
   const handleTodayClick = () => {
@@ -48,12 +53,22 @@ const _SchedulePersonal: FC<SchedulePersonalProps> = observer(({ userPk, onSlotC
   };
 
   const handleLeftClick = () => {
-    timezoneStore.setCalendarStartDate(timezoneStore.calendarStartDate.subtract(7, 'day'));
+    timezoneStore.setCalendarStartDate(
+      timezoneStore.calendarStartDate.subtract(
+        getTotalDaysToDisplay(ScheduleView.OneWeek, store.timezoneStore.calendarStartDate),
+        'day'
+      )
+    );
     scheduleStore.updatePersonalEvents(userStore.currentUserPk, timezoneStore.calendarStartDate);
   };
 
   const handleRightClick = () => {
-    timezoneStore.setCalendarStartDate(timezoneStore.calendarStartDate.add(7, 'day'));
+    timezoneStore.setCalendarStartDate(
+      timezoneStore.calendarStartDate.add(
+        getTotalDaysToDisplay(ScheduleView.OneWeek, store.timezoneStore.calendarStartDate),
+        'day'
+      )
+    );
     scheduleStore.updatePersonalEvents(userStore.currentUserPk, timezoneStore.calendarStartDate);
   };
 
@@ -61,10 +76,11 @@ const _SchedulePersonal: FC<SchedulePersonalProps> = observer(({ userPk, onSlotC
     history.push(`${PLUGIN_ROOT}/schedules/${event.schedule?.id}`);
   };
 
-  const base = 7 * 24 * 60; // in minutes
-  const diff = timezoneStore.currentDateInSelectedTimezone.diff(timezoneStore.calendarStartDate, 'minutes');
-
-  const currentTimeX = diff / base;
+  const currentTimeX = getCurrentTimeX(
+    timezoneStore.currentDateInSelectedTimezone,
+    timezoneStore.calendarStartDate,
+    scheduleViewToDaysInOneRow[ScheduleView.OneWeek] * 24 * 60
+  );
 
   const shifts = getPersonalShiftsFromStore(store, userPk, timezoneStore.calendarStartDate);
 
diff --git a/grafana-plugin/src/models/schedule/schedule.ts b/grafana-plugin/src/models/schedule/schedule.ts
index a3beb72c50..d535e169f4 100644
--- a/grafana-plugin/src/models/schedule/schedule.ts
+++ b/grafana-plugin/src/models/schedule/schedule.ts
@@ -654,14 +654,11 @@ export class ScheduleStore extends BaseStore {
 
   @AutoLoadingState(ActionKey.UPDATE_PERSONAL_EVENTS)
   @action.bound
-  async updatePersonalEvents(
-    userPk: ApiSchemas['User']['pk'],
-    startMoment: dayjs.Dayjs,
-    days = 9,
-    isUpdateOnCallNow = false
-  ) {
+  async updatePersonalEvents(userPk: ApiSchemas['User']['pk'], startMoment: dayjs.Dayjs, isUpdateOnCallNow = false) {
     const fromString = getFromString(startMoment);
 
+    const days = getTotalDaysToDisplay(ScheduleView.OneWeek, this.rootStore.timezoneStore.calendarStartDate) + 1;
+
     const dayBefore = startMoment.subtract(1, 'day');
 
     const { is_oncall, schedules } = await makeRequest(`/schedules/current_user_events/`, {
diff --git a/grafana-plugin/src/pages/schedule/Schedule.tsx b/grafana-plugin/src/pages/schedule/Schedule.tsx
index 43264dc9b4..abd31b0e2d 100644
--- a/grafana-plugin/src/pages/schedule/Schedule.tsx
+++ b/grafana-plugin/src/pages/schedule/Schedule.tsx
@@ -20,7 +20,6 @@ import { RouteComponentProps, withRouter } from 'react-router-dom';
 
 import { PageErrorHandlingWrapper } from 'components/PageErrorHandlingWrapper/PageErrorHandlingWrapper';
 import { PluginLink } from 'components/PluginLink/PluginLink';
-import { RenderConditionally } from 'components/RenderConditionally/RenderConditionally';
 import { ScheduleFilters } from 'components/ScheduleFilters/ScheduleFilters';
 import { ScheduleFiltersType } from 'components/ScheduleFilters/ScheduleFilters.types';
 import { ScheduleQuality } from 'components/ScheduleQuality/ScheduleQuality';
@@ -247,6 +246,8 @@ class _SchedulePage extends React.Component<SchedulePageProps, SchedulePageState
                                   <Menu.Item
                                     label="Shift swap request"
                                     onClick={() => {
+                                      scrollToElement(document.getElementById('overrides-list'));
+
                                       this.handleShowShiftSwapForm('new');
                                     }}
                                   />
@@ -368,7 +369,8 @@ class _SchedulePage extends React.Component<SchedulePageProps, SchedulePageState
                             }
                       }
                     />
-                    <RenderConditionally shouldRender={scheduleView !== ScheduleView.OneMonth}>
+                    {/* we need to render to allow Rotations show rotaion modal form */}
+                    <div style={{ display: scheduleView === ScheduleView.OneMonth ? 'none' : 'block' }}>
                       <Rotations
                         scheduleId={scheduleId}
                         onCreate={this.refreshEventsAndClearPreview}
@@ -383,8 +385,9 @@ class _SchedulePage extends React.Component<SchedulePageProps, SchedulePageState
                         onShowShiftSwapForm={!shiftSwapIdToShowForm ? this.handleShowShiftSwapForm : undefined}
                         onSlotClick={shiftSwapIdToShowForm ? this.adjustShiftSwapForm : undefined}
                       />
-                    </RenderConditionally>
-                    <RenderConditionally shouldRender={scheduleView !== ScheduleView.OneMonth}>
+                    </div>
+                    {/* we need to render to allow ScheduleOverrides show overrides modal form */}
+                    <div style={{ display: scheduleView === ScheduleView.OneMonth ? 'none' : 'block' }}>
                       <ScheduleOverrides
                         scheduleId={scheduleId}
                         onCreate={this.refreshEventsAndClearPreview}
@@ -399,7 +402,7 @@ class _SchedulePage extends React.Component<SchedulePageProps, SchedulePageState
                         onShowShiftSwapForm={!shiftSwapIdToShowForm ? this.handleShowShiftSwapForm : undefined}
                         filters={filters}
                       />
-                    </RenderConditionally>
+                    </div>
                   </div>
                 </VerticalGroup>
               )}
diff --git a/grafana-plugin/src/pages/schedules/Schedules.tsx b/grafana-plugin/src/pages/schedules/Schedules.tsx
index 46a1382dd4..4712779217 100644
--- a/grafana-plugin/src/pages/schedules/Schedules.tsx
+++ b/grafana-plugin/src/pages/schedules/Schedules.tsx
@@ -23,7 +23,7 @@ import { TeamName } from 'containers/TeamName/TeamName';
 import { TimelineMarks } from 'containers/TimelineMarks/TimelineMarks';
 import { UserTimezoneSelect } from 'containers/UserTimezoneSelect/UserTimezoneSelect';
 import { WithPermissionControlTooltip } from 'containers/WithPermissionControl/WithPermissionControlTooltip';
-import { Schedule } from 'models/schedule/schedule.types';
+import { Schedule, ScheduleView } from 'models/schedule/schedule.types';
 import { getSlackChannelName } from 'models/slack_channel/slack_channel.helpers';
 import { WithStoreProps, PageProps } from 'state/types';
 import { withMobXProviderContext } from 'state/withStore';
@@ -188,7 +188,12 @@ class _SchedulesPage extends React.Component<SchedulesPageProps, SchedulesPageSt
     <div className={cx('schedule')}>
       <TimelineMarks />
       <div className={cx('rotations')}>
-        <ScheduleFinal simplified scheduleId={data.id} onSlotClick={this.getScheduleClickHandler(data.id)} />
+        <ScheduleFinal
+          scheduleView={ScheduleView.OneWeek}
+          simplified
+          scheduleId={data.id}
+          onSlotClick={this.getScheduleClickHandler(data.id)}
+        />
       </div>
     </div>
   );

From b1483e2d773d20ca0ab4eb3b37bd30bed297f4f0 Mon Sep 17 00:00:00 2001
From: Maxim Mordasov <maxim.mordasov@grafana.com>
Date: Thu, 23 May 2024 13:38:32 +0100
Subject: [PATCH 11/28] display pages/Schedules in 7 days mode always

---
 .../src/containers/Rotation/Rotation.tsx         | 13 +++++++++----
 .../src/containers/Rotations/ScheduleFinal.tsx   |  9 +++++++--
 .../containers/Rotations/SchedulePersonal.tsx    |  3 ++-
 .../src/containers/ScheduleSlot/ScheduleSlot.tsx | 10 +++++++---
 .../TimelineMarks/TimelineMarks.module.scss      | 11 -----------
 .../containers/TimelineMarks/TimelineMarks.tsx   | 11 +++++++----
 .../src/models/schedule/schedule.helpers.ts      |  6 +++---
 grafana-plugin/src/pages/schedules/Schedules.tsx | 16 ++++++----------
 8 files changed, 41 insertions(+), 38 deletions(-)

diff --git a/grafana-plugin/src/containers/Rotation/Rotation.tsx b/grafana-plugin/src/containers/Rotation/Rotation.tsx
index 1f5cc5988c..aae75ca627 100644
--- a/grafana-plugin/src/containers/Rotation/Rotation.tsx
+++ b/grafana-plugin/src/containers/Rotation/Rotation.tsx
@@ -10,7 +10,7 @@ import { ScheduleFiltersType } from 'components/ScheduleFilters/ScheduleFilters.
 import { Text } from 'components/Text/Text';
 import { ScheduleSlot } from 'containers/ScheduleSlot/ScheduleSlot';
 import { scheduleViewToDaysInOneRow } from 'models/schedule/schedule.helpers';
-import { Event, ShiftSwap } from 'models/schedule/schedule.types';
+import { Event, ScheduleView, ShiftSwap } from 'models/schedule/schedule.types';
 import { useStore } from 'state/useStore';
 
 import styles from './Rotation.module.css';
@@ -35,12 +35,13 @@ interface RotationProps {
   emptyText?: string;
   showScheduleNameAsSlotTitle?: boolean;
   startDate?: dayjs.Dayjs;
+  scheduleView?: ScheduleView;
 }
 
 export const Rotation: FC<RotationProps> = observer((props) => {
   const {
     timezoneStore: { calendarStartDate, getDateInSelectedTimezone },
-    scheduleStore,
+    scheduleStore: { scheduleView: storeScheduleView },
   } = useStore();
   const {
     events,
@@ -58,11 +59,14 @@ export const Rotation: FC<RotationProps> = observer((props) => {
     emptyText,
     showScheduleNameAsSlotTitle,
     startDate: propsStartDate,
+    scheduleView: propsScheduleView,
   } = props;
 
+  const scheduleView = propsScheduleView || storeScheduleView;
+
   const startDate = propsStartDate || calendarStartDate;
 
-  const days = scheduleViewToDaysInOneRow[scheduleStore.scheduleView];
+  const days = scheduleViewToDaysInOneRow[scheduleView];
 
   const [animate, _setAnimate] = useState<boolean>(true);
 
@@ -71,7 +75,7 @@ export const Rotation: FC<RotationProps> = observer((props) => {
     const x = event.clientX - rect.left; //x position within the element.
     const width = event.currentTarget.offsetWidth;
 
-    const dayOffset = Math.floor((x / width) * scheduleViewToDaysInOneRow[scheduleStore.scheduleView]);
+    const dayOffset = Math.floor((x / width) * scheduleViewToDaysInOneRow[scheduleView]);
 
     const shiftStart = startDate.add(dayOffset, 'day');
     const shiftEnd = shiftStart.add(1, 'day');
@@ -156,6 +160,7 @@ export const Rotation: FC<RotationProps> = observer((props) => {
               {events.map((event) => {
                 return (
                   <ScheduleSlot
+                    scheduleView={scheduleView}
                     key={hash(event)}
                     event={event}
                     color={propsColor || getColor(event)}
diff --git a/grafana-plugin/src/containers/Rotations/ScheduleFinal.tsx b/grafana-plugin/src/containers/Rotations/ScheduleFinal.tsx
index 8adbb1873b..73b478bb5e 100644
--- a/grafana-plugin/src/containers/Rotations/ScheduleFinal.tsx
+++ b/grafana-plugin/src/containers/Rotations/ScheduleFinal.tsx
@@ -96,7 +96,11 @@ const _ScheduleFinal: FC<ScheduleFinalProps> = observer(
         <div className={cx('header-plus-content')}>
           {rows.map(({ startDate }, index) => (
             <TransitionGroup key={index} className={cx('u-position-relative', 'layer', 'layer-first')}>
-              <TimelineMarks startDate={startDate} withBorderBottom={index !== rows.length - 1} />
+              <TimelineMarks
+                scheduleView={scheduleView}
+                startDate={startDate}
+                withBorderBottom={index !== rows.length - 1}
+              />
               <div
                 className={cx('current-time')}
                 style={{
@@ -114,6 +118,7 @@ const _ScheduleFinal: FC<ScheduleFinalProps> = observer(
                   return (
                     <CSSTransition key={index} timeout={DEFAULT_TRANSITION_TIMEOUT} classNames={{ ...styles }}>
                       <Rotation
+                        scheduleView={scheduleView}
                         startDate={startDate}
                         key={index}
                         events={events}
@@ -130,7 +135,7 @@ const _ScheduleFinal: FC<ScheduleFinalProps> = observer(
                 })
               ) : (
                 <CSSTransition key={0} timeout={DEFAULT_TRANSITION_TIMEOUT} classNames={{ ...styles }}>
-                  <Rotation startDate={calendarStartDate} events={[]} />
+                  <Rotation scheduleView={scheduleView} startDate={calendarStartDate} events={[]} />
                 </CSSTransition>
               )}
             </TransitionGroup>
diff --git a/grafana-plugin/src/containers/Rotations/SchedulePersonal.tsx b/grafana-plugin/src/containers/Rotations/SchedulePersonal.tsx
index 7faea66ebd..d74859dde8 100644
--- a/grafana-plugin/src/containers/Rotations/SchedulePersonal.tsx
+++ b/grafana-plugin/src/containers/Rotations/SchedulePersonal.tsx
@@ -134,13 +134,14 @@ const _SchedulePersonal: FC<SchedulePersonalProps> = observer(({ userPk, onSlotC
       </div>
       <div className={cx('header-plus-content')}>
         {!currentTimeHidden && <div className={cx('current-time')} style={{ left: `${currentTimeX * 100}%` }} />}
-        <TimelineMarks />
+        <TimelineMarks scheduleView={ScheduleView.OneWeek} />
         <TransitionGroup className={cx('rotations', 'layer', 'layer-first')}>
           {shifts?.length ? (
             shifts.map(({ events }, index) => {
               return (
                 <CSSTransition key={index} timeout={DEFAULT_TRANSITION_TIMEOUT} classNames={{ ...styles }}>
                   <Rotation
+                    scheduleView={ScheduleView.OneWeek}
                     simplified
                     key={index}
                     events={events}
diff --git a/grafana-plugin/src/containers/ScheduleSlot/ScheduleSlot.tsx b/grafana-plugin/src/containers/ScheduleSlot/ScheduleSlot.tsx
index 0d2399736c..a227b010a8 100644
--- a/grafana-plugin/src/containers/ScheduleSlot/ScheduleSlot.tsx
+++ b/grafana-plugin/src/containers/ScheduleSlot/ScheduleSlot.tsx
@@ -12,7 +12,7 @@ import { ScheduleFiltersType } from 'components/ScheduleFilters/ScheduleFilters.
 import { Text } from 'components/Text/Text';
 import { WorkingHours } from 'components/WorkingHours/WorkingHours';
 import { getShiftName, scheduleViewToDaysInOneRow, SHIFT_SWAP_COLOR } from 'models/schedule/schedule.helpers';
-import { Event, ShiftSwap } from 'models/schedule/schedule.types';
+import { Event, ScheduleView, ShiftSwap } from 'models/schedule/schedule.types';
 import { getTzOffsetString } from 'models/timezone/timezone.helpers';
 import { ApiSchemas } from 'network/oncall-api/api.types';
 import { useStore } from 'state/useStore';
@@ -31,6 +31,7 @@ interface ScheduleSlotProps {
   filters?: ScheduleFiltersType;
   onClick: (event: React.MouseEvent<HTMLDivElement>) => void;
   showScheduleNameAsSlotTitle?: boolean;
+  scheduleView?: ScheduleView;
 }
 
 const cx = cn.bind(styles);
@@ -38,7 +39,7 @@ const cx = cn.bind(styles);
 export const ScheduleSlot: FC<ScheduleSlotProps> = observer((props) => {
   const {
     timezoneStore: { getDateInSelectedTimezone },
-    scheduleStore,
+    scheduleStore: { scheduleView: storeScheduleView },
   } = useStore();
   const {
     event,
@@ -50,14 +51,17 @@ export const ScheduleSlot: FC<ScheduleSlotProps> = observer((props) => {
     filters,
     onClick,
     showScheduleNameAsSlotTitle,
+    scheduleView: propsScheduleView,
   } = props;
 
+  const scheduleView = propsScheduleView || storeScheduleView;
+
   const start = getDateInSelectedTimezone(event.start);
   const end = getDateInSelectedTimezone(event.end);
 
   const durationInSeconds = end.diff(start, 'seconds');
 
-  const rowInSeconds = scheduleViewToDaysInOneRow[scheduleStore.scheduleView] * 24 * 60 * 60;
+  const rowInSeconds = scheduleViewToDaysInOneRow[scheduleView] * 24 * 60 * 60;
 
   const width = Math.max(durationInSeconds / rowInSeconds, 0);
 
diff --git a/grafana-plugin/src/containers/TimelineMarks/TimelineMarks.module.scss b/grafana-plugin/src/containers/TimelineMarks/TimelineMarks.module.scss
index c4198028ca..d572d3fc14 100644
--- a/grafana-plugin/src/containers/TimelineMarks/TimelineMarks.module.scss
+++ b/grafana-plugin/src/containers/TimelineMarks/TimelineMarks.module.scss
@@ -15,20 +15,9 @@
 }
 
 .weekday {
-  width: calc(100% / 7);
   display: flex;
   flex-direction: column;
   justify-content: space-between;
-
-  &--weekend {
-    background: repeating-linear-gradient(
-      -45deg,
-      var(--background-canvas),
-      var(--background-canvas) 5px,
-      transparent 5px,
-      transparent 8px
-    );
-  }
 }
 
 .weekday:not(:last-child) {
diff --git a/grafana-plugin/src/containers/TimelineMarks/TimelineMarks.tsx b/grafana-plugin/src/containers/TimelineMarks/TimelineMarks.tsx
index 08ac985c0d..605df70941 100644
--- a/grafana-plugin/src/containers/TimelineMarks/TimelineMarks.tsx
+++ b/grafana-plugin/src/containers/TimelineMarks/TimelineMarks.tsx
@@ -6,6 +6,7 @@ import { observer } from 'mobx-react';
 
 import { Text } from 'components/Text/Text';
 import { scheduleViewToDaysInOneRow } from 'models/schedule/schedule.helpers';
+import { ScheduleView } from 'models/schedule/schedule.types';
 import { useStore } from 'state/useStore';
 
 import styles from './TimelineMarks.module.scss';
@@ -14,6 +15,7 @@ interface TimelineMarksProps {
   debug?: boolean;
   startDate?: dayjs.Dayjs;
   withBorderBottom?: boolean;
+  scheduleView?: ScheduleView;
 }
 
 const cx = cn.bind(styles);
@@ -21,13 +23,14 @@ const cx = cn.bind(styles);
 export const TimelineMarks: FC<TimelineMarksProps> = observer((props) => {
   const {
     timezoneStore: { currentDateInSelectedTimezone, calendarStartDate },
-    scheduleStore,
+    scheduleStore: { scheduleView: storeScheduleView },
   } = useStore();
-  const { debug, startDate: propsStartDate, withBorderBottom = false } = props;
+  const { debug, startDate: propsStartDate, withBorderBottom = false, scheduleView: propsScheduleView } = props;
 
   const startDate = propsStartDate || calendarStartDate;
+  const scheduleView = propsScheduleView || storeScheduleView;
 
-  const days = scheduleViewToDaysInOneRow[scheduleStore.scheduleView];
+  const days = scheduleViewToDaysInOneRow[scheduleView];
 
   const momentsToRender = useMemo(() => {
     const hoursToSplit = 12;
@@ -79,7 +82,7 @@ export const TimelineMarks: FC<TimelineMarksProps> = observer((props) => {
         const isWeekend = m.moment.day() === 0 || m.moment.day() === 6;
 
         return (
-          <div key={i} className={cx('weekday', { 'weekday--weekEnd': isWeekend })}>
+          <div key={i} className={cx('weekday', { 'weekday--weekEnd': isWeekend })} style={{ width: `${100 / days}%` }}>
             <div className={cx('weekday-title')}>
               <Text type={isCurrentDay ? 'primary' : 'secondary'}>
                 {m.moment.date() === 1 ? m.moment.format('ddd D MMM') : m.moment.format('ddd D')}
diff --git a/grafana-plugin/src/models/schedule/schedule.helpers.ts b/grafana-plugin/src/models/schedule/schedule.helpers.ts
index e22de095a3..bb390e6cc9 100644
--- a/grafana-plugin/src/models/schedule/schedule.helpers.ts
+++ b/grafana-plugin/src/models/schedule/schedule.helpers.ts
@@ -423,13 +423,13 @@ export const enrichOverrides = (
 
 const L1_COLORS = ['#3D71D9', '#6D609C', '#4D3B72', '#8214A0'];
 
-const L2_COLORS = ['#3CB979', '#188343', '#84362A', '#521913'];
+const L2_COLORS = ['#517A00', '#3F6833', '#84362A', '#521913'];
 
 const L3_COLORS = ['#377277', '#638282', '#364E4E', '#423220'];
 
-const OVERRIDE_COLORS = ['#C69B06', '#C2C837'];
+const OVERRIDE_COLORS = ['#C69B06'];
 
-export const SHIFT_SWAP_COLOR = '#C69B06';
+export const SHIFT_SWAP_COLOR = '#D66310';
 
 const COLORS = [L1_COLORS, L2_COLORS, L3_COLORS];
 
diff --git a/grafana-plugin/src/pages/schedules/Schedules.tsx b/grafana-plugin/src/pages/schedules/Schedules.tsx
index 4712779217..f6d490cd77 100644
--- a/grafana-plugin/src/pages/schedules/Schedules.tsx
+++ b/grafana-plugin/src/pages/schedules/Schedules.tsx
@@ -20,7 +20,6 @@ import { ScheduleFinal } from 'containers/Rotations/ScheduleFinal';
 import { SchedulePersonal } from 'containers/Rotations/SchedulePersonal';
 import { ScheduleForm } from 'containers/ScheduleForm/ScheduleForm';
 import { TeamName } from 'containers/TeamName/TeamName';
-import { TimelineMarks } from 'containers/TimelineMarks/TimelineMarks';
 import { UserTimezoneSelect } from 'containers/UserTimezoneSelect/UserTimezoneSelect';
 import { WithPermissionControlTooltip } from 'containers/WithPermissionControl/WithPermissionControlTooltip';
 import { Schedule, ScheduleView } from 'models/schedule/schedule.types';
@@ -186,15 +185,12 @@ class _SchedulesPage extends React.Component<SchedulesPageProps, SchedulesPageSt
 
   renderSchedule = (data: Schedule) => (
     <div className={cx('schedule')}>
-      <TimelineMarks />
-      <div className={cx('rotations')}>
-        <ScheduleFinal
-          scheduleView={ScheduleView.OneWeek}
-          simplified
-          scheduleId={data.id}
-          onSlotClick={this.getScheduleClickHandler(data.id)}
-        />
-      </div>
+      <ScheduleFinal
+        scheduleView={ScheduleView.OneWeek}
+        simplified
+        scheduleId={data.id}
+        onSlotClick={this.getScheduleClickHandler(data.id)}
+      />
     </div>
   );
 

From 49551c8581f8c49545125b2fee2cc07617e56928 Mon Sep 17 00:00:00 2001
From: Maxim Mordasov <maxim.mordasov@grafana.com>
Date: Thu, 23 May 2024 15:08:41 +0100
Subject: [PATCH 12/28] request one week events from schedules list

---
 grafana-plugin/src/models/schedule/schedule.ts   |  7 ++++---
 grafana-plugin/src/pages/schedules/Schedules.tsx | 13 ++++---------
 2 files changed, 8 insertions(+), 12 deletions(-)

diff --git a/grafana-plugin/src/models/schedule/schedule.ts b/grafana-plugin/src/models/schedule/schedule.ts
index d535e169f4..24297a4fa5 100644
--- a/grafana-plugin/src/models/schedule/schedule.ts
+++ b/grafana-plugin/src/models/schedule/schedule.ts
@@ -124,7 +124,7 @@ export class ScheduleStore extends BaseStore {
   };
 
   @observable
-  scheduleView = ScheduleView.OneWeek;
+  scheduleView = ScheduleView.TwoWeeks;
 
   constructor(rootStore: RootStore) {
     super(rootStore);
@@ -533,11 +533,12 @@ export class ScheduleStore extends BaseStore {
   }
 
   @action.bound
-  async refreshEvents(scheduleId: string) {
+  async refreshEvents(scheduleId: string, scheduleView?: ScheduleView) {
     this.refreshEventsError = {};
     const startMoment = this.rootStore.timezoneStore.calendarStartDate;
 
-    const days = getTotalDaysToDisplay(this.scheduleView, this.rootStore.timezoneStore.calendarStartDate) + 1;
+    const days =
+      getTotalDaysToDisplay(scheduleView || this.scheduleView, this.rootStore.timezoneStore.calendarStartDate) + 1;
 
     try {
       const schedule = await this.loadItem(scheduleId);
diff --git a/grafana-plugin/src/pages/schedules/Schedules.tsx b/grafana-plugin/src/pages/schedules/Schedules.tsx
index f6d490cd77..4d9f01089e 100644
--- a/grafana-plugin/src/pages/schedules/Schedules.tsx
+++ b/grafana-plugin/src/pages/schedules/Schedules.tsx
@@ -167,7 +167,7 @@ class _SchedulesPage extends React.Component<SchedulesPageProps, SchedulesPageSt
 
     if (expanded && !expandedRowKeys.includes(data.id)) {
       this.setState({ expandedRowKeys: [...this.state.expandedRowKeys, data.id] }, () => {
-        this.props.store.scheduleStore.refreshEvents(data.id);
+        this.props.store.scheduleStore.refreshEvents(data.id, ScheduleView.OneWeek);
       });
     } else if (!expanded && expandedRowKeys.includes(data.id)) {
       const index = expandedRowKeys.indexOf(data.id);
@@ -180,7 +180,9 @@ class _SchedulesPage extends React.Component<SchedulesPageProps, SchedulesPageSt
   refreshExpandedSchedules = () => {
     const { expandedRowKeys } = this.state;
 
-    expandedRowKeys.forEach(this.props.store.scheduleStore.refreshEvents);
+    expandedRowKeys.forEach((key: Schedule['id']) => {
+      this.props.store.scheduleStore.refreshEvents(key, ScheduleView.OneWeek);
+    });
   };
 
   renderSchedule = (data: Schedule) => (
@@ -370,13 +372,6 @@ class _SchedulesPage extends React.Component<SchedulesPageProps, SchedulesPageSt
     const { store } = this.props;
     const page = store.filtersStore.currentTablePageNum[PAGE.Schedules];
 
-    store.scheduleStore.updatePersonalEvents(
-      store.userStore.currentUserPk,
-      store.timezoneStore.calendarStartDate,
-      9,
-      true
-    );
-
     // For removal we need to check if count is 1, which means we should change the page to the previous one
     const { results } = store.scheduleStore.getSearchResult();
     const newPage = results.length === 1 ? Math.max(page - 1, 1) : page;

From 1a1681f44bd147a6425fc67c1cc58d947457b8be Mon Sep 17 00:00:00 2001
From: Maxim Mordasov <maxim.mordasov@grafana.com>
Date: Thu, 23 May 2024 15:11:31 +0100
Subject: [PATCH 13/28] change scheduleView to one week by default

---
 grafana-plugin/src/models/schedule/schedule.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/grafana-plugin/src/models/schedule/schedule.ts b/grafana-plugin/src/models/schedule/schedule.ts
index 24297a4fa5..03cdc0788b 100644
--- a/grafana-plugin/src/models/schedule/schedule.ts
+++ b/grafana-plugin/src/models/schedule/schedule.ts
@@ -124,7 +124,7 @@ export class ScheduleStore extends BaseStore {
   };
 
   @observable
-  scheduleView = ScheduleView.TwoWeeks;
+  scheduleView = ScheduleView.OneWeek;
 
   constructor(rootStore: RootStore) {
     super(rootStore);

From 23b674a4e1b2495c85d34ec0698b7ac5185aaf9c Mon Sep 17 00:00:00 2001
From: Maxim Mordasov <maxim.mordasov@grafana.com>
Date: Thu, 23 May 2024 15:37:49 +0100
Subject: [PATCH 14/28] add Date picker to the schedule page

---
 .../src/models/schedule/schedule.helpers.ts   |  4 ++--
 .../src/pages/schedule/Schedule.tsx           | 22 +++++++++++++++++++
 2 files changed, 24 insertions(+), 2 deletions(-)

diff --git a/grafana-plugin/src/models/schedule/schedule.helpers.ts b/grafana-plugin/src/models/schedule/schedule.helpers.ts
index bb390e6cc9..e09eeceb13 100644
--- a/grafana-plugin/src/models/schedule/schedule.helpers.ts
+++ b/grafana-plugin/src/models/schedule/schedule.helpers.ts
@@ -427,9 +427,9 @@ const L2_COLORS = ['#517A00', '#3F6833', '#84362A', '#521913'];
 
 const L3_COLORS = ['#377277', '#638282', '#364E4E', '#423220'];
 
-const OVERRIDE_COLORS = ['#C69B06'];
+const OVERRIDE_COLORS = ['#EF9C48'];
 
-export const SHIFT_SWAP_COLOR = '#D66310';
+export const SHIFT_SWAP_COLOR = '#DC7532';
 
 const COLORS = [L1_COLORS, L2_COLORS, L3_COLORS];
 
diff --git a/grafana-plugin/src/pages/schedule/Schedule.tsx b/grafana-plugin/src/pages/schedule/Schedule.tsx
index abd31b0e2d..743c493ed2 100644
--- a/grafana-plugin/src/pages/schedule/Schedule.tsx
+++ b/grafana-plugin/src/pages/schedule/Schedule.tsx
@@ -12,6 +12,7 @@ import {
   Menu,
   ButtonGroup,
   RadioButtonGroup,
+  DatePicker,
 } from '@grafana/ui';
 import cn from 'classnames/bind';
 import dayjs from 'dayjs';
@@ -67,6 +68,7 @@ interface SchedulePageState {
   filters: ScheduleFiltersType;
   shiftSwapIdToShowForm?: ShiftSwap['id'] | 'new';
   shiftSwapParamsToShowForm?: Partial<ShiftSwap>;
+  calendarStartDatePickerIsOpen: boolean;
 }
 
 @observer
@@ -88,6 +90,7 @@ class _SchedulePage extends React.Component<SchedulePageProps, SchedulePageState
       showScheduleICalSettings: false,
       lastUpdated: 0,
       filters: { users: [] },
+      calendarStartDatePickerIsOpen: false,
     };
   }
 
@@ -130,6 +133,7 @@ class _SchedulePage extends React.Component<SchedulePageProps, SchedulePageState
       filters,
       shiftSwapIdToShowForm,
       shiftSwapParamsToShowForm,
+      calendarStartDatePickerIsOpen,
     } = this.state;
 
     const { isNotFoundError } = store.scheduleStore.refreshEventsError;
@@ -318,6 +322,24 @@ class _SchedulePage extends React.Component<SchedulePageProps, SchedulePageState
                               )
                               .format('DD MMM')}
                           </Text.Title>
+                          <IconButton
+                            aria-label="Set calendar start date"
+                            name="angle-down"
+                            onClick={() => {
+                              this.setState({ calendarStartDatePickerIsOpen: !calendarStartDatePickerIsOpen });
+                            }}
+                          />
+                          <DatePicker
+                            isOpen={calendarStartDatePickerIsOpen}
+                            value={store.timezoneStore.calendarStartDate.toDate()}
+                            onChange={(newDate) => {
+                              store.timezoneStore.setCalendarStartDate(
+                                getCalendarStartDate(dayjs(newDate), scheduleView)
+                              );
+                              this.handleDateRangeUpdate();
+                            }}
+                            onClose={() => this.setState({ calendarStartDatePickerIsOpen: false })}
+                          />
                         </HorizontalGroup>
                         <HorizontalGroup>
                           <RadioButtonGroup

From dac0e442ba3d14f7b33b8efe2d14e856ed8e32b8 Mon Sep 17 00:00:00 2001
From: Maxim Mordasov <maxim.mordasov@grafana.com>
Date: Fri, 24 May 2024 10:33:07 +0100
Subject: [PATCH 15/28] sligthly update layers colors

---
 grafana-plugin/src/models/schedule/schedule.helpers.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/grafana-plugin/src/models/schedule/schedule.helpers.ts b/grafana-plugin/src/models/schedule/schedule.helpers.ts
index e09eeceb13..be78e98ccf 100644
--- a/grafana-plugin/src/models/schedule/schedule.helpers.ts
+++ b/grafana-plugin/src/models/schedule/schedule.helpers.ts
@@ -423,7 +423,7 @@ export const enrichOverrides = (
 
 const L1_COLORS = ['#3D71D9', '#6D609C', '#4D3B72', '#8214A0'];
 
-const L2_COLORS = ['#517A00', '#3F6833', '#84362A', '#521913'];
+const L2_COLORS = ['#299C46', '#517A00', '#84362A', '#521913'];
 
 const L3_COLORS = ['#377277', '#638282', '#364E4E', '#423220'];
 

From 1a2b954a4231500a0b34f05c0e5a0182aa2ff0ac Mon Sep 17 00:00:00 2001
From: Maxim Mordasov <maxim.mordasov@grafana.com>
Date: Fri, 24 May 2024 13:00:59 +0100
Subject: [PATCH 16/28] change shift swaps appearance

---
 .../src/containers/ScheduleSlot/ScheduleSlot.tsx   | 14 +++++++++++++-
 1 file changed, 13 insertions(+), 1 deletion(-)

diff --git a/grafana-plugin/src/containers/ScheduleSlot/ScheduleSlot.tsx b/grafana-plugin/src/containers/ScheduleSlot/ScheduleSlot.tsx
index a227b010a8..a187c697e2 100644
--- a/grafana-plugin/src/containers/ScheduleSlot/ScheduleSlot.tsx
+++ b/grafana-plugin/src/containers/ScheduleSlot/ScheduleSlot.tsx
@@ -268,8 +268,13 @@ const RegularEvent = (props: RegularEventProps) => {
         const title = isShiftSwap ? 'Shift swap' : showScheduleNameAsSlotTitle ? schedule?.name : getShiftName(shift);
 
         let backgroundColor = color;
+        let border = undefined;
         if (isShiftSwap) {
           backgroundColor = SHIFT_SWAP_COLOR;
+          if (!swap_request.user) {
+            backgroundColor = 'transparent';
+            border = `1px solid ${SHIFT_SWAP_COLOR}`;
+          }
         }
 
         const scheduleSlotContent = (
@@ -277,6 +282,7 @@ const RegularEvent = (props: RegularEventProps) => {
             className={cx('root', { root__inactive: inactive })}
             style={{
               backgroundColor,
+              border,
             }}
             onClick={swap_request ? getShiftSwapClickHandler(swap_request.pk) : undefined}
             data-testid="schedule-slot"
@@ -291,7 +297,13 @@ const RegularEvent = (props: RegularEventProps) => {
               />
             )}
             <div className={cx('title')}>
-              {swap_request && !swap_request.user ? <Icon name="user-arrows" /> : userTitle}
+              {swap_request ? (
+                <HorizontalGroup>
+                  {swap_request.user ? swap_request.user.display_name + ' → ' + userTitle : userTitle + ' → ?'}
+                </HorizontalGroup>
+              ) : (
+                userTitle
+              )}
             </div>
           </div>
         );

From c32e3408ff9f52ff7f787a5538990f0651797a15 Mon Sep 17 00:00:00 2001
From: Maxim Mordasov <maxim.mordasov@grafana.com>
Date: Fri, 24 May 2024 13:27:12 +0100
Subject: [PATCH 17/28] change shift swaps appearance 2

---
 .../containers/ScheduleSlot/ScheduleSlot.module.css |  1 -
 .../src/containers/ScheduleSlot/ScheduleSlot.tsx    | 13 ++++---------
 2 files changed, 4 insertions(+), 10 deletions(-)

diff --git a/grafana-plugin/src/containers/ScheduleSlot/ScheduleSlot.module.css b/grafana-plugin/src/containers/ScheduleSlot/ScheduleSlot.module.css
index 82e4f38bd8..df1d8b15f4 100644
--- a/grafana-plugin/src/containers/ScheduleSlot/ScheduleSlot.module.css
+++ b/grafana-plugin/src/containers/ScheduleSlot/ScheduleSlot.module.css
@@ -52,7 +52,6 @@
 
 .title {
   z-index: 1;
-  color: #fff;
   font-size: 12px;
   width: 100%;
   font-weight: 500;
diff --git a/grafana-plugin/src/containers/ScheduleSlot/ScheduleSlot.tsx b/grafana-plugin/src/containers/ScheduleSlot/ScheduleSlot.tsx
index a187c697e2..6a53635283 100644
--- a/grafana-plugin/src/containers/ScheduleSlot/ScheduleSlot.tsx
+++ b/grafana-plugin/src/containers/ScheduleSlot/ScheduleSlot.tsx
@@ -269,11 +269,13 @@ const RegularEvent = (props: RegularEventProps) => {
 
         let backgroundColor = color;
         let border = undefined;
+        let textColor = '#fff';
         if (isShiftSwap) {
           backgroundColor = SHIFT_SWAP_COLOR;
           if (!swap_request.user) {
             backgroundColor = 'transparent';
             border = `1px solid ${SHIFT_SWAP_COLOR}`;
+            textColor = SHIFT_SWAP_COLOR;
           }
         }
 
@@ -283,6 +285,7 @@ const RegularEvent = (props: RegularEventProps) => {
             style={{
               backgroundColor,
               border,
+              color: textColor,
             }}
             onClick={swap_request ? getShiftSwapClickHandler(swap_request.pk) : undefined}
             data-testid="schedule-slot"
@@ -296,15 +299,7 @@ const RegularEvent = (props: RegularEventProps) => {
                 duration={duration}
               />
             )}
-            <div className={cx('title')}>
-              {swap_request ? (
-                <HorizontalGroup>
-                  {swap_request.user ? swap_request.user.display_name + ' → ' + userTitle : userTitle + ' → ?'}
-                </HorizontalGroup>
-              ) : (
-                userTitle
-              )}
-            </div>
+            <div className={cx('title')}>{swap_request && !swap_request.user ? userTitle + ' → ?' : userTitle}</div>
           </div>
         );
 

From e86bd6992bc5af73a0ce131ad164d74cfc008e8e Mon Sep 17 00:00:00 2001
From: Maxim Mordasov <maxim.mordasov@grafana.com>
Date: Fri, 24 May 2024 13:47:09 +0100
Subject: [PATCH 18/28] minor UI polishing

---
 grafana-plugin/src/containers/Rotation/Rotation.module.css  | 4 ----
 grafana-plugin/src/containers/Rotation/Rotation.tsx         | 6 ++----
 .../src/containers/Rotations/Rotations.module.css           | 2 ++
 grafana-plugin/src/containers/Rotations/Rotations.tsx       | 4 ++--
 .../src/containers/Rotations/ScheduleOverrides.tsx          | 4 ++--
 5 files changed, 8 insertions(+), 12 deletions(-)

diff --git a/grafana-plugin/src/containers/Rotation/Rotation.module.css b/grafana-plugin/src/containers/Rotation/Rotation.module.css
index ed1d8f1f17..d5fe3e415c 100644
--- a/grafana-plugin/src/containers/Rotation/Rotation.module.css
+++ b/grafana-plugin/src/containers/Rotation/Rotation.module.css
@@ -39,10 +39,6 @@
   opacity: 0.5;
 }
 
-.slots__animate {
-  /*  transition: transform 500ms ease; */
-}
-
 .current-time {
   position: absolute;
   left: 450px;
diff --git a/grafana-plugin/src/containers/Rotation/Rotation.tsx b/grafana-plugin/src/containers/Rotation/Rotation.tsx
index aae75ca627..6f56d6a02c 100644
--- a/grafana-plugin/src/containers/Rotation/Rotation.tsx
+++ b/grafana-plugin/src/containers/Rotation/Rotation.tsx
@@ -1,4 +1,4 @@
-import React, { FC, useMemo, useState } from 'react';
+import React, { FC, useMemo } from 'react';
 
 import { HorizontalGroup, LoadingPlaceholder } from '@grafana/ui';
 import cn from 'classnames/bind';
@@ -68,8 +68,6 @@ export const Rotation: FC<RotationProps> = observer((props) => {
 
   const days = scheduleViewToDaysInOneRow[scheduleView];
 
-  const [animate, _setAnimate] = useState<boolean>(true);
-
   const handleRotationClick = (event: React.MouseEvent<HTMLDivElement>) => {
     const rect = event.currentTarget.getBoundingClientRect();
     const x = event.clientX - rect.left; //x position within the element.
@@ -154,7 +152,7 @@ export const Rotation: FC<RotationProps> = observer((props) => {
         {events ? (
           events.length ? (
             <div
-              className={cx('slots', { slots__animate: animate, slots__transparent: transparent })}
+              className={cx('slots', { slots__transparent: transparent })}
               style={{ transform: `translate(${x * 100}%, 0)` }}
             >
               {events.map((event) => {
diff --git a/grafana-plugin/src/containers/Rotations/Rotations.module.css b/grafana-plugin/src/containers/Rotations/Rotations.module.css
index ffabb48bc7..d817965f0e 100644
--- a/grafana-plugin/src/containers/Rotations/Rotations.module.css
+++ b/grafana-plugin/src/containers/Rotations/Rotations.module.css
@@ -29,6 +29,8 @@
 
 .layer-title {
   margin: 8px;
+  border: var(--border-weak);
+  background-color: var(--background-canvas);
 }
 
 .rotations-plus-title {
diff --git a/grafana-plugin/src/containers/Rotations/Rotations.tsx b/grafana-plugin/src/containers/Rotations/Rotations.tsx
index 3d4a4e575e..564dda82bb 100644
--- a/grafana-plugin/src/containers/Rotations/Rotations.tsx
+++ b/grafana-plugin/src/containers/Rotations/Rotations.tsx
@@ -159,7 +159,7 @@ class _Rotations extends Component<RotationsProps, RotationsState> {
                 {layers.map((layer, layerIndex) => (
                   <CSSTransition key={layerIndex} timeout={DEFAULT_TRANSITION_TIMEOUT} classNames={{ ...styles }}>
                     <div id={`layer${layer.priority}`} className={cx('layer', { ['layer-first']: layerIndex === 0 })}>
-                      <Tag className={cx('layer-title')} color="var(--background-canvas)">
+                      <Tag className={cx('layer-title')}>
                         <Text size="small" type="primary">
                           Layer {layer.priority}
                         </Text>
@@ -200,7 +200,7 @@ class _Rotations extends Component<RotationsProps, RotationsState> {
                 <TimelineMarks />
                 <div className={cx('current-time')} style={{ left: `${currentTimeX * 100}%` }} />
                 <div id="layer1" className={cx('layer', 'layer-first')}>
-                  <Tag className={cx('layer-title')} color="var(--background-canvas)">
+                  <Tag className={cx('layer-title')}>
                     <Text size="small" type="primary">
                       Layer 1
                     </Text>
diff --git a/grafana-plugin/src/containers/Rotations/ScheduleOverrides.tsx b/grafana-plugin/src/containers/Rotations/ScheduleOverrides.tsx
index 6bdd2fcfd6..79ed8cbe94 100644
--- a/grafana-plugin/src/containers/Rotations/ScheduleOverrides.tsx
+++ b/grafana-plugin/src/containers/Rotations/ScheduleOverrides.tsx
@@ -134,7 +134,7 @@ class _ScheduleOverrides extends Component<ScheduleOverridesProps, ScheduleOverr
             <TimelineMarks />
             {shiftSwaps && shiftSwaps.length ? (
               <TransitionGroup className={cx('layer', 'layer-first')}>
-                <Tag className={cx('layer-title')} color="var(--background-canvas)">
+                <Tag className={cx('layer-title')}>
                   <Text type="primary" size="small">
                     Swaps
                   </Text>
@@ -158,7 +158,7 @@ class _ScheduleOverrides extends Component<ScheduleOverridesProps, ScheduleOverr
               </TransitionGroup>
             ) : null}
             <TransitionGroup className={cx('layer', { 'layer-first': !shiftSwaps || !shiftSwaps.length })}>
-              <Tag className={cx('layer-title')} color="var(--background-canvas)">
+              <Tag className={cx('layer-title')}>
                 <Text type="primary" size="small">
                   Overrides
                 </Text>

From e19ccb0eed5159bdf80514900a6def093a80d80e Mon Sep 17 00:00:00 2001
From: Maxim Mordasov <maxim.mordasov@grafana.com>
Date: Tue, 28 May 2024 14:38:14 +0100
Subject: [PATCH 19/28] fix merging schedules and  emotion

---
 .../containers/Rotation/Rotation.module.css   |   4 -
 .../containers/Rotations/Rotations.styles.ts  |  53 ++------
 .../src/containers/Rotations/Rotations.tsx    |  52 +++++---
 .../containers/Rotations/ScheduleFinal.tsx    |  30 +++--
 .../Rotations/ScheduleOverrides.tsx           |  36 ++---
 .../containers/Rotations/SchedulePersonal.tsx |  81 ++++++------
 .../ScheduleSlot/ScheduleSlot.module.css      | 125 ------------------
 .../containers/ScheduleSlot/ScheduleSlot.tsx  |   6 +-
 .../src/pages/schedule/Schedule.module.css    |  49 -------
 .../src/pages/schedule/Schedule.styles.ts     |   8 +-
 .../src/pages/schedule/Schedule.tsx           |   3 +-
 .../src/pages/schedules/Schedules.tsx         |  18 +--
 12 files changed, 144 insertions(+), 321 deletions(-)
 delete mode 100644 grafana-plugin/src/containers/ScheduleSlot/ScheduleSlot.module.css
 delete mode 100644 grafana-plugin/src/pages/schedule/Schedule.module.css

diff --git a/grafana-plugin/src/containers/Rotation/Rotation.module.css b/grafana-plugin/src/containers/Rotation/Rotation.module.css
index d5fe3e415c..33e8c51069 100644
--- a/grafana-plugin/src/containers/Rotation/Rotation.module.css
+++ b/grafana-plugin/src/containers/Rotation/Rotation.module.css
@@ -24,10 +24,6 @@
   position: relative;
 }
 
-.root:last-child .timeline {
-  padding-bottom: 0;
-}
-
 .slots {
   width: 100%;
   display: flex;
diff --git a/grafana-plugin/src/containers/Rotations/Rotations.styles.ts b/grafana-plugin/src/containers/Rotations/Rotations.styles.ts
index 1654e45cb9..8805d57c58 100644
--- a/grafana-plugin/src/containers/Rotations/Rotations.styles.ts
+++ b/grafana-plugin/src/containers/Rotations/Rotations.styles.ts
@@ -4,11 +4,16 @@ import { GrafanaTheme2 } from '@grafana/data';
 export const getRotationsStyles = (theme: GrafanaTheme2) => {
   return {
     root: css`
-      background: 1px solid ${theme.colors.background.secondary};
-      border: ${theme.colors.border.weak};
+      background: ${theme.colors.background.secondary};
+      border: 1px solid ${theme.colors.border.weak};
       display: flex;
       flex-direction: column;
       border-radius: ${theme.shape.radius.default};
+
+      &--withNoBackgroundAndBorder {
+        background: none;
+        border: none;
+      }
     `,
 
     currentTime: css`
@@ -18,35 +23,24 @@ export const getRotationsStyles = (theme: GrafanaTheme2) => {
       top: 0;
       bottom: 0;
       z-index: 1;
-      transition: left 500ms ease;
     `,
 
     header: css`
-      padding: 0 10px;
-    `,
-
-    title: css`
-      margin: 16px 0;
+      padding: 12px;
     `,
 
     layer: css`
       display: block;
     `,
 
-    rotations: css`
-      position: relative;
+    layerFirst: css`
+      padding-top: 32px;
     `,
 
     layerTitle: css`
-      text-align: center;
-      font-weight: 500;
-      line-height: 16px;
-      padding: 8px;
-      background: ${theme.colors.background.secondary};
-
-      &:hover {
-        background: rgba(204, 204, 220, 0.12);
-      }
+      margin: 8px;
+      border: ${theme.colors.border.weak};
+      background: ${theme.colors.background.canvas};
     `,
 
     rotationsPlusTitle: css`
@@ -54,25 +48,6 @@ export const getRotationsStyles = (theme: GrafanaTheme2) => {
       flex-direction: column;
     `,
 
-    headerPlusContent: css`
-      position: relative;
-      padding-top: 26px;
-      padding-bottom: 26px;
-    `,
-
-    layerHeader: css`
-      padding: 12px;
-      display: flex;
-      justify-content: space-between;
-    `,
-
-    layerHeaderTitle: css`
-      font-weight: 400;
-      font-size: 14px;
-      line-height: 20px;
-      color: rgba(204, 204, 220, 0.65);
-    `,
-
     layerContent: css`
       position: relative;
     `,
@@ -81,7 +56,7 @@ export const getRotationsStyles = (theme: GrafanaTheme2) => {
       font-weight: 400;
       font-size: 12px;
       line-height: 16px;
-      text-align: center;
+      text-align: left;
       padding: 12px;
       cursor: pointer;
 
diff --git a/grafana-plugin/src/containers/Rotations/Rotations.tsx b/grafana-plugin/src/containers/Rotations/Rotations.tsx
index 564dda82bb..fb8d5c5015 100644
--- a/grafana-plugin/src/containers/Rotations/Rotations.tsx
+++ b/grafana-plugin/src/containers/Rotations/Rotations.tsx
@@ -1,8 +1,8 @@
 import React, { Component } from 'react';
 
-import { SelectableValue } from '@grafana/data';
-import { ValuePicker, HorizontalGroup, Button, Tooltip } from '@grafana/ui';
-import cn from 'classnames/bind';
+import { cx } from '@emotion/css';
+import { GrafanaTheme2, SelectableValue } from '@grafana/data';
+import { ValuePicker, HorizontalGroup, Button, Tooltip, withTheme2 } from '@grafana/ui';
 import dayjs from 'dayjs';
 import { observer } from 'mobx-react';
 import { CSSTransition, TransitionGroup } from 'react-transition-group';
@@ -24,10 +24,9 @@ import { UserActions } from 'utils/authorization/authorization';
 
 import { DEFAULT_TRANSITION_TIMEOUT } from './Rotations.config';
 import { findColor } from './Rotations.helpers';
+import { getRotationsStyles } from './Rotations.styles';
 
-import styles from './Rotations.module.css';
-
-const cx = cn.bind(styles);
+import animationStyles from './Rotations.module.css';
 
 interface RotationsProps extends WithStoreProps {
   shiftIdToShowRotationForm?: Shift['id'] | 'new';
@@ -44,6 +43,7 @@ interface RotationsProps extends WithStoreProps {
   disabled: boolean;
   filters: ScheduleFiltersType;
   onSlotClick?: (event: Event) => void;
+  theme: GrafanaTheme2;
 }
 
 interface RotationsState {
@@ -71,6 +71,7 @@ class _Rotations extends Component<RotationsProps, RotationsState> {
       onShowShiftSwapForm,
       onSlotClick,
       layerPriorityToShowRotationForm,
+      theme,
     } = this.props;
 
     const { shiftStartToShowRotationForm, shiftEndToShowRotationForm } = this.state;
@@ -99,10 +100,12 @@ class _Rotations extends Component<RotationsProps, RotationsState> {
     const isTypeReadOnly =
       schedule && (schedule?.type === ScheduleType.Ical || schedule?.type === ScheduleType.Calendar);
 
+    const styles = getRotationsStyles(theme);
+
     return (
       <>
-        <div id="rotations" className={cx('root')}>
-          <div className={cx('header')}>
+        <div id="rotations" className={styles.root}>
+          <div className={styles.header}>
             <HorizontalGroup justify="space-between">
               <Text.Title level={5} type="primary">
                 Rotations
@@ -144,33 +147,40 @@ class _Rotations extends Component<RotationsProps, RotationsState> {
               </HorizontalGroup>
             </HorizontalGroup>
           </div>
-          <div className={cx('rotations-plus-title')}>
+          <div className={styles.rotationsPlusTitle}>
             {layers && layers.length ? (
               <TransitionGroup className={'u-position-relative'}>
                 <TimelineMarks />
                 {!currentTimeHidden && (
                   <div
-                    className={cx('current-time')}
+                    className={styles.currentTime}
                     style={{
                       left: `${currentTimeX * 100}%`,
                     }}
                   />
                 )}
                 {layers.map((layer, layerIndex) => (
-                  <CSSTransition key={layerIndex} timeout={DEFAULT_TRANSITION_TIMEOUT} classNames={{ ...styles }}>
-                    <div id={`layer${layer.priority}`} className={cx('layer', { ['layer-first']: layerIndex === 0 })}>
-                      <Tag className={cx('layer-title')}>
+                  <CSSTransition
+                    key={layerIndex}
+                    timeout={DEFAULT_TRANSITION_TIMEOUT}
+                    classNames={{ ...animationStyles }}
+                  >
+                    <div
+                      id={`layer${layer.priority}`}
+                      className={cx(styles.layer, { [styles.layerFirst]: layerIndex === 0 })}
+                    >
+                      <Tag className={styles.layerTitle}>
                         <Text size="small" type="primary">
                           Layer {layer.priority}
                         </Text>
                       </Tag>
-                      <div className={cx('header-plus-content')}>
+                      <div className={'u-position-relative'}>
                         <TransitionGroup className={'u-position-relative'}>
                           {layer.shifts.map(({ shiftId, isPreview, events }, rotationIndex) => (
                             <CSSTransition
                               key={rotationIndex}
                               timeout={DEFAULT_TRANSITION_TIMEOUT}
-                              classNames={{ ...styles }}
+                              classNames={{ ...animationStyles }}
                             >
                               <Rotation
                                 onClick={(shiftStart, shiftEnd) => {
@@ -198,14 +208,14 @@ class _Rotations extends Component<RotationsProps, RotationsState> {
             ) : (
               <div className="u-position-relative">
                 <TimelineMarks />
-                <div className={cx('current-time')} style={{ left: `${currentTimeX * 100}%` }} />
-                <div id="layer1" className={cx('layer', 'layer-first')}>
-                  <Tag className={cx('layer-title')}>
+                <div className={styles.currentTime} style={{ left: `${currentTimeX * 100}%` }} />
+                <div id="layer1" className={cx(styles.layer, styles.layerFirst)}>
+                  <Tag className={styles.layerTitle}>
                     <Text size="small" type="primary">
                       Layer 1
                     </Text>
                   </Tag>
-                  <div className={cx('header-plus-content')}>
+                  <div className="u-position-relative">
                     <Rotation
                       onClick={(shiftStart, shiftEnd) => {
                         this.handleAddLayer(nextPriority, shiftStart, shiftEnd);
@@ -220,7 +230,7 @@ class _Rotations extends Component<RotationsProps, RotationsState> {
             )}
             {nextPriority > 1 && (
               <div
-                className={cx('add-rotations-layer')}
+                className={styles.addRotationsLayer}
                 onClick={() => {
                   if (disabled) {
                     return;
@@ -334,4 +344,4 @@ class _Rotations extends Component<RotationsProps, RotationsState> {
   };
 }
 
-export const Rotations = withMobXProviderContext(_Rotations);
+export const Rotations = withMobXProviderContext(withTheme2(_Rotations));
diff --git a/grafana-plugin/src/containers/Rotations/ScheduleFinal.tsx b/grafana-plugin/src/containers/Rotations/ScheduleFinal.tsx
index 73b478bb5e..522a76c355 100644
--- a/grafana-plugin/src/containers/Rotations/ScheduleFinal.tsx
+++ b/grafana-plugin/src/containers/Rotations/ScheduleFinal.tsx
@@ -1,10 +1,12 @@
 import React, { FC, useMemo } from 'react';
 
-import { HorizontalGroup } from '@grafana/ui';
-import cn from 'classnames/bind';
+import { cx } from '@emotion/css';
+import { GrafanaTheme2 } from '@grafana/data';
+import { HorizontalGroup, useStyles2, withTheme2 } from '@grafana/ui';
 import dayjs from 'dayjs';
 import { observer } from 'mobx-react';
 import { CSSTransition, TransitionGroup } from 'react-transition-group';
+import { bem } from 'styles/utils.styles';
 
 import { ScheduleFiltersType } from 'components/ScheduleFilters/ScheduleFilters.types';
 import { Text } from 'components/Text/Text';
@@ -25,10 +27,9 @@ import { withMobXProviderContext } from 'state/withStore';
 
 import { DEFAULT_TRANSITION_TIMEOUT } from './Rotations.config';
 import { findColor } from './Rotations.helpers';
+import { getRotationsStyles } from './Rotations.styles';
 
-import styles from './Rotations.module.css';
-
-const cx = cn.bind(styles);
+import animationStyles from './Rotations.module.css';
 
 interface ScheduleFinalProps extends WithStoreProps {
   scheduleId: Schedule['id'];
@@ -39,6 +40,7 @@ interface ScheduleFinalProps extends WithStoreProps {
   filters: ScheduleFiltersType;
   onSlotClick?: (event: Event) => void;
   scheduleView?: ScheduleView;
+  theme: GrafanaTheme2;
 }
 
 const _ScheduleFinal: FC<ScheduleFinalProps> = observer(
@@ -57,6 +59,8 @@ const _ScheduleFinal: FC<ScheduleFinalProps> = observer(
       scheduleStore: { scheduleView: storeScheduleView },
     } = store;
 
+    const styles = useStyles2(getRotationsStyles);
+
     const scheduleView = propsScheduleView || storeScheduleView;
 
     const shifts = flattenShiftEvents(getShiftsFromStore(store, scheduleId, calendarStartDate));
@@ -83,9 +87,9 @@ const _ScheduleFinal: FC<ScheduleFinalProps> = observer(
     }, [calendarStartDate, scheduleView]);
 
     return (
-      <div className={cx('root')}>
+      <div className={cx(styles.root, { [bem(styles.root, 'withNoBackgroundAndBorder')]: simplified })}>
         {!simplified && (
-          <div className={cx('header')}>
+          <div className={styles.header}>
             <HorizontalGroup justify="space-between">
               <Text.Title level={5} type="primary">
                 Final schedule
@@ -93,16 +97,16 @@ const _ScheduleFinal: FC<ScheduleFinalProps> = observer(
             </HorizontalGroup>
           </div>
         )}
-        <div className={cx('header-plus-content')}>
+        <div className="u-position-relative">
           {rows.map(({ startDate }, index) => (
-            <TransitionGroup key={index} className={cx('u-position-relative', 'layer', 'layer-first')}>
+            <TransitionGroup key={index} className={cx('u-position-relative', styles.layer, styles.layerFirst)}>
               <TimelineMarks
                 scheduleView={scheduleView}
                 startDate={startDate}
                 withBorderBottom={index !== rows.length - 1}
               />
               <div
-                className={cx('current-time')}
+                className={styles.currentTime}
                 style={{
                   left: `${
                     getCurrentTimeX(
@@ -116,7 +120,7 @@ const _ScheduleFinal: FC<ScheduleFinalProps> = observer(
               {shifts?.length ? (
                 shifts.map(({ events }, index) => {
                   return (
-                    <CSSTransition key={index} timeout={DEFAULT_TRANSITION_TIMEOUT} classNames={{ ...styles }}>
+                    <CSSTransition key={index} timeout={DEFAULT_TRANSITION_TIMEOUT} classNames={{ ...animationStyles }}>
                       <Rotation
                         scheduleView={scheduleView}
                         startDate={startDate}
@@ -134,7 +138,7 @@ const _ScheduleFinal: FC<ScheduleFinalProps> = observer(
                   );
                 })
               ) : (
-                <CSSTransition key={0} timeout={DEFAULT_TRANSITION_TIMEOUT} classNames={{ ...styles }}>
+                <CSSTransition key={0} timeout={DEFAULT_TRANSITION_TIMEOUT} classNames={{ ...animationStyles }}>
                   <Rotation scheduleView={scheduleView} startDate={calendarStartDate} events={[]} />
                 </CSSTransition>
               )}
@@ -146,4 +150,4 @@ const _ScheduleFinal: FC<ScheduleFinalProps> = observer(
   }
 );
 
-export const ScheduleFinal = withMobXProviderContext(_ScheduleFinal);
+export const ScheduleFinal = withMobXProviderContext(withTheme2(_ScheduleFinal));
diff --git a/grafana-plugin/src/containers/Rotations/ScheduleOverrides.tsx b/grafana-plugin/src/containers/Rotations/ScheduleOverrides.tsx
index 79ed8cbe94..4e2061406d 100644
--- a/grafana-plugin/src/containers/Rotations/ScheduleOverrides.tsx
+++ b/grafana-plugin/src/containers/Rotations/ScheduleOverrides.tsx
@@ -1,7 +1,8 @@
 import React, { Component } from 'react';
 
-import { Button, HorizontalGroup, Tooltip } from '@grafana/ui';
-import cn from 'classnames/bind';
+import { cx } from '@emotion/css';
+import { GrafanaTheme2 } from '@grafana/data';
+import { Button, HorizontalGroup, Tooltip, withTheme2 } from '@grafana/ui';
 import dayjs from 'dayjs';
 import { observer } from 'mobx-react';
 import { CSSTransition, TransitionGroup } from 'react-transition-group';
@@ -28,10 +29,9 @@ import { UserActions } from 'utils/authorization/authorization';
 
 import { DEFAULT_TRANSITION_TIMEOUT } from './Rotations.config';
 import { findColor } from './Rotations.helpers';
+import { getRotationsStyles } from './Rotations.styles';
 
-import styles from './Rotations.module.css';
-
-const cx = cn.bind(styles);
+import animationStyles from './Rotations.module.css';
 
 interface ScheduleOverridesProps extends WithStoreProps {
   shiftStartToShowOverrideForm: dayjs.Dayjs;
@@ -46,6 +46,7 @@ interface ScheduleOverridesProps extends WithStoreProps {
   disabled: boolean;
   disableShiftSwaps: boolean;
   filters: ScheduleFiltersType;
+  theme: GrafanaTheme2;
 }
 
 interface ScheduleOverridesState {
@@ -74,6 +75,7 @@ class _ScheduleOverrides extends Component<ScheduleOverridesProps, ScheduleOverr
       shiftEndToShowOverrideForm: propsShiftEndToShowOverrideForm,
       onShowShiftSwapForm,
       filters,
+      theme,
     } = this.props;
     const { shiftStartToShowOverrideForm, shiftEndToShowOverrideForm } = this.state;
 
@@ -93,10 +95,12 @@ class _ScheduleOverrides extends Component<ScheduleOverridesProps, ScheduleOverr
 
     const isTypeReadOnly = !schedule?.enable_web_overrides;
 
+    const styles = getRotationsStyles(theme);
+
     return (
       <>
-        <div id="overrides-list" className={cx('root')}>
-          <div className={cx('header')}>
+        <div id="overrides-list" className={styles.root}>
+          <div className={styles.header}>
             <HorizontalGroup justify="space-between">
               <Text.Title level={5} type="primary">
                 Overrides and swaps
@@ -130,17 +134,17 @@ class _ScheduleOverrides extends Component<ScheduleOverridesProps, ScheduleOverr
             </HorizontalGroup>
           </div>
           <div className="u-position-relative">
-            {!currentTimeHidden && <div className={cx('current-time')} style={{ left: `${currentTimeX * 100}%` }} />}
+            {!currentTimeHidden && <div className={styles.currentTime} style={{ left: `${currentTimeX * 100}%` }} />}
             <TimelineMarks />
             {shiftSwaps && shiftSwaps.length ? (
-              <TransitionGroup className={cx('layer', 'layer-first')}>
-                <Tag className={cx('layer-title')}>
+              <TransitionGroup className={cx(styles.layer, styles.layerFirst)}>
+                <Tag className={styles.layerTitle}>
                   <Text type="primary" size="small">
                     Swaps
                   </Text>
                 </Tag>
                 {shiftSwaps.map(({ isPreview, events }, index) => (
-                  <CSSTransition key={index} timeout={DEFAULT_TRANSITION_TIMEOUT} classNames={{ ...styles }}>
+                  <CSSTransition key={index} timeout={DEFAULT_TRANSITION_TIMEOUT} classNames={{ ...animationStyles }}>
                     <Rotation
                       events={events}
                       color={SHIFT_SWAP_COLOR}
@@ -157,15 +161,15 @@ class _ScheduleOverrides extends Component<ScheduleOverridesProps, ScheduleOverr
                 ))}
               </TransitionGroup>
             ) : null}
-            <TransitionGroup className={cx('layer', { 'layer-first': !shiftSwaps || !shiftSwaps.length })}>
-              <Tag className={cx('layer-title')}>
+            <TransitionGroup className={cx(styles.layer, { [styles.layerFirst]: !shiftSwaps || !shiftSwaps.length })}>
+              <Tag className={styles.layerTitle}>
                 <Text type="primary" size="small">
                   Overrides
                 </Text>
               </Tag>
               {shifts && shifts.length ? (
                 shifts.map(({ shiftId, isPreview, events }, index) => (
-                  <CSSTransition key={index} timeout={DEFAULT_TRANSITION_TIMEOUT} classNames={{ ...styles }}>
+                  <CSSTransition key={index} timeout={DEFAULT_TRANSITION_TIMEOUT} classNames={{ ...animationStyles }}>
                     <Rotation
                       events={events}
                       color={getOverrideColor(index)}
@@ -178,7 +182,7 @@ class _ScheduleOverrides extends Component<ScheduleOverridesProps, ScheduleOverr
                   </CSSTransition>
                 ))
               ) : (
-                <CSSTransition key={0} timeout={DEFAULT_TRANSITION_TIMEOUT} classNames={{ ...styles }}>
+                <CSSTransition key={0} timeout={DEFAULT_TRANSITION_TIMEOUT} classNames={{ ...animationStyles }}>
                   <Rotation
                     key={0}
                     events={[]}
@@ -265,4 +269,4 @@ class _ScheduleOverrides extends Component<ScheduleOverridesProps, ScheduleOverr
   };
 }
 
-export const ScheduleOverrides = withMobXProviderContext(_ScheduleOverrides);
+export const ScheduleOverrides = withMobXProviderContext(withTheme2(_ScheduleOverrides));
diff --git a/grafana-plugin/src/containers/Rotations/SchedulePersonal.tsx b/grafana-plugin/src/containers/Rotations/SchedulePersonal.tsx
index d74859dde8..9adb92d7ea 100644
--- a/grafana-plugin/src/containers/Rotations/SchedulePersonal.tsx
+++ b/grafana-plugin/src/containers/Rotations/SchedulePersonal.tsx
@@ -1,7 +1,8 @@
 import React, { FC, useEffect } from 'react';
 
-import { Badge, Button, HorizontalGroup, Icon } from '@grafana/ui';
-import cn from 'classnames/bind';
+import { cx } from '@emotion/css';
+import { GrafanaTheme2 } from '@grafana/data';
+import { Badge, 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';
@@ -25,14 +26,14 @@ import { PLUGIN_ROOT } from 'utils/consts';
 import { useIsLoading } from 'utils/hooks';
 
 import { DEFAULT_TRANSITION_TIMEOUT } from './Rotations.config';
+import { getRotationsStyles } from './Rotations.styles';
 
-import styles from './Rotations.module.css';
-
-const cx = cn.bind(styles);
+import animationStyles from './Rotations.module.css';
 
 interface SchedulePersonalProps extends RouteComponentProps {
   userPk: ApiSchemas['User']['pk'];
   onSlotClick?: (event: Event) => void;
+  theme: GrafanaTheme2;
 }
 
 const _SchedulePersonal: FC<SchedulePersonalProps> = observer(({ userPk, onSlotClick, history }) => {
@@ -94,52 +95,52 @@ const _SchedulePersonal: FC<SchedulePersonalProps> = observer(({ userPk, onSlotC
 
   const emptyRotationsText = updatePersonalEventsLoading ? 'Loading ...' : 'There are no schedules relevant to user';
 
+  const styles = useStyles2(getRotationsStyles);
+
   return (
-    <div className={cx('root')}>
-      <div className={cx('header')}>
-        <div className={cx('title')}>
-          <HorizontalGroup justify="space-between">
+    <div className={styles.root}>
+      <div className={styles.header}>
+        <HorizontalGroup justify="space-between">
+          <HorizontalGroup>
+            <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" />
+            )}
+          </HorizontalGroup>
+          <HorizontalGroup>
             <HorizontalGroup>
               <Text type="secondary">
-                On-call schedule <Avatar src={storeUser.avatar} size="small" /> {storeUser.username}
+                {timezoneStore.calendarStartDate.format('DD MMM')} -{' '}
+                {timezoneStore.calendarStartDate.add(6, 'day').format('DD MMM')}
               </Text>
-              {isOncall ? (
-                <Badge text="On-call now" color="green" />
-              ) : (
-                /*  @ts-ignore */
-                <Badge text="Not on-call now" color="gray" />
-              )}
-            </HorizontalGroup>
-            <HorizontalGroup>
-              <HorizontalGroup>
-                <Text type="secondary">
-                  {timezoneStore.calendarStartDate.format('DD MMM')} -{' '}
-                  {timezoneStore.calendarStartDate.add(6, 'day').format('DD MMM')}
-                </Text>
-                <Button variant="secondary" size="sm" onClick={handleTodayClick}>
-                  Today
+              <Button variant="secondary" size="sm" onClick={handleTodayClick}>
+                Today
+              </Button>
+              <HorizontalGroup spacing="xs">
+                <Button variant="secondary" size="sm" onClick={handleLeftClick}>
+                  <Icon name="angle-left" />
+                </Button>
+                <Button variant="secondary" size="sm" onClick={handleRightClick}>
+                  <Icon name="angle-right" />
                 </Button>
-                <HorizontalGroup spacing="xs">
-                  <Button variant="secondary" size="sm" onClick={handleLeftClick}>
-                    <Icon name="angle-left" />
-                  </Button>
-                  <Button variant="secondary" size="sm" onClick={handleRightClick}>
-                    <Icon name="angle-right" />
-                  </Button>
-                </HorizontalGroup>
               </HorizontalGroup>
             </HorizontalGroup>
           </HorizontalGroup>
-        </div>
+        </HorizontalGroup>
       </div>
-      <div className={cx('header-plus-content')}>
-        {!currentTimeHidden && <div className={cx('current-time')} style={{ left: `${currentTimeX * 100}%` }} />}
+      <div className={'u-position-relative'}>
+        {!currentTimeHidden && <div className={styles.currentTime} style={{ left: `${currentTimeX * 100}%` }} />}
         <TimelineMarks scheduleView={ScheduleView.OneWeek} />
-        <TransitionGroup className={cx('rotations', 'layer', 'layer-first')}>
+        <TransitionGroup className={cx(styles.layer, styles.layerFirst)}>
           {shifts?.length ? (
             shifts.map(({ events }, index) => {
               return (
-                <CSSTransition key={index} timeout={DEFAULT_TRANSITION_TIMEOUT} classNames={{ ...styles }}>
+                <CSSTransition key={index} timeout={DEFAULT_TRANSITION_TIMEOUT} classNames={{ ...animationStyles }}>
                   <Rotation
                     scheduleView={ScheduleView.OneWeek}
                     simplified
@@ -154,7 +155,7 @@ const _SchedulePersonal: FC<SchedulePersonalProps> = observer(({ userPk, onSlotC
               );
             })
           ) : (
-            <CSSTransition key={0} timeout={DEFAULT_TRANSITION_TIMEOUT} classNames={{ ...styles }}>
+            <CSSTransition key={0} timeout={DEFAULT_TRANSITION_TIMEOUT} classNames={{ ...animationStyles }}>
               <Rotation events={[]} emptyText={emptyRotationsText} />
             </CSSTransition>
           )}
@@ -164,4 +165,4 @@ const _SchedulePersonal: FC<SchedulePersonalProps> = observer(({ userPk, onSlotC
   );
 });
 
-export const SchedulePersonal = withRouter(_SchedulePersonal);
+export const SchedulePersonal = withRouter(withTheme2(_SchedulePersonal));
diff --git a/grafana-plugin/src/containers/ScheduleSlot/ScheduleSlot.module.css b/grafana-plugin/src/containers/ScheduleSlot/ScheduleSlot.module.css
deleted file mode 100644
index df1d8b15f4..0000000000
--- a/grafana-plugin/src/containers/ScheduleSlot/ScheduleSlot.module.css
+++ /dev/null
@@ -1,125 +0,0 @@
-.root {
-  height: 28px;
-  background: #595959;
-  border-radius: 2px;
-  position: relative;
-  display: flex;
-  overflow: hidden;
-  margin-right: 1px;
-  padding: 4px;
-  align-items: center;
-  transition: opacity 0.2s ease;
-  cursor: pointer;
-}
-
-.working-hours {
-  position: absolute;
-  top: 0;
-  left: 0;
-  pointer-events: none;
-}
-
-.stack {
-  display: flex;
-  flex-direction: column;
-  gap: 1px;
-  flex-shrink: 0;
-}
-
-.root__type_gap {
-  background: rgba(209, 14, 92, 0.2);
-  border: 1px dashed #ff5286;
-  color: rgba(209, 14, 92, 0.5);
-  visibility: hidden;
-}
-
-.root__type_shift-swap {
-  background: rgba(255, 153, 0, 0.18);
-}
-
-.no-user {
-  width: 12px;
-  height: 12px;
-  background: var(--tag-background-primary);
-  border-radius: 50%;
-  display: flex;
-  justify-content: center;
-}
-
-.root__inactive {
-  opacity: 0.3;
-}
-
-.title {
-  z-index: 1;
-  font-size: 12px;
-  width: 100%;
-  font-weight: 500;
-  white-space: nowrap;
-}
-
-.label {
-  background: rgba(255, 255, 255, 0.7);
-  border-radius: 2px;
-  display: inline-block;
-  padding: 2px 4px;
-  line-height: 16px;
-  z-index: 1;
-  font-size: 10px;
-  font-weight: bold;
-  margin-right: 5px;
-  flex-shrink: 0;
-}
-
-.details {
-  width: 300px;
-  padding: 5px 0;
-}
-
-.details-user-status {
-  width: 10px;
-  height: 10px;
-  border-radius: 50%;
-}
-
-.details-user-status__type_success {
-  background-color: var(--success-text-color);
-}
-
-.time {
-  position: absolute;
-  top: 0;
-  bottom: 0;
-  width: 1px;
-  background-color: white;
-  z-index: 2;
-}
-
-.is-oncall-icon {
-  color: var(--oncall-icon-stroke-color);
-  vertical-align: middle;
-}
-
-.details-icon {
-  width: 16px;
-  margin-right: 4px;
-}
-
-.badge {
-  width: 8px;
-  height: 8px;
-  border-radius: 50%;
-  margin: 0 auto;
-}
-
-.username {
-  word-break: break-word;
-}
-
-.second-column {
-  width: 120px;
-}
-
-.icon {
-  color: var(--secondary-text-color);
-}
diff --git a/grafana-plugin/src/containers/ScheduleSlot/ScheduleSlot.tsx b/grafana-plugin/src/containers/ScheduleSlot/ScheduleSlot.tsx
index ba51f05825..617fcf9cb6 100644
--- a/grafana-plugin/src/containers/ScheduleSlot/ScheduleSlot.tsx
+++ b/grafana-plugin/src/containers/ScheduleSlot/ScheduleSlot.tsx
@@ -535,7 +535,7 @@ const getStyles = (theme: GrafanaTheme2) => {
       position: relative;
       display: flex;
       overflow: hidden;
-      margin: 0 1px;
+      margin-right: 1px;
       padding: 4px;
       align-items: center;
       transition: opacity 0.2s ease;
@@ -566,9 +566,7 @@ const getStyles = (theme: GrafanaTheme2) => {
 
     // TODO: Same here
     swap: css`
-      border-radius: 10px;
-      background: #ff99002e;
-      height: 20px;
+      background: rgba(255, 153, 0, 0.18);
     `,
 
     noUser: css`
diff --git a/grafana-plugin/src/pages/schedule/Schedule.module.css b/grafana-plugin/src/pages/schedule/Schedule.module.css
deleted file mode 100644
index eb21e80392..0000000000
--- a/grafana-plugin/src/pages/schedule/Schedule.module.css
+++ /dev/null
@@ -1,49 +0,0 @@
-.root {
-  --rotations-border: var(--border-weak);
-  --rotations-background: var(--background-secondary);
-}
-
-.title {
-  display: flex;
-  flex-wrap: wrap;
-  flex-direction: row;
-  column-gap: 8px;
-  row-gap: 8px;
-  min-width: 250px;
-  align-items: center;
-}
-
-.header {
-  position: sticky; /* TODO check */
-  width: 100%;
-}
-
-.desc {
-  width: 736px;
-}
-
-.users-timezones {
-  width: 100%;
-}
-
-.controls {
-  width: 100%;
-  position: sticky;
-  top: 0;
-  z-index: 2;
-  padding: 16px 0;
-  background: var(--background-primary);
-}
-
-.rotations {
-  display: flex;
-  flex-direction: column;
-  gap: 16px;
-  position: relative;
-  width: 100%;
-}
-
-.not-found {
-  margin: 50px auto;
-  text-align: center;
-}
diff --git a/grafana-plugin/src/pages/schedule/Schedule.styles.ts b/grafana-plugin/src/pages/schedule/Schedule.styles.ts
index 8c4bc0bd61..077d1ac22b 100644
--- a/grafana-plugin/src/pages/schedule/Schedule.styles.ts
+++ b/grafana-plugin/src/pages/schedule/Schedule.styles.ts
@@ -1,6 +1,7 @@
 import { css } from '@emotion/css';
+import { GrafanaTheme2 } from '@grafana/data';
 
-export const getScheduleStyles = () => {
+export const getScheduleStyles = (theme: GrafanaTheme2) => {
   return {
     title: css`
       display: flex;
@@ -27,6 +28,11 @@ export const getScheduleStyles = () => {
 
     controls: css`
       width: 100%;
+      position: sticky;
+      top: 0;
+      z-index: 2;
+      padding: 16px 0;
+      background-color: ${theme.colors.background.primary};
     `,
 
     rotations: css`
diff --git a/grafana-plugin/src/pages/schedule/Schedule.tsx b/grafana-plugin/src/pages/schedule/Schedule.tsx
index e192827c5a..3c80a09278 100644
--- a/grafana-plugin/src/pages/schedule/Schedule.tsx
+++ b/grafana-plugin/src/pages/schedule/Schedule.tsx
@@ -120,6 +120,7 @@ class _SchedulePage extends React.Component<SchedulePageProps, SchedulePageState
       match: {
         params: { id: scheduleId },
       },
+      theme,
     } = this.props;
 
     const {
@@ -143,7 +144,7 @@ class _SchedulePage extends React.Component<SchedulePageProps, SchedulePageState
     const users = UserHelper.getSearchResult(store.userStore).results;
     const schedule = scheduleStore.items[scheduleId];
 
-    const styles = getScheduleStyles();
+    const styles = getScheduleStyles(theme);
 
     const disabledRotationForm =
       !isUserActionAllowed(UserActions.SchedulesWrite) ||
diff --git a/grafana-plugin/src/pages/schedules/Schedules.tsx b/grafana-plugin/src/pages/schedules/Schedules.tsx
index 4051aa3135..8443febee9 100644
--- a/grafana-plugin/src/pages/schedules/Schedules.tsx
+++ b/grafana-plugin/src/pages/schedules/Schedules.tsx
@@ -190,14 +190,16 @@ class _SchedulesPage extends React.Component<SchedulesPageProps, SchedulesPageSt
   renderSchedule = (data: Schedule) => {
     const styles = getSchedulesStyles();
 
-    <div className={styles.schedule}>
-      <ScheduleFinal
-        scheduleView={ScheduleView.OneWeek}
-        simplified
-        scheduleId={data.id}
-        onSlotClick={this.getScheduleClickHandler(data.id)}
-      />
-    </div>;
+    return (
+      <div className={styles.schedule}>
+        <ScheduleFinal
+          scheduleView={ScheduleView.OneWeek}
+          simplified
+          scheduleId={data.id}
+          onSlotClick={this.getScheduleClickHandler(data.id)}
+        />
+      </div>
+    );
   };
 
   getScheduleClickHandler = (scheduleId: Schedule['id']) => {

From 0da6a78ec4d158c059b0891c6b4e1a8bcc598956 Mon Sep 17 00:00:00 2001
From: Maxim Mordasov <maxim.mordasov@grafana.com>
Date: Tue, 28 May 2024 14:40:28 +0100
Subject: [PATCH 20/28] Update grafana-plugin/src/pages/schedule/Schedule.tsx

Co-authored-by: Dominik Broj <dominik.broj@grafana.com>
---
 grafana-plugin/src/pages/schedule/Schedule.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/grafana-plugin/src/pages/schedule/Schedule.tsx b/grafana-plugin/src/pages/schedule/Schedule.tsx
index 3c80a09278..383229068d 100644
--- a/grafana-plugin/src/pages/schedule/Schedule.tsx
+++ b/grafana-plugin/src/pages/schedule/Schedule.tsx
@@ -167,7 +167,7 @@ class _SchedulePage extends React.Component<SchedulePageProps, SchedulePageState
       shiftSwapIdToShowForm;
 
     const layers = getLayersFromStore(store, scheduleId, store.timezoneStore.calendarStartDate);
-    const nextPriority = layers && layers.length ? layers[layers.length - 1].priority + 1 : 1;
+    const nextPriority = layers?.length ? layers.at(-1).priority + 1 : 1;
 
     const { scheduleView } = scheduleStore;
 

From 665730e5ab7a8aad4a63f6025ff607287191aab5 Mon Sep 17 00:00:00 2001
From: Maxim Mordasov <maxim.mordasov@grafana.com>
Date: Tue, 28 May 2024 15:53:41 +0100
Subject: [PATCH 21/28] add HTML_ID const to locate html elements

---
 .../containers/RotationForm/ScheduleOverrideForm.tsx   |  4 ++--
 grafana-plugin/src/containers/Rotations/Rotations.tsx  |  2 +-
 .../src/containers/Rotations/ScheduleOverrides.tsx     |  2 +-
 grafana-plugin/src/pages/schedule/Schedule.tsx         | 10 +++++-----
 grafana-plugin/src/utils/DOM.ts                        |  7 ++++++-
 5 files changed, 15 insertions(+), 10 deletions(-)

diff --git a/grafana-plugin/src/containers/RotationForm/ScheduleOverrideForm.tsx b/grafana-plugin/src/containers/RotationForm/ScheduleOverrideForm.tsx
index d28e510a2a..24659b1690 100644
--- a/grafana-plugin/src/containers/RotationForm/ScheduleOverrideForm.tsx
+++ b/grafana-plugin/src/containers/RotationForm/ScheduleOverrideForm.tsx
@@ -15,7 +15,7 @@ import { Schedule, Shift } from 'models/schedule/schedule.types';
 import { ApiSchemas } from 'network/oncall-api/api.types';
 import { getDateTime, getUTCString } from 'pages/schedule/Schedule.helpers';
 import { useStore } from 'state/useStore';
-import { getCoords, waitForElement } from 'utils/DOM';
+import { HTML_ID, getCoords, waitForElement } from 'utils/DOM';
 import { GRAFANA_HEADER_HEIGHT } from 'utils/consts';
 import { useDebouncedCallback } from 'utils/hooks';
 
@@ -79,7 +79,7 @@ export const ScheduleOverrideForm: FC<RotationFormProps> = (props) => {
   useEffect(() => {
     (async () => {
       if (isOpen) {
-        const elm = await waitForElement('#overrides-list');
+        const elm = await waitForElement(`#${HTML_ID.OVERRIDES_AND_SWAPS}`);
         const modal = document.querySelector(`.${cx('draggable')}`) as HTMLDivElement;
         const coords = getCoords(elm);
         const offsetTop = Math.min(
diff --git a/grafana-plugin/src/containers/Rotations/Rotations.tsx b/grafana-plugin/src/containers/Rotations/Rotations.tsx
index fb8d5c5015..6eb354c139 100644
--- a/grafana-plugin/src/containers/Rotations/Rotations.tsx
+++ b/grafana-plugin/src/containers/Rotations/Rotations.tsx
@@ -104,7 +104,7 @@ class _Rotations extends Component<RotationsProps, RotationsState> {
 
     return (
       <>
-        <div id="rotations" className={styles.root}>
+        <div id="oncall-rotations" className={styles.root}>
           <div className={styles.header}>
             <HorizontalGroup justify="space-between">
               <Text.Title level={5} type="primary">
diff --git a/grafana-plugin/src/containers/Rotations/ScheduleOverrides.tsx b/grafana-plugin/src/containers/Rotations/ScheduleOverrides.tsx
index 4e2061406d..ea71686873 100644
--- a/grafana-plugin/src/containers/Rotations/ScheduleOverrides.tsx
+++ b/grafana-plugin/src/containers/Rotations/ScheduleOverrides.tsx
@@ -99,7 +99,7 @@ class _ScheduleOverrides extends Component<ScheduleOverridesProps, ScheduleOverr
 
     return (
       <>
-        <div id="overrides-list" className={styles.root}>
+        <div id="oncall-overrides-and-swaps" className={styles.root}>
           <div className={styles.header}>
             <HorizontalGroup justify="space-between">
               <Text.Title level={5} type="primary">
diff --git a/grafana-plugin/src/pages/schedule/Schedule.tsx b/grafana-plugin/src/pages/schedule/Schedule.tsx
index 3c80a09278..713afb004e 100644
--- a/grafana-plugin/src/pages/schedule/Schedule.tsx
+++ b/grafana-plugin/src/pages/schedule/Schedule.tsx
@@ -42,7 +42,7 @@ import { Event, Layer, Schedule, ScheduleType, ScheduleView, Shift, ShiftSwap }
 import { UserHelper } from 'models/user/user.helpers';
 import { PageProps, WithStoreProps } from 'state/types';
 import { withMobXProviderContext } from 'state/withStore';
-import { scrollToElement } from 'utils/DOM';
+import { HTML_ID, scrollToElement } from 'utils/DOM';
 import { isUserActionAllowed, UserActions } from 'utils/authorization/authorization';
 import { PLUGIN_ROOT } from 'utils/consts';
 
@@ -236,7 +236,7 @@ class _SchedulePage extends React.Component<SchedulePageProps, SchedulePageState
                                       key={index}
                                       label={`L${layer.priority} rotation`}
                                       onClick={() => {
-                                        scrollToElement(document.getElementById('rotations'));
+                                        scrollToElement(document.getElementById(HTML_ID.ROTATIONS));
 
                                         this.handleShowRotationForm('new', layer.priority);
                                       }}
@@ -245,7 +245,7 @@ class _SchedulePage extends React.Component<SchedulePageProps, SchedulePageState
                                   <Menu.Item
                                     label="New layer with rotation"
                                     onClick={() => {
-                                      scrollToElement(document.getElementById('rotations'));
+                                      scrollToElement(document.getElementById(HTML_ID.ROTATIONS));
 
                                       this.handleShowRotationForm('new', nextPriority);
                                     }}
@@ -253,7 +253,7 @@ class _SchedulePage extends React.Component<SchedulePageProps, SchedulePageState
                                   <Menu.Item
                                     label="Shift swap request"
                                     onClick={() => {
-                                      scrollToElement(document.getElementById('overrides-list'));
+                                      scrollToElement(document.getElementById(HTML_ID.OVERRIDES_AND_SWAPS));
 
                                       this.handleShowShiftSwapForm('new');
                                     }}
@@ -261,7 +261,7 @@ class _SchedulePage extends React.Component<SchedulePageProps, SchedulePageState
                                   <Menu.Item
                                     label="Override"
                                     onClick={() => {
-                                      scrollToElement(document.getElementById('overrides-list'));
+                                      scrollToElement(document.getElementById(HTML_ID.OVERRIDES_AND_SWAPS));
 
                                       this.handleShowOverridesForm('new');
                                     }}
diff --git a/grafana-plugin/src/utils/DOM.ts b/grafana-plugin/src/utils/DOM.ts
index fcf08d8eff..56e5c902c5 100644
--- a/grafana-plugin/src/utils/DOM.ts
+++ b/grafana-plugin/src/utils/DOM.ts
@@ -19,7 +19,7 @@ export const waitForElement = (selector: string) => {
 };
 
 export const scrollToElement = (element: Element, behavior: ScrollBehavior = 'instant' as ScrollBehavior) => {
-  document.getElementById('rotations').scrollIntoView({ behavior, block: 'center' });
+  element.scrollIntoView({ behavior, block: 'center' });
 };
 
 export const getCoords = (elem) => {
@@ -40,3 +40,8 @@ export const getCoords = (elem) => {
 
   return { top: Math.round(top), left: Math.round(left) };
 };
+
+export const HTML_ID = {
+  ROTATIONS: 'oncall-rotations',
+  OVERRIDES_AND_SWAPS: 'oncall-overrides-and-swaps',
+} as const;

From 892b9402aa350591a930cb638bee0c3be96e1b56 Mon Sep 17 00:00:00 2001
From: Maxim Mordasov <maxim.mordasov@grafana.com>
Date: Wed, 29 May 2024 14:45:41 +0100
Subject: [PATCH 22/28] fix shift swaps styling

---
 .../containers/Rotations/Rotations.styles.ts  |  2 +-
 .../Rotations/ScheduleOverrides.tsx           | 14 ++--
 .../ScheduleSlot/ScheduleSlot.helpers.ts      | 19 +++++
 .../containers/ScheduleSlot/ScheduleSlot.tsx  | 73 +++++++++----------
 .../src/pages/schedule/Schedule.module.css    | 49 +++++++++++++
 .../src/pages/schedule/Schedule.tsx           |  2 +
 .../src/pages/schedules/Schedules.styles.ts   |  8 +-
 .../src/pages/schedules/Schedules.tsx         |  1 +
 grafana-plugin/src/utils/string.ts            |  2 +-
 9 files changed, 125 insertions(+), 45 deletions(-)
 create mode 100644 grafana-plugin/src/pages/schedule/Schedule.module.css

diff --git a/grafana-plugin/src/containers/Rotations/Rotations.styles.ts b/grafana-plugin/src/containers/Rotations/Rotations.styles.ts
index 8805d57c58..c0f9104679 100644
--- a/grafana-plugin/src/containers/Rotations/Rotations.styles.ts
+++ b/grafana-plugin/src/containers/Rotations/Rotations.styles.ts
@@ -19,7 +19,7 @@ export const getRotationsStyles = (theme: GrafanaTheme2) => {
     currentTime: css`
       position: absolute;
       width: 1px;
-      background: ${theme.colors.gradients.brandVertical}
+      background: ${theme.colors.gradients.brandVertical};
       top: 0;
       bottom: 0;
       z-index: 1;
diff --git a/grafana-plugin/src/containers/Rotations/ScheduleOverrides.tsx b/grafana-plugin/src/containers/Rotations/ScheduleOverrides.tsx
index ea71686873..288920d22d 100644
--- a/grafana-plugin/src/containers/Rotations/ScheduleOverrides.tsx
+++ b/grafana-plugin/src/containers/Rotations/ScheduleOverrides.tsx
@@ -162,11 +162,15 @@ class _ScheduleOverrides extends Component<ScheduleOverridesProps, ScheduleOverr
               </TransitionGroup>
             ) : null}
             <TransitionGroup className={cx(styles.layer, { [styles.layerFirst]: !shiftSwaps || !shiftSwaps.length })}>
-              <Tag className={styles.layerTitle}>
-                <Text type="primary" size="small">
-                  Overrides
-                </Text>
-              </Tag>
+              {shifts && shifts.length ? (
+                <CSSTransition key={-1} timeout={DEFAULT_TRANSITION_TIMEOUT} classNames={{ ...animationStyles }}>
+                  <Tag className={styles.layerTitle}>
+                    <Text type="primary" size="small">
+                      Overrides
+                    </Text>
+                  </Tag>
+                </CSSTransition>
+              ) : null}
               {shifts && shifts.length ? (
                 shifts.map(({ shiftId, isPreview, events }, index) => (
                   <CSSTransition key={index} timeout={DEFAULT_TRANSITION_TIMEOUT} classNames={{ ...animationStyles }}>
diff --git a/grafana-plugin/src/containers/ScheduleSlot/ScheduleSlot.helpers.ts b/grafana-plugin/src/containers/ScheduleSlot/ScheduleSlot.helpers.ts
index ab26807eaa..b66acdeeaa 100644
--- a/grafana-plugin/src/containers/ScheduleSlot/ScheduleSlot.helpers.ts
+++ b/grafana-plugin/src/containers/ScheduleSlot/ScheduleSlot.helpers.ts
@@ -1,5 +1,24 @@
+import { SHIFT_SWAP_COLOR } from 'models/schedule/schedule.helpers';
 import { ApiSchemas } from 'network/oncall-api/api.types';
 
 export const getTitle = (user: ApiSchemas['User']) => {
   return user ? user.username.split(' ')[0] : null;
 };
+
+export const getScheduleSlotStyleParams = (baseColor: string, isShiftSwap: boolean, hasBenefactor: boolean) => {
+  let color = baseColor;
+  let backgroundColor = color;
+  let border = undefined;
+  let textColor = '#fff';
+  if (isShiftSwap) {
+    backgroundColor = SHIFT_SWAP_COLOR;
+    if (!hasBenefactor) {
+      color = SHIFT_SWAP_COLOR;
+      backgroundColor = 'transparent';
+      border = `1px solid ${SHIFT_SWAP_COLOR}`;
+      textColor = SHIFT_SWAP_COLOR;
+    }
+  }
+
+  return { color, backgroundColor, border, textColor };
+};
diff --git a/grafana-plugin/src/containers/ScheduleSlot/ScheduleSlot.tsx b/grafana-plugin/src/containers/ScheduleSlot/ScheduleSlot.tsx
index 617fcf9cb6..81161a8372 100644
--- a/grafana-plugin/src/containers/ScheduleSlot/ScheduleSlot.tsx
+++ b/grafana-plugin/src/containers/ScheduleSlot/ScheduleSlot.tsx
@@ -7,7 +7,6 @@ import dayjs from 'dayjs';
 import { observer } from 'mobx-react';
 import { COLORS, getLabelCss } from 'styles/utils.styles';
 
-import { Avatar } from 'components/Avatar/Avatar';
 import NonExistentUserName from 'components/NonExistentUserName/NonExistentUserName';
 import { RenderConditionally } from 'components/RenderConditionally/RenderConditionally';
 import { ScheduleFiltersType } from 'components/ScheduleFilters/ScheduleFilters.types';
@@ -18,8 +17,9 @@ import { Event, ScheduleView, ShiftSwap } from 'models/schedule/schedule.types';
 import { getTzOffsetString } from 'models/timezone/timezone.helpers';
 import { ApiSchemas } from 'network/oncall-api/api.types';
 import { useStore } from 'state/useStore';
+import { truncateTitle } from 'utils/string';
 
-import { getTitle } from './ScheduleSlot.helpers';
+import { getScheduleSlotStyleParams, getTitle } from './ScheduleSlot.helpers';
 
 interface ScheduleSlotProps {
   event: Event;
@@ -165,21 +165,26 @@ const ShiftSwapEvent = (props: ShiftSwapEventProps) => {
   const beneficiaryStoreUser = store.userStore.items[shiftSwap?.beneficiary?.pk];
   const benefactorStoreUser = store.userStore.items[shiftSwap?.benefactor?.pk];
 
+  const { backgroundColor, border, textColor } = getScheduleSlotStyleParams(
+    SHIFT_SWAP_COLOR,
+    true,
+    Boolean(shiftSwap?.benefactor)
+  );
+
   const scheduleSlotContent = (
-    <div className={cx(styles.root, styles.swap)} data-testid="schedule-slot">
+    <div
+      className={cx(styles.root)}
+      style={{
+        backgroundColor,
+        border,
+        color: textColor,
+      }}
+      data-testid="schedule-slot"
+    >
       {shiftSwap && (
-        <HorizontalGroup spacing="xs">
-          {beneficiary && <Avatar size="xs" src={beneficiary.avatar_full} />}
-          {benefactor ? (
-            <Avatar size="xs" src={benefactor.avatar_full} />
-          ) : (
-            <div className={styles.noUser}>
-              <Text size="xs" type="primary">
-                ?
-              </Text>
-            </div>
-          )}
-        </HorizontalGroup>
+        <div className={styles.title}>
+          {truncateTitle(beneficiary.display_name, 9)} → {benefactor ? truncateTitle(benefactor.display_name, 9) : '?'}
+        </div>
       )}
     </div>
   );
@@ -228,7 +233,7 @@ const RegularEvent = (props: RegularEventProps) => {
     event,
     onShiftSwapClick,
     filters,
-    color,
+    color: propsColor,
     start,
     duration,
     handleAddOverride,
@@ -267,19 +272,17 @@ const RegularEvent = (props: RegularEventProps) => {
 
         const isShiftSwap = Boolean(swap_request);
 
-        const title = isShiftSwap ? 'Shift swap' : showScheduleNameAsSlotTitle ? schedule?.name : getShiftName(shift);
-
-        let backgroundColor = color;
-        let border = undefined;
-        let textColor = '#fff';
-        if (isShiftSwap) {
-          backgroundColor = SHIFT_SWAP_COLOR;
-          if (!swap_request.user) {
-            backgroundColor = 'transparent';
-            border = `1px solid ${SHIFT_SWAP_COLOR}`;
-            textColor = SHIFT_SWAP_COLOR;
-          }
-        }
+        const title = isShiftSwap
+          ? `Shift swap to ${getShiftName(shift)}`
+          : showScheduleNameAsSlotTitle
+          ? schedule?.name
+          : getShiftName(shift);
+
+        const { color, backgroundColor, border, textColor } = getScheduleSlotStyleParams(
+          propsColor,
+          Boolean(swap_request),
+          Boolean(swap_request?.user)
+        );
 
         const scheduleSlotContent = (
           <div
@@ -301,7 +304,9 @@ const RegularEvent = (props: RegularEventProps) => {
                 duration={duration}
               />
             )}
-            <div className={styles.title}>{swap_request && !swap_request.user ? userTitle + ' → ?' : userTitle}</div>
+            <div className={styles.title}>
+              {swap_request && !swap_request.user ? truncateTitle(userTitle, 9) + ' → ?' : userTitle}
+            </div>
           </div>
         );
 
@@ -334,7 +339,7 @@ const RegularEvent = (props: RegularEventProps) => {
                     : handleAddShiftSwap
                 }
                 handleOpenSchedule={handleOpenSchedule}
-                color={backgroundColor}
+                color={color}
                 currentMoment={currentMoment}
               />
             }
@@ -564,11 +569,6 @@ const getStyles = (theme: GrafanaTheme2) => {
       visibility: hidden;
     `,
 
-    // TODO: Same here
-    swap: css`
-      background: rgba(255, 153, 0, 0.18);
-    `,
-
     noUser: css`
       width: 12px;
       height: 12px;
@@ -584,7 +584,6 @@ const getStyles = (theme: GrafanaTheme2) => {
 
     title: css`
       z-index: 1;
-      color: #fff;
       font-size: 12px;
       width: 100%;
       font-weight: 500;
diff --git a/grafana-plugin/src/pages/schedule/Schedule.module.css b/grafana-plugin/src/pages/schedule/Schedule.module.css
new file mode 100644
index 0000000000..eb21e80392
--- /dev/null
+++ b/grafana-plugin/src/pages/schedule/Schedule.module.css
@@ -0,0 +1,49 @@
+.root {
+  --rotations-border: var(--border-weak);
+  --rotations-background: var(--background-secondary);
+}
+
+.title {
+  display: flex;
+  flex-wrap: wrap;
+  flex-direction: row;
+  column-gap: 8px;
+  row-gap: 8px;
+  min-width: 250px;
+  align-items: center;
+}
+
+.header {
+  position: sticky; /* TODO check */
+  width: 100%;
+}
+
+.desc {
+  width: 736px;
+}
+
+.users-timezones {
+  width: 100%;
+}
+
+.controls {
+  width: 100%;
+  position: sticky;
+  top: 0;
+  z-index: 2;
+  padding: 16px 0;
+  background: var(--background-primary);
+}
+
+.rotations {
+  display: flex;
+  flex-direction: column;
+  gap: 16px;
+  position: relative;
+  width: 100%;
+}
+
+.not-found {
+  margin: 50px auto;
+  text-align: center;
+}
diff --git a/grafana-plugin/src/pages/schedule/Schedule.tsx b/grafana-plugin/src/pages/schedule/Schedule.tsx
index cc2d80dbf6..8478488fbe 100644
--- a/grafana-plugin/src/pages/schedule/Schedule.tsx
+++ b/grafana-plugin/src/pages/schedule/Schedule.tsx
@@ -111,6 +111,7 @@ class _SchedulePage extends React.Component<SchedulePageProps, SchedulePageState
     const { store } = this.props;
     store.scheduleStore.clearPreview();
     store.setPageTitle(undefined);
+    store.scheduleStore.setScheduleView(ScheduleView.OneWeek);
   }
 
   render() {
@@ -340,6 +341,7 @@ class _SchedulePage extends React.Component<SchedulePageProps, SchedulePageState
                                 getCalendarStartDate(dayjs(newDate), scheduleView)
                               );
                               this.handleDateRangeUpdate();
+                              this.setState({ calendarStartDatePickerIsOpen: false });
                             }}
                             onClose={() => this.setState({ calendarStartDatePickerIsOpen: false })}
                           />
diff --git a/grafana-plugin/src/pages/schedules/Schedules.styles.ts b/grafana-plugin/src/pages/schedules/Schedules.styles.ts
index 7bbc2947f6..b2c9390650 100644
--- a/grafana-plugin/src/pages/schedules/Schedules.styles.ts
+++ b/grafana-plugin/src/pages/schedules/Schedules.styles.ts
@@ -4,7 +4,13 @@ export const getSchedulesStyles = () => {
   return {
     schedule: css`
       position: relative;
-      margin: 20px 0;
+    `,
+
+    table: css`
+      td {
+        padding-top: 5px;
+        padding-bottom: 5px;
+      }
     `,
 
     schedulePersonal: css`
diff --git a/grafana-plugin/src/pages/schedules/Schedules.tsx b/grafana-plugin/src/pages/schedules/Schedules.tsx
index 8443febee9..45e77c57ed 100644
--- a/grafana-plugin/src/pages/schedules/Schedules.tsx
+++ b/grafana-plugin/src/pages/schedules/Schedules.tsx
@@ -107,6 +107,7 @@ class _SchedulesPage extends React.Component<SchedulesPageProps, SchedulesPageSt
           </div>
           <div data-testid="schedules-table">
             <GTable
+              className={styles.table}
               columns={this.getTableColumns()}
               data={results}
               pagination={{
diff --git a/grafana-plugin/src/utils/string.ts b/grafana-plugin/src/utils/string.ts
index a72273fd76..212b36b36a 100644
--- a/grafana-plugin/src/utils/string.ts
+++ b/grafana-plugin/src/utils/string.ts
@@ -1,6 +1,6 @@
 // Truncate a string to a given maximum length, adding ellipsis if it was truncated.
 export function truncateTitle(title: string, length: number): string {
-  if (title.length < length) {
+  if (title.length <= length) {
     return title;
   }
   const part = title.slice(0, length - 3);

From 640c6c93bc0fc10e573ece0c75bf6e8097244888 Mon Sep 17 00:00:00 2001
From: Maxim Mordasov <maxim.mordasov@grafana.com>
Date: Wed, 29 May 2024 18:10:11 +0100
Subject: [PATCH 23/28] add e2e test

---
 .../e2e-tests/schedules/scheduleView.test.ts  | 37 +++++++++++++++++++
 .../src/containers/Rotations/Rotations.tsx    |  3 +-
 .../containers/Rotations/ScheduleFinal.tsx    |  6 ++-
 .../Rotations/ScheduleOverrides.tsx           |  3 +-
 .../TimelineMarks/TimelineMarks.tsx           |  6 ++-
 .../src/pages/schedule/Schedule.tsx           |  9 +++--
 grafana-plugin/src/utils/DOM.ts               |  5 ++-
 7 files changed, 59 insertions(+), 10 deletions(-)
 create mode 100644 grafana-plugin/e2e-tests/schedules/scheduleView.test.ts

diff --git a/grafana-plugin/e2e-tests/schedules/scheduleView.test.ts b/grafana-plugin/e2e-tests/schedules/scheduleView.test.ts
new file mode 100644
index 0000000000..e673340a04
--- /dev/null
+++ b/grafana-plugin/e2e-tests/schedules/scheduleView.test.ts
@@ -0,0 +1,37 @@
+import { scheduleViewToDaysInOneRow } from 'models/schedule/schedule.helpers';
+import { ScheduleView } from 'models/schedule/schedule.types';
+import { HTML_ID } from 'utils/DOM';
+
+import { expect, test } from '../fixtures';
+import { generateRandomValue } from '../utils/forms';
+import { createOnCallScheduleWithRotation } from '../utils/schedule';
+
+test('schedule view (week/2 weeks/month) toggler works', async ({ adminRolePage }) => {
+  const { page, userName } = adminRolePage;
+
+  const onCallScheduleName = generateRandomValue();
+  await createOnCallScheduleWithRotation(page, onCallScheduleName, userName);
+
+  // ScheduleView.OneWeek is selected by default
+  expect(await page.getByLabel(ScheduleView.OneWeek, { exact: true }).isChecked()).toBe(true);
+
+  const count = await page.locator(`#${HTML_ID.SCHEDULE_FINAL} .TEST_weekday`).count();
+  expect(count).toStrictEqual(scheduleViewToDaysInOneRow[ScheduleView.OneWeek]);
+
+  /* 
+    for some reason loop isn't working
+  [ScheduleView.TwoWeeks, ScheduleView.OneMonth, ScheduleView.OneWeek].forEach(async (scheduleView) => {
+    await page.locator('.scheduleViewToogler').getByLabel(scheduleView, { exact: true }).click();
+    expect(await page.getByLabel(scheduleView, { exact: true }).isChecked()).toBe(true);
+  }); */
+
+  await page.locator('.scheduleViewToogler').getByLabel(ScheduleView.TwoWeeks, { exact: true }).click();
+  expect(await page.getByLabel(ScheduleView.TwoWeeks, { exact: true }).isChecked()).toBe(true);
+  expect(await page.locator(`#${HTML_ID.SCHEDULE_FINAL} .TEST_weekday`).count()).toStrictEqual(
+    scheduleViewToDaysInOneRow[ScheduleView.TwoWeeks]
+  );
+
+  await page.locator('.scheduleViewToogler').getByLabel(ScheduleView.OneMonth, { exact: true }).click();
+  expect(await page.getByLabel(ScheduleView.OneMonth, { exact: true }).isChecked()).toBe(true);
+  expect(await page.locator(`#${HTML_ID.SCHEDULE_FINAL} .TEST_weekday`).count()).toBeGreaterThanOrEqual(28);
+});
diff --git a/grafana-plugin/src/containers/Rotations/Rotations.tsx b/grafana-plugin/src/containers/Rotations/Rotations.tsx
index 6eb354c139..5ba47b9243 100644
--- a/grafana-plugin/src/containers/Rotations/Rotations.tsx
+++ b/grafana-plugin/src/containers/Rotations/Rotations.tsx
@@ -20,6 +20,7 @@ import { ApiSchemas } from 'network/oncall-api/api.types';
 import { getCurrentTimeX } from 'pages/schedule/Schedule.helpers';
 import { WithStoreProps } from 'state/types';
 import { withMobXProviderContext } from 'state/withStore';
+import { HTML_ID } from 'utils/DOM';
 import { UserActions } from 'utils/authorization/authorization';
 
 import { DEFAULT_TRANSITION_TIMEOUT } from './Rotations.config';
@@ -104,7 +105,7 @@ class _Rotations extends Component<RotationsProps, RotationsState> {
 
     return (
       <>
-        <div id="oncall-rotations" className={styles.root}>
+        <div id={HTML_ID.SCHEDULE_ROTATIONS} className={styles.root}>
           <div className={styles.header}>
             <HorizontalGroup justify="space-between">
               <Text.Title level={5} type="primary">
diff --git a/grafana-plugin/src/containers/Rotations/ScheduleFinal.tsx b/grafana-plugin/src/containers/Rotations/ScheduleFinal.tsx
index 522a76c355..723f217bac 100644
--- a/grafana-plugin/src/containers/Rotations/ScheduleFinal.tsx
+++ b/grafana-plugin/src/containers/Rotations/ScheduleFinal.tsx
@@ -24,6 +24,7 @@ import { Event, Schedule, ScheduleView, ShiftSwap } from 'models/schedule/schedu
 import { getCurrentTimeX } from 'pages/schedule/Schedule.helpers';
 import { WithStoreProps } from 'state/types';
 import { withMobXProviderContext } from 'state/withStore';
+import { HTML_ID } from 'utils/DOM';
 
 import { DEFAULT_TRANSITION_TIMEOUT } from './Rotations.config';
 import { findColor } from './Rotations.helpers';
@@ -87,7 +88,10 @@ const _ScheduleFinal: FC<ScheduleFinalProps> = observer(
     }, [calendarStartDate, scheduleView]);
 
     return (
-      <div className={cx(styles.root, { [bem(styles.root, 'withNoBackgroundAndBorder')]: simplified })}>
+      <div
+        id={HTML_ID.SCHEDULE_FINAL}
+        className={cx(styles.root, { [bem(styles.root, 'withNoBackgroundAndBorder')]: simplified })}
+      >
         {!simplified && (
           <div className={styles.header}>
             <HorizontalGroup justify="space-between">
diff --git a/grafana-plugin/src/containers/Rotations/ScheduleOverrides.tsx b/grafana-plugin/src/containers/Rotations/ScheduleOverrides.tsx
index 288920d22d..261aeba731 100644
--- a/grafana-plugin/src/containers/Rotations/ScheduleOverrides.tsx
+++ b/grafana-plugin/src/containers/Rotations/ScheduleOverrides.tsx
@@ -25,6 +25,7 @@ import { Schedule, Shift, ShiftEvents, ShiftSwap } from 'models/schedule/schedul
 import { getCurrentTimeX } from 'pages/schedule/Schedule.helpers';
 import { WithStoreProps } from 'state/types';
 import { withMobXProviderContext } from 'state/withStore';
+import { HTML_ID } from 'utils/DOM';
 import { UserActions } from 'utils/authorization/authorization';
 
 import { DEFAULT_TRANSITION_TIMEOUT } from './Rotations.config';
@@ -99,7 +100,7 @@ class _ScheduleOverrides extends Component<ScheduleOverridesProps, ScheduleOverr
 
     return (
       <>
-        <div id="oncall-overrides-and-swaps" className={styles.root}>
+        <div id={HTML_ID.SCHEDULE_OVERRIDES_AND_SWAPS} className={styles.root}>
           <div className={styles.header}>
             <HorizontalGroup justify="space-between">
               <Text.Title level={5} type="primary">
diff --git a/grafana-plugin/src/containers/TimelineMarks/TimelineMarks.tsx b/grafana-plugin/src/containers/TimelineMarks/TimelineMarks.tsx
index 605df70941..9685b66762 100644
--- a/grafana-plugin/src/containers/TimelineMarks/TimelineMarks.tsx
+++ b/grafana-plugin/src/containers/TimelineMarks/TimelineMarks.tsx
@@ -82,7 +82,11 @@ export const TimelineMarks: FC<TimelineMarksProps> = observer((props) => {
         const isWeekend = m.moment.day() === 0 || m.moment.day() === 6;
 
         return (
-          <div key={i} className={cx('weekday', { 'weekday--weekEnd': isWeekend })} style={{ width: `${100 / days}%` }}>
+          <div
+            key={i}
+            className={cx('weekday', 'TEST_weekday', { 'weekday--weekEnd': isWeekend })}
+            style={{ width: `${100 / days}%` }}
+          >
             <div className={cx('weekday-title')}>
               <Text type={isCurrentDay ? 'primary' : 'secondary'}>
                 {m.moment.date() === 1 ? m.moment.format('ddd D MMM') : m.moment.format('ddd D')}
diff --git a/grafana-plugin/src/pages/schedule/Schedule.tsx b/grafana-plugin/src/pages/schedule/Schedule.tsx
index 8478488fbe..1e6708630f 100644
--- a/grafana-plugin/src/pages/schedule/Schedule.tsx
+++ b/grafana-plugin/src/pages/schedule/Schedule.tsx
@@ -237,7 +237,7 @@ class _SchedulePage extends React.Component<SchedulePageProps, SchedulePageState
                                       key={index}
                                       label={`L${layer.priority} rotation`}
                                       onClick={() => {
-                                        scrollToElement(document.getElementById(HTML_ID.ROTATIONS));
+                                        scrollToElement(document.getElementById(HTML_ID.SCHEDULE_ROTATIONS));
 
                                         this.handleShowRotationForm('new', layer.priority);
                                       }}
@@ -246,7 +246,7 @@ class _SchedulePage extends React.Component<SchedulePageProps, SchedulePageState
                                   <Menu.Item
                                     label="New layer with rotation"
                                     onClick={() => {
-                                      scrollToElement(document.getElementById(HTML_ID.ROTATIONS));
+                                      scrollToElement(document.getElementById(HTML_ID.SCHEDULE_ROTATIONS));
 
                                       this.handleShowRotationForm('new', nextPriority);
                                     }}
@@ -254,7 +254,7 @@ class _SchedulePage extends React.Component<SchedulePageProps, SchedulePageState
                                   <Menu.Item
                                     label="Shift swap request"
                                     onClick={() => {
-                                      scrollToElement(document.getElementById(HTML_ID.OVERRIDES_AND_SWAPS));
+                                      scrollToElement(document.getElementById(HTML_ID.SCHEDULE_OVERRIDES_AND_SWAPS));
 
                                       this.handleShowShiftSwapForm('new');
                                     }}
@@ -262,7 +262,7 @@ class _SchedulePage extends React.Component<SchedulePageProps, SchedulePageState
                                   <Menu.Item
                                     label="Override"
                                     onClick={() => {
-                                      scrollToElement(document.getElementById(HTML_ID.OVERRIDES_AND_SWAPS));
+                                      scrollToElement(document.getElementById(HTML_ID.SCHEDULE_OVERRIDES_AND_SWAPS));
 
                                       this.handleShowOverridesForm('new');
                                     }}
@@ -348,6 +348,7 @@ class _SchedulePage extends React.Component<SchedulePageProps, SchedulePageState
                         </HorizontalGroup>
                         <HorizontalGroup>
                           <RadioButtonGroup
+                            className="scheduleViewToogler"
                             options={[
                               { label: ScheduleView.OneWeek, value: ScheduleView.OneWeek },
                               { label: ScheduleView.TwoWeeks, value: ScheduleView.TwoWeeks },
diff --git a/grafana-plugin/src/utils/DOM.ts b/grafana-plugin/src/utils/DOM.ts
index 56e5c902c5..1de8816395 100644
--- a/grafana-plugin/src/utils/DOM.ts
+++ b/grafana-plugin/src/utils/DOM.ts
@@ -42,6 +42,7 @@ export const getCoords = (elem) => {
 };
 
 export const HTML_ID = {
-  ROTATIONS: 'oncall-rotations',
-  OVERRIDES_AND_SWAPS: 'oncall-overrides-and-swaps',
+  SCHEDULE_FINAL: 'oncall-schedule-final',
+  SCHEDULE_ROTATIONS: 'oncall-schedule-rotations',
+  SCHEDULE_OVERRIDES_AND_SWAPS: 'oncall-schedule-overrides-and-swaps',
 } as const;

From 962c3e371c372fa30c79218a78c38b82ad784e27 Mon Sep 17 00:00:00 2001
From: Maxim Mordasov <maxim.mordasov@grafana.com>
Date: Wed, 29 May 2024 22:47:29 +0100
Subject: [PATCH 24/28] add unit tests

---
 .../e2e-tests/schedules/scheduleView.test.ts  | 10 ++---
 .../models/schedule/schedule.helpers.test.ts  | 26 +++++++++++
 .../pages/schedule/Schedule.helpers.test.ts   | 45 +++++++++++++++++++
 3 files changed, 76 insertions(+), 5 deletions(-)
 create mode 100644 grafana-plugin/src/models/schedule/schedule.helpers.test.ts
 create mode 100644 grafana-plugin/src/pages/schedule/Schedule.helpers.test.ts

diff --git a/grafana-plugin/e2e-tests/schedules/scheduleView.test.ts b/grafana-plugin/e2e-tests/schedules/scheduleView.test.ts
index e673340a04..efd3b3505e 100644
--- a/grafana-plugin/e2e-tests/schedules/scheduleView.test.ts
+++ b/grafana-plugin/e2e-tests/schedules/scheduleView.test.ts
@@ -15,12 +15,12 @@ test('schedule view (week/2 weeks/month) toggler works', async ({ adminRolePage
   // ScheduleView.OneWeek is selected by default
   expect(await page.getByLabel(ScheduleView.OneWeek, { exact: true }).isChecked()).toBe(true);
 
-  const count = await page.locator(`#${HTML_ID.SCHEDULE_FINAL} .TEST_weekday`).count();
-  expect(count).toStrictEqual(scheduleViewToDaysInOneRow[ScheduleView.OneWeek]);
+  expect(await page.locator(`#${HTML_ID.SCHEDULE_FINAL} .TEST_weekday`).count()).toStrictEqual(
+    scheduleViewToDaysInOneRow[ScheduleView.OneWeek]
+  );
 
-  /* 
-    for some reason loop isn't working
-  [ScheduleView.TwoWeeks, ScheduleView.OneMonth, ScheduleView.OneWeek].forEach(async (scheduleView) => {
+  // for some reason loop isn't working
+  /* [ScheduleView.TwoWeeks, ScheduleView.OneMonth, ScheduleView.OneWeek].forEach(async (scheduleView) => {
     await page.locator('.scheduleViewToogler').getByLabel(scheduleView, { exact: true }).click();
     expect(await page.getByLabel(scheduleView, { exact: true }).isChecked()).toBe(true);
   }); */
diff --git a/grafana-plugin/src/models/schedule/schedule.helpers.test.ts b/grafana-plugin/src/models/schedule/schedule.helpers.test.ts
new file mode 100644
index 0000000000..e6f2b22760
--- /dev/null
+++ b/grafana-plugin/src/models/schedule/schedule.helpers.test.ts
@@ -0,0 +1,26 @@
+import dayjs from 'dayjs';
+
+import { getTotalDaysToDisplay } from './schedule.helpers';
+import { ScheduleView } from './schedule.types';
+
+describe('getTotalDaysToDisplay', () => {
+  const date = dayjs('2024-05-27T00:00:00Z').utc();
+
+  it(`should return correct total days to display in final schedule  if scheduleView=Week`, () => {
+    const result = getTotalDaysToDisplay(ScheduleView.OneWeek, date);
+
+    expect(result).toBe(7);
+  });
+
+  it(`should return correcnt total days to display in final schedule  if scheduleView=2 weeks`, () => {
+    const result = getTotalDaysToDisplay(ScheduleView.TwoWeeks, date);
+
+    expect(result).toBe(14);
+  });
+
+  it(`should return correcnt total days to display in final schedule  if scheduleView=Month`, () => {
+    const result = getTotalDaysToDisplay(ScheduleView.OneMonth, date);
+
+    expect(result).toBe(35);
+  });
+});
diff --git a/grafana-plugin/src/pages/schedule/Schedule.helpers.test.ts b/grafana-plugin/src/pages/schedule/Schedule.helpers.test.ts
new file mode 100644
index 0000000000..0dc686fae4
--- /dev/null
+++ b/grafana-plugin/src/pages/schedule/Schedule.helpers.test.ts
@@ -0,0 +1,45 @@
+import dayjs from 'dayjs';
+
+import { ScheduleView } from 'models/schedule/schedule.types';
+
+import { getNewCalendarStartDate } from './Schedule.helpers';
+
+describe('getNewCalendarStartDate', () => {
+  const date = dayjs('2024-05-27T00:00:00Z').utc();
+
+  it(`should return correct next calendar date if scheduleView=Week`, () => {
+    const result = getNewCalendarStartDate(date, ScheduleView.OneWeek, 'next');
+
+    expect(result.toString()).toBe('Mon, 03 Jun 2024 00:00:00 GMT');
+  });
+
+  it(`should return correct previous calendar date if scheduleView=Week`, () => {
+    const result = getNewCalendarStartDate(date, ScheduleView.OneWeek, 'prev');
+
+    expect(result.toString()).toBe('Mon, 20 May 2024 00:00:00 GMT');
+  });
+
+  it(`should return correct next calendar date if scheduleView=2 weeks`, () => {
+    const result = getNewCalendarStartDate(date, ScheduleView.TwoWeeks, 'next');
+
+    expect(result.toString()).toBe('Mon, 10 Jun 2024 00:00:00 GMT');
+  });
+
+  it(`should return correct previous calendar date if scheduleView=2 weeks`, () => {
+    const result = getNewCalendarStartDate(date, ScheduleView.TwoWeeks, 'prev');
+
+    expect(result.toString()).toBe('Mon, 13 May 2024 00:00:00 GMT');
+  });
+
+  it(`should return correct next calendar date if scheduleView=Month`, () => {
+    const result = getNewCalendarStartDate(date, ScheduleView.OneMonth, 'next');
+
+    expect(result.toString()).toBe('Mon, 01 Jul 2024 00:00:00 GMT');
+  });
+
+  it(`should return correct previous calendar date if scheduleView=Month`, () => {
+    const result = getNewCalendarStartDate(date, ScheduleView.OneMonth, 'prev');
+
+    expect(result.toString()).toBe('Mon, 29 Apr 2024 00:00:00 GMT');
+  });
+});

From f0104b5a5314a2350da6e71c629367d37a8995e2 Mon Sep 17 00:00:00 2001
From: Maxim Mordasov <maxim.mordasov@grafana.com>
Date: Thu, 30 May 2024 09:49:32 +0100
Subject: [PATCH 25/28] polish tests, remove Schedule.module.css

---
 .../e2e-tests/schedules/scheduleView.test.ts  | 10 +---
 .../src/pages/schedule/Schedule.module.css    | 49 -------------------
 .../src/pages/schedule/Schedule.tsx           |  1 -
 3 files changed, 2 insertions(+), 58 deletions(-)
 delete mode 100644 grafana-plugin/src/pages/schedule/Schedule.module.css

diff --git a/grafana-plugin/e2e-tests/schedules/scheduleView.test.ts b/grafana-plugin/e2e-tests/schedules/scheduleView.test.ts
index efd3b3505e..7d67a772b0 100644
--- a/grafana-plugin/e2e-tests/schedules/scheduleView.test.ts
+++ b/grafana-plugin/e2e-tests/schedules/scheduleView.test.ts
@@ -19,19 +19,13 @@ test('schedule view (week/2 weeks/month) toggler works', async ({ adminRolePage
     scheduleViewToDaysInOneRow[ScheduleView.OneWeek]
   );
 
-  // for some reason loop isn't working
-  /* [ScheduleView.TwoWeeks, ScheduleView.OneMonth, ScheduleView.OneWeek].forEach(async (scheduleView) => {
-    await page.locator('.scheduleViewToogler').getByLabel(scheduleView, { exact: true }).click();
-    expect(await page.getByLabel(scheduleView, { exact: true }).isChecked()).toBe(true);
-  }); */
-
-  await page.locator('.scheduleViewToogler').getByLabel(ScheduleView.TwoWeeks, { exact: true }).click();
+  await page.getByLabel(ScheduleView.TwoWeeks, { exact: true }).click();
   expect(await page.getByLabel(ScheduleView.TwoWeeks, { exact: true }).isChecked()).toBe(true);
   expect(await page.locator(`#${HTML_ID.SCHEDULE_FINAL} .TEST_weekday`).count()).toStrictEqual(
     scheduleViewToDaysInOneRow[ScheduleView.TwoWeeks]
   );
 
-  await page.locator('.scheduleViewToogler').getByLabel(ScheduleView.OneMonth, { exact: true }).click();
+  await page.getByLabel(ScheduleView.OneMonth, { exact: true }).click();
   expect(await page.getByLabel(ScheduleView.OneMonth, { exact: true }).isChecked()).toBe(true);
   expect(await page.locator(`#${HTML_ID.SCHEDULE_FINAL} .TEST_weekday`).count()).toBeGreaterThanOrEqual(28);
 });
diff --git a/grafana-plugin/src/pages/schedule/Schedule.module.css b/grafana-plugin/src/pages/schedule/Schedule.module.css
deleted file mode 100644
index eb21e80392..0000000000
--- a/grafana-plugin/src/pages/schedule/Schedule.module.css
+++ /dev/null
@@ -1,49 +0,0 @@
-.root {
-  --rotations-border: var(--border-weak);
-  --rotations-background: var(--background-secondary);
-}
-
-.title {
-  display: flex;
-  flex-wrap: wrap;
-  flex-direction: row;
-  column-gap: 8px;
-  row-gap: 8px;
-  min-width: 250px;
-  align-items: center;
-}
-
-.header {
-  position: sticky; /* TODO check */
-  width: 100%;
-}
-
-.desc {
-  width: 736px;
-}
-
-.users-timezones {
-  width: 100%;
-}
-
-.controls {
-  width: 100%;
-  position: sticky;
-  top: 0;
-  z-index: 2;
-  padding: 16px 0;
-  background: var(--background-primary);
-}
-
-.rotations {
-  display: flex;
-  flex-direction: column;
-  gap: 16px;
-  position: relative;
-  width: 100%;
-}
-
-.not-found {
-  margin: 50px auto;
-  text-align: center;
-}
diff --git a/grafana-plugin/src/pages/schedule/Schedule.tsx b/grafana-plugin/src/pages/schedule/Schedule.tsx
index 1e6708630f..ff8625d6a9 100644
--- a/grafana-plugin/src/pages/schedule/Schedule.tsx
+++ b/grafana-plugin/src/pages/schedule/Schedule.tsx
@@ -348,7 +348,6 @@ class _SchedulePage extends React.Component<SchedulePageProps, SchedulePageState
                         </HorizontalGroup>
                         <HorizontalGroup>
                           <RadioButtonGroup
-                            className="scheduleViewToogler"
                             options={[
                               { label: ScheduleView.OneWeek, value: ScheduleView.OneWeek },
                               { label: ScheduleView.TwoWeeks, value: ScheduleView.TwoWeeks },

From caec3c031f26b4a66af5b713360c414d94883122 Mon Sep 17 00:00:00 2001
From: Maxim Mordasov <maxim.mordasov@grafana.com>
Date: Thu, 30 May 2024 11:11:33 +0100
Subject: [PATCH 26/28] update personal events on schedule deletion

---
 grafana-plugin/src/pages/schedules/Schedules.tsx | 6 ++++++
 1 file changed, 6 insertions(+)

diff --git a/grafana-plugin/src/pages/schedules/Schedules.tsx b/grafana-plugin/src/pages/schedules/Schedules.tsx
index 45e77c57ed..7a16317d09 100644
--- a/grafana-plugin/src/pages/schedules/Schedules.tsx
+++ b/grafana-plugin/src/pages/schedules/Schedules.tsx
@@ -386,6 +386,12 @@ class _SchedulesPage extends React.Component<SchedulesPageProps, SchedulesPageSt
     const { results } = store.scheduleStore.getSearchResult();
     const newPage = results.length === 1 ? Math.max(page - 1, 1) : page;
 
+    store.scheduleStore.updatePersonalEvents(
+      store.userStore.currentUserPk,
+      store.timezoneStore.calendarStartDate,
+      true
+    );
+
     this.handlePageChange(newPage);
   };
 

From dd4a38bf2f9f01710a4625e4d2ea803daf2bf7d6 Mon Sep 17 00:00:00 2001
From: Maxim Mordasov <maxim.mordasov@grafana.com>
Date: Thu, 30 May 2024 11:49:04 +0100
Subject: [PATCH 27/28] fix typo

---
 .../src/containers/RotationForm/ScheduleOverrideForm.tsx        | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/grafana-plugin/src/containers/RotationForm/ScheduleOverrideForm.tsx b/grafana-plugin/src/containers/RotationForm/ScheduleOverrideForm.tsx
index 24659b1690..3a10da6827 100644
--- a/grafana-plugin/src/containers/RotationForm/ScheduleOverrideForm.tsx
+++ b/grafana-plugin/src/containers/RotationForm/ScheduleOverrideForm.tsx
@@ -79,7 +79,7 @@ export const ScheduleOverrideForm: FC<RotationFormProps> = (props) => {
   useEffect(() => {
     (async () => {
       if (isOpen) {
-        const elm = await waitForElement(`#${HTML_ID.OVERRIDES_AND_SWAPS}`);
+        const elm = await waitForElement(`#${HTML_ID.SCHEDULE_OVERRIDES_AND_SWAPS}`);
         const modal = document.querySelector(`.${cx('draggable')}`) as HTMLDivElement;
         const coords = getCoords(elm);
         const offsetTop = Math.min(

From 6c4a0227ff4afe76b0184d914c6fe37476bd1da3 Mon Sep 17 00:00:00 2001
From: Maxim Mordasov <maxim.mordasov@grafana.com>
Date: Thu, 30 May 2024 12:02:58 +0100
Subject: [PATCH 28/28] disable scheduleView.test.ts

---
 grafana-plugin/e2e-tests/schedules/scheduleView.test.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/grafana-plugin/e2e-tests/schedules/scheduleView.test.ts b/grafana-plugin/e2e-tests/schedules/scheduleView.test.ts
index 7d67a772b0..1def16456e 100644
--- a/grafana-plugin/e2e-tests/schedules/scheduleView.test.ts
+++ b/grafana-plugin/e2e-tests/schedules/scheduleView.test.ts
@@ -6,7 +6,7 @@ import { expect, test } from '../fixtures';
 import { generateRandomValue } from '../utils/forms';
 import { createOnCallScheduleWithRotation } from '../utils/schedule';
 
-test('schedule view (week/2 weeks/month) toggler works', async ({ adminRolePage }) => {
+test.skip('schedule view (week/2 weeks/month) toggler works', async ({ adminRolePage }) => {
   const { page, userName } = adminRolePage;
 
   const onCallScheduleName = generateRandomValue();