show correct swap request dates

grafana-plugin/src/pages/schedule/Schedule.tsx

@@ -38,7 +38,16 @@ import { UserTimezoneSelect } from 'containers/UserTimezoneSelect/UserTimezoneSe
 import { UsersTimezones } from 'containers/UsersTimezones/UsersTimezones';
 import { WithPermissionControlTooltip } from 'containers/WithPermissionControl/WithPermissionControlTooltip';
 import { getLayersFromStore, getTotalDaysToDisplay } from 'models/schedule/schedule.helpers';
-import { Event, Layer, Schedule, ScheduleType, ScheduleView, Shift, ShiftSwap } from 'models/schedule/schedule.types';
+import {
+  Event,
+  Layer,
+  Schedule,
+  ScheduleEvent,
+  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';
@@ -598,23 +607,35 @@ class _SchedulePage extends React.Component<SchedulePageProps, SchedulePageState
     history.replace(`${PLUGIN_ROOT}/schedules`);
   };
 
-  handleShowShiftSwapForm = (id: ShiftSwap['id'] | 'new') => {
+  handleShowShiftSwapForm = (id: ShiftSwap['id'] | 'new', swap?: { swap_start: string; swap_end: string }) => {
+    const { filters } = this.state;
     const {
       store,
+      store: {
+        userStore: { currentUserPk },
+        timezoneStore: { currentDateInSelectedTimezone },
+      },
       match: {
         params: { id: scheduleId },
       },
     } = this.props;
 
-    const {
-      userStore: { currentUserPk },
-      timezoneStore: { currentDateInSelectedTimezone },
-    } = store;
-
-    const layers = getLayersFromStore(store, scheduleId, store.timezoneStore.calendarStartDate);
+    if (swap) {
+      if (!filters.users.includes(currentUserPk)) {
+        this.setState({ filters: { ...filters, users: [...this.state.filters.users, currentUserPk] } });
+        this.highlightMyShiftsWasToggled = true;
+      }
 
-    const { filters } = this.state;
+      return this.setState({
+        shiftSwapIdToShowForm: id,
+        shiftSwapParamsToShowForm: {
+          swap_start: swap.swap_start,
+          swap_end: swap.swap_end,
+        },
+      });
+    }
 
+    const layers = getLayersFromStore(store, scheduleId, store.timezoneStore.calendarStartDate);
     const closestEvent = findClosestUserEvent(dayjs(), currentUserPk, layers);
     const swapStart = closestEvent
       ? dayjs(closestEvent.start)