add settings button to new schedules list

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;
 }

grafana-plugin/src/components/Table/Table.tsx

@@ -51,10 +51,11 @@ const GTable: FC<Props> = (props) => {
     <VerticalGroup justify="flex-end">
       <Table
         rowKey={rowKey}
-        className={cx('root', 'filter-table', className)}
+        className={cx('root', className)}
         columns={columns}
         data={data}
         expandable={expandable}
+        rowClassName={(record, index) => (index % 2 === 0 ? cx('row-even') : cx('row-odd'))}
         {...restProps}
       />
       {pagination && (

grafana-plugin/src/components/WithConfirm/WithConfirm.tsx

@@ -20,7 +20,9 @@ const WithConfirm = (props: WithConfirmProps) => {
 
   const [showConfirmation, setShowConfirmation] = useState<boolean>(false);
 
-  const onClickCallback = useCallback(() => {
+  const onClickCallback = useCallback((event) => {
+    event.stopPropagation();
+
     setShowConfirmation(true);
   }, []);
 

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,
   ],
 };

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<Schedule['id']>;
+  scheduleIdToEdit?: Schedule['id'];
 }
 
 @observer
@@ -51,6 +55,7 @@ class SchedulesPage extends React.Component<SchedulesPageProps, SchedulesPageSta
       filters: { searchTerm: '', status: 'all', type: ScheduleType.API },
       showNewScheduleSelector: false,
       expandedRowKeys: [],
+      scheduleIdToEdit: undefined,
     };
   }
 
@@ -67,7 +72,7 @@ class SchedulesPage extends React.Component<SchedulesPageProps, SchedulesPageSta
 
   render() {
     const { store } = this.props;
-    const { filters, showNewScheduleSelector, expandedRowKeys } = this.state;
+    const { filters, showNewScheduleSelector, expandedRowKeys, scheduleIdToEdit } = this.state;
 
     const { scheduleStore } = store;
 
@@ -171,6 +176,15 @@ class SchedulesPage extends React.Component<SchedulesPageProps, SchedulesPageSta
             }}
           />
         )}
+        {scheduleIdToEdit && (
+          <ScheduleForm
+            id={scheduleIdToEdit}
+            onUpdate={this.update}
+            onHide={() => {
+              this.setState({ scheduleIdToEdit: undefined });
+            }}
+          />
+        )}
       </>
     );
   }
@@ -328,18 +342,33 @@ class SchedulesPage extends React.Component<SchedulesPageProps, SchedulesPageSta
         {/*<IconButton tooltip="Copy" name="copy" />
         <IconButton tooltip="Settings" name="cog" />
         <IconButton tooltip="Code" name="brackets-curly" />*/}
-        <WithConfirm>
-          <IconButton tooltip="Delete" name="trash-alt" onClick={this.getDeleteScheduleClickHandler(item.id)} />
-        </WithConfirm>
+        <WithPermissionControl key="edit" userAction={UserAction.UpdateSchedules}>
+          <IconButton tooltip="Settings" name="cog" onClick={this.getEditScheduleClickHandler(item.id)} />
+        </WithPermissionControl>
+        <WithPermissionControl key="edit" userAction={UserAction.UpdateSchedules}>
+          <WithConfirm>
+            <IconButton tooltip="Delete" name="trash-alt" onClick={this.getDeleteScheduleClickHandler(item.id)} />
+          </WithConfirm>
+        </WithPermissionControl>
       </HorizontalGroup>
     );
   };
 
+  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);
     };
   };