From 8d5299c47610039bc044476d161ee3cca40f88fd Mon Sep 17 00:00:00 2001 From: Maxim Date: Wed, 5 Oct 2022 11:32:10 +0300 Subject: [PATCH] add settings button to new schedules list --- .../src/components/Table/Table.module.css | 4 ++ grafana-plugin/src/components/Table/Table.tsx | 3 +- .../components/WithConfirm/WithConfirm.tsx | 4 +- .../ScheduleForm/ScheduleForm.config.ts | 31 +++++++++----- .../src/pages/schedules_NEW/Schedules.tsx | 41 ++++++++++++++++--- 5 files changed, 65 insertions(+), 18 deletions(-) diff --git a/grafana-plugin/src/components/Table/Table.module.css b/grafana-plugin/src/components/Table/Table.module.css index 50e50ffc..7638849b 100644 --- a/grafana-plugin/src/components/Table/Table.module.css +++ b/grafana-plugin/src/components/Table/Table.module.css @@ -6,6 +6,10 @@ width: 100%; } +.root table tbody tr.row-even { + background: var(--background-secondary); +} + .root tr { min-height: 56px; } diff --git a/grafana-plugin/src/components/Table/Table.tsx b/grafana-plugin/src/components/Table/Table.tsx index dbc5e652..60d184cc 100644 --- a/grafana-plugin/src/components/Table/Table.tsx +++ b/grafana-plugin/src/components/Table/Table.tsx @@ -51,10 +51,11 @@ const GTable: FC = (props) => { (index % 2 === 0 ? cx('row-even') : cx('row-odd'))} {...restProps} /> {pagination && ( diff --git a/grafana-plugin/src/components/WithConfirm/WithConfirm.tsx b/grafana-plugin/src/components/WithConfirm/WithConfirm.tsx index 0419e8f3..67a53cd7 100644 --- a/grafana-plugin/src/components/WithConfirm/WithConfirm.tsx +++ b/grafana-plugin/src/components/WithConfirm/WithConfirm.tsx @@ -20,7 +20,9 @@ const WithConfirm = (props: WithConfirmProps) => { const [showConfirmation, setShowConfirmation] = useState(false); - const onClickCallback = useCallback(() => { + const onClickCallback = useCallback((event) => { + event.stopPropagation(); + setShowConfirmation(true); }, []); diff --git a/grafana-plugin/src/containers/ScheduleForm/ScheduleForm.config.ts b/grafana-plugin/src/containers/ScheduleForm/ScheduleForm.config.ts index fe40a251..a3b92a0b 100644 --- a/grafana-plugin/src/containers/ScheduleForm/ScheduleForm.config.ts +++ b/grafana-plugin/src/containers/ScheduleForm/ScheduleForm.config.ts @@ -5,16 +5,6 @@ import { PRIVATE_CHANNEL_NAME } from 'models/slack_channel/slack_channel.config' import { DEFAULT_USER_ROLES } from 'models/user/user.config'; const commonFields: FormItem[] = [ - { - name: 'ical_url_overrides', - label: 'Overrides schedule iCal URL ', - type: FormItemType.TextArea, - description: - 'You can use an override calendar to share with your team members. Users can add \n' + - 'events to this calendar, and they will override existing events in the primary \n' + - 'calendar. The iCal URL for your override calendar can be found in the calendar \n' + - 'integration settings of your calendar service.', - }, { name: 'slack_channel_id', label: 'Slack channel', @@ -128,6 +118,16 @@ export const iCalForm: { name: string; fields: FormItem[] } = { 'access. The iCal URL for your primary calendar can be found in the calendar \n' + 'integration settings of your calendar service.', }, + { + name: 'ical_url_overrides', + label: 'Overrides schedule iCal URL ', + type: FormItemType.TextArea, + description: + 'You can use an override calendar to share with your team members. Users can add \n' + + 'events to this calendar, and they will override existing events in the primary \n' + + 'calendar. The iCal URL for your override calendar can be found in the calendar \n' + + 'integration settings of your calendar service.', + }, ...commonFields, ], }; @@ -140,6 +140,16 @@ export const calendarForm: { name: string; fields: FormItem[] } = { type: FormItemType.Input, validation: { required: true }, }, + { + name: 'ical_url_overrides', + label: 'Overrides schedule iCal URL ', + type: FormItemType.TextArea, + description: + 'You can use an override calendar to share with your team members. Users can add \n' + + 'events to this calendar, and they will override existing events in the primary \n' + + 'calendar. The iCal URL for your override calendar can be found in the calendar \n' + + 'integration settings of your calendar service.', + }, ...commonFields, ], }; @@ -152,5 +162,6 @@ export const apiForm: { name: string; fields: FormItem[] } = { type: FormItemType.Input, validation: { required: true }, }, + ...commonFields, ], }; diff --git a/grafana-plugin/src/pages/schedules_NEW/Schedules.tsx b/grafana-plugin/src/pages/schedules_NEW/Schedules.tsx index aa979db6..f20755d7 100644 --- a/grafana-plugin/src/pages/schedules_NEW/Schedules.tsx +++ b/grafana-plugin/src/pages/schedules_NEW/Schedules.tsx @@ -1,4 +1,4 @@ -import React from 'react'; +import React, { SyntheticEvent } from 'react'; import { getLocationSrv } from '@grafana/runtime'; import { Button, HorizontalGroup, IconButton, LoadingPlaceholder, VerticalGroup } from '@grafana/ui'; @@ -19,12 +19,15 @@ import TimelineMarks from 'components/TimelineMarks/TimelineMarks'; import UserTimezoneSelect from 'components/UserTimezoneSelect/UserTimezoneSelect'; import WithConfirm from 'components/WithConfirm/WithConfirm'; import ScheduleFinal from 'containers/Rotations/ScheduleFinal'; +import ScheduleForm from 'containers/ScheduleForm/ScheduleForm'; +import { WithPermissionControl } from 'containers/WithPermissionControl/WithPermissionControl'; import { getFromString } from 'models/schedule/schedule.helpers'; import { Schedule, ScheduleType } from 'models/schedule/schedule.types'; import { Timezone } from 'models/timezone/timezone.types'; import { getStartOfWeek } from 'pages/schedule/Schedule.helpers'; import { AppFeature } from 'state/features'; import { WithStoreProps } from 'state/types'; +import { UserAction } from 'state/userAction'; import { withMobXProviderContext } from 'state/withStore'; import styles from './Schedules.module.css'; @@ -38,6 +41,7 @@ interface SchedulesPageState { filters: SchedulesFiltersType; showNewScheduleSelector: boolean; expandedRowKeys: Array; + scheduleIdToEdit?: Schedule['id']; } @observer @@ -51,6 +55,7 @@ class SchedulesPage extends React.Component )} + {scheduleIdToEdit && ( + { + this.setState({ scheduleIdToEdit: undefined }); + }} + /> + )} ); } @@ -328,18 +342,33 @@ class SchedulesPage extends React.Component */} - - - + + + + + + + + ); }; + getEditScheduleClickHandler = (id: Schedule['id']) => { + return (event) => { + event.stopPropagation(); + + this.setState({ scheduleIdToEdit: id }); + }; + }; + getDeleteScheduleClickHandler = (id: Schedule['id']) => { const { store } = this.props; const { scheduleStore } = store; - return () => { + return (event: SyntheticEvent) => { + event.stopPropagation(); + scheduleStore.delete(id).then(this.update); }; };