From 337af8918d7f5ee4be3cede8bdd31c4eacf173a1 Mon Sep 17 00:00:00 2001
From: Maxim <maxim.mordasov@grafana.com>
Date: Sat, 30 Jul 2022 23:01:06 +0300
Subject: [PATCH] some bug fixes

---
 .../containers/ScheduleForm/ScheduleForm.tsx  |  2 +-
 .../src/pages/schedules/Schedules.tsx         | 10 +++----
 .../src/pages/schedules_NEW/Schedules.tsx     | 28 +++++++++++++++----
 3 files changed, 27 insertions(+), 13 deletions(-)

diff --git a/grafana-plugin/src/containers/ScheduleForm/ScheduleForm.tsx b/grafana-plugin/src/containers/ScheduleForm/ScheduleForm.tsx
index 4f78f860..e2078035 100644
--- a/grafana-plugin/src/containers/ScheduleForm/ScheduleForm.tsx
+++ b/grafana-plugin/src/containers/ScheduleForm/ScheduleForm.tsx
@@ -25,7 +25,7 @@ interface ScheduleFormProps {
   onHide: () => void;
   onUpdate: () => void;
   onCreate: (data: Schedule) => void;
-  type: ScheduleType;
+  type?: ScheduleType;
 }
 
 const scheduleTypeToForm = {
diff --git a/grafana-plugin/src/pages/schedules/Schedules.tsx b/grafana-plugin/src/pages/schedules/Schedules.tsx
index d538a81d..9b2e5e3a 100644
--- a/grafana-plugin/src/pages/schedules/Schedules.tsx
+++ b/grafana-plugin/src/pages/schedules/Schedules.tsx
@@ -5,11 +5,10 @@ import { getLocationSrv } from '@grafana/runtime';
 import {
   Button,
   ConfirmModal,
-  Modal,
-  DatePickerWithInput,
   HorizontalGroup,
   Icon,
   LoadingPlaceholder,
+  Modal,
   PENDING_COLOR,
   Tooltip,
   VerticalGroup,
@@ -17,7 +16,7 @@ import {
 import cn from 'classnames/bind';
 import { omit } from 'lodash-es';
 import { observer } from 'mobx-react';
-import moment, { Moment } from 'moment-timezone';
+import moment from 'moment-timezone';
 
 import instructionsImage from 'assets/img/events_instructions.png';
 import Avatar from 'components/Avatar/Avatar';
@@ -28,12 +27,10 @@ import { SchedulesFiltersType } from 'components/SchedulesFilters/SchedulesFilte
 import Text from 'components/Text/Text';
 import Tutorial from 'components/Tutorial/Tutorial';
 import { TutorialStep } from 'components/Tutorial/Tutorial.types';
-import GSelect from 'containers/GSelect/GSelect';
 import ScheduleForm from 'containers/ScheduleForm/ScheduleForm';
 import ScheduleICalSettings from 'containers/ScheduleIcalLink/ScheduleIcalLink';
 import { WithPermissionControl } from 'containers/WithPermissionControl/WithPermissionControl';
-import { Schedule, ScheduleEvent } from 'models/schedule/schedule.types';
-import { PRIVATE_CHANNEL_NAME } from 'models/slack_channel/slack_channel.config';
+import { Schedule, ScheduleEvent, ScheduleType } from 'models/schedule/schedule.types';
 import { getSlackChannelName } from 'models/slack_channel/slack_channel.helpers';
 import { WithStoreProps } from 'state/types';
 import { UserAction } from 'state/userAction';
@@ -217,6 +214,7 @@ class SchedulesPage extends React.Component<SchedulesPageProps, SchedulesPageSta
         {scheduleIdToEdit && (
           <ScheduleForm
             id={scheduleIdToEdit}
+            type={ScheduleType.Ical}
             onUpdate={this.update}
             onHide={() => {
               this.setState({ scheduleIdToEdit: undefined });
diff --git a/grafana-plugin/src/pages/schedules_NEW/Schedules.tsx b/grafana-plugin/src/pages/schedules_NEW/Schedules.tsx
index f502a664..283cd2a2 100644
--- a/grafana-plugin/src/pages/schedules_NEW/Schedules.tsx
+++ b/grafana-plugin/src/pages/schedules_NEW/Schedules.tsx
@@ -37,6 +37,7 @@ interface SchedulesPageState {
   startMoment: dayjs.Dayjs;
   filters: SchedulesFiltersType;
   showNewScheduleSelector: boolean;
+  expandedRowKeys: Array<Schedule['id']>;
 }
 
 @observer
@@ -49,6 +50,7 @@ class SchedulesPage extends React.Component<SchedulesPageProps, SchedulesPageSta
       startMoment: getStartOfWeek(store.currentTimezone),
       filters: { searchTerm: '', status: 'all', type: 'all' },
       showNewScheduleSelector: false,
+      expandedRowKeys: [],
     };
   }
 
@@ -59,11 +61,9 @@ class SchedulesPage extends React.Component<SchedulesPageProps, SchedulesPageSta
     store.scheduleStore.updateItems();
   }
 
-  componentDidUpdate() {}
-
   render() {
     const { store } = this.props;
-    const { filters, showNewScheduleSelector } = this.state;
+    const { filters, showNewScheduleSelector, expandedRowKeys } = this.state;
 
     const { scheduleStore } = store;
 
@@ -125,7 +125,7 @@ class SchedulesPage extends React.Component<SchedulesPageProps, SchedulesPageSta
                     onChange={this.handleTimezoneChange}
                   />
                 )}
-                <Button size="sm" variant="primary" onClick={this.handleCreateScheduleClick}>
+                <Button variant="primary" onClick={this.handleCreateScheduleClick}>
                   + New schedule
                 </Button>
               </HorizontalGroup>
@@ -136,6 +136,7 @@ class SchedulesPage extends React.Component<SchedulesPageProps, SchedulesPageSta
               pagination={{ page: 1, total: 1, onChange: this.handlePageChange }}
               rowKey="id"
               expandable={{
+                expandedRowKeys: expandedRowKeys,
                 onExpand: this.handleExpandRow,
                 expandedRowRender: this.renderSchedule,
                 expandRowByClick: true,
@@ -162,7 +163,7 @@ class SchedulesPage extends React.Component<SchedulesPageProps, SchedulesPageSta
 
     store.currentTimezone = value;
 
-    this.setState({ startMoment: getStartOfWeek(value) });
+    this.setState({ startMoment: getStartOfWeek(value) }, this.updateEvents);
   };
 
   handleCreateScheduleClick = () => {
@@ -179,8 +180,23 @@ class SchedulesPage extends React.Component<SchedulesPageProps, SchedulesPageSta
 
   handleExpandRow = (expanded: boolean, data: Schedule) => {
     const { store } = this.props;
+    const { expandedRowKeys } = this.state;
     const { startMoment } = this.state;
-    store.scheduleStore.updateEvents(data.id, getFromString(startMoment), 'final');
+    if (expanded && !expandedRowKeys.includes(data.id)) {
+      this.setState({ expandedRowKeys: [...this.state.expandedRowKeys, data.id] }, this.updateEvents);
+    } else if (!expanded && expandedRowKeys.includes(data.id)) {
+      const index = expandedRowKeys.indexOf(data.id);
+      this.setState({ expandedRowKeys: [...expandedRowKeys.splice(index, 1)] }, this.updateEvents);
+    }
+  };
+
+  updateEvents = () => {
+    const { store } = this.props;
+    const { expandedRowKeys, startMoment } = this.state;
+
+    expandedRowKeys.forEach((scheduleId) => {
+      store.scheduleStore.updateEvents(scheduleId, getFromString(startMoment), 'final');
+    });
   };
 
   renderSchedule = (data: Schedule) => {