Changes to make screens more responsive + incident status toggler change

CHANGELOG.md

@@ -5,13 +5,18 @@ All notable changes to this project will be documented in this file.
 The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/),
 and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.html).
 
-## v1.1.24 (2023-02-06)
+## Unreleased
 
 ### Fixed
 
 - Design polishing ([1290](https://github.com/grafana/oncall/pull/1290))
 - Not showing contact details in User tooltip if User does not have edit/admin access
 
+### Changes
+
+- Incidents - Removed buttons column and replaced status with toggler ([#1237](https://github.com/grafana/oncall/issues/1237))
+- Responsiveness changes across multiple pages (Incidents, Integrations, Schedules) ([#1237](https://github.com/grafana/oncall/issues/1237))
+
 ## v1.1.23 (2023-02-06)
 
 ### Fixed

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

@@ -0,0 +1,53 @@
+import React, { FC, useEffect, useState } from 'react';
+
+import { Tooltip } from '@grafana/ui';
+import { debounce } from 'throttle-debounce';
+
+interface MatchMediaTooltipProps {
+  placement: 'top' | 'bottom' | 'right' | 'left';
+  content: string;
+  children: JSX.Element;
+
+  maxWidth?: number;
+  minWidth?: number;
+}
+
+const DEBOUNCE_MS = 200;
+
+export const MatchMediaTooltip: FC<MatchMediaTooltipProps> = ({ minWidth, maxWidth, placement, content, children }) => {
+  const [match, setMatch] = useState<MediaQueryList>(getMatch());
+
+  useEffect(() => {
+    const debouncedResize = debounce(DEBOUNCE_MS, onWindowResize);
+    window.addEventListener('resize', debouncedResize);
+    return () => {
+      window.removeEventListener('resize', debouncedResize);
+    };
+  }, []);
+
+  if (match?.matches) {
+    return (
+      <Tooltip placement={placement} content={content}>
+        {children}
+      </Tooltip>
+    );
+  }
+
+  return <>{children}</>;
+
+  function onWindowResize() {
+    setMatch(getMatch());
+  }
+
+  function getMatch() {
+    if (minWidth && maxWidth) {
+      return window.matchMedia(`(min-width: ${minWidth}px) and (max-width: ${maxWidth}px)`);
+    } else if (minWidth) {
+      return window.matchMedia(`(min-width: ${minWidth}px)`);
+    } else if (maxWidth) {
+      return window.matchMedia(`(max-width: ${maxWidth}px)`);
+    }
+
+    return undefined;
+  }
+};

grafana-plugin/src/components/SchedulesFilters/SchedulesFilters.module.scss

@@ -0,0 +1,13 @@
+.right {
+  display: flex;
+  flex-wrap: wrap;
+  row-gap: 4px;
+  column-gap: 8px;
+}
+
+@media screen and (max-width: 1600px) {
+  .right {
+    order: 3;
+    width: 100%;
+  }
+}

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

@@ -1,60 +1,95 @@
-import React, { useCallback, useMemo } from 'react';
+import React, { ChangeEvent, useCallback } from 'react';
 
-import { DatePickerWithInput, Field, HorizontalGroup, RadioButtonGroup } from '@grafana/ui';
+import { Field, Icon, Input, RadioButtonGroup } from '@grafana/ui';
 import cn from 'classnames/bind';
-import moment from 'moment-timezone';
 
-import { dateStringToOption, optionToDateString } from './SchedulesFilters.helpers';
-import { SchedulesFiltersType } from './SchedulesFilters.types';
+import { ScheduleType } from 'models/schedule/schedule.types';
 
-import styles from './SchedulesFilters.module.css';
+import styles from './SchedulesFilters.module.scss';
+import { SchedulesFiltersType } from './SchedulesFilters.types';
 
 const cx = cn.bind(styles);
 
 interface SchedulesFiltersProps {
   value: SchedulesFiltersType;
   onChange: (filters: SchedulesFiltersType) => void;
-  className?: string;
 }
 
-const SchedulesFilters = ({ value, onChange, className }: SchedulesFiltersProps) => {
-  const handleDateChange = useCallback(
-    (date: Date) => {
-      onChange({ selectedDate: moment(date).format('YYYY-MM-DD') });
+const SchedulesFilters = (props: SchedulesFiltersProps) => {
+  const { value, onChange } = props;
+
+  const onSearchTermChangeCallback = useCallback(
+    (e: ChangeEvent<HTMLInputElement>) => {
+      onChange({ ...value, searchTerm: e.currentTarget.value });
     },
-    [onChange]
+    [value]
   );
-
-  const option = useMemo(() => dateStringToOption(value.selectedDate), [value]);
-
-  const handleOptionChange = useCallback(
-    (option: string) => {
-      onChange({ ...value, selectedDate: optionToDateString(option) });
+  const handleStatusChange = useCallback(
+    (status) => {
+      onChange({ ...value, status });
     },
-    [onChange, value]
+    [value]
   );
 
-  const datePickerValue = useMemo(() => moment(value.selectedDate).toDate(), [value]);
+  const handleTypeChange = useCallback(
+    (type) => {
+      onChange({ ...value, type });
+    },
+    [value]
+  );
 
   return (
-    <div className={cx('root', className)}>
-      <HorizontalGroup>
-        <Field label="Filter events">
+    <>
+      <div className={cx('left')}>
+        <Field label="Search by name">
+          <Input
+            autoFocus
+            className={cx('search')}
+            prefix={<Icon name="search" />}
+            placeholder="Search..."
+            value={value.searchTerm}
+            onChange={onSearchTermChangeCallback}
+          />
+        </Field>
+      </div>
+      <div className={cx('right')}>
+        <Field label="Status">
           <RadioButtonGroup
             options={[
-              { value: 'today', label: 'Today' },
-              { value: 'tomorrow', label: 'Tomorrow' },
-              { value: 'custom', label: 'Custom' },
+              { label: 'All', value: 'all' },
+              {
+                label: 'Used in escalations',
+                value: 'used',
+              },
+              { label: 'Unused', value: 'unused' },
             ]}
-            value={option}
-            onChange={handleOptionChange}
+            value={value.status}
+            onChange={handleStatusChange}
           />
         </Field>
-        <Field label="Date">
-          <DatePickerWithInput closeOnSelect width={40} value={datePickerValue} onChange={handleDateChange} />
+        <Field label="Type">
+          <RadioButtonGroup
+            options={[
+              { label: 'All', value: undefined },
+              {
+                label: 'Web',
+                value: ScheduleType.API,
+              },
+              {
+                label: 'ICal',
+                value: ScheduleType.Ical,
+              },
+              {
+                label: 'API',
+                value: ScheduleType.Calendar,
+              },
+            ]}
+            value={value?.type}
+            onChange={handleTypeChange}
+          />
         </Field>
-      </HorizontalGroup>
-    </div>
+      </div>
+    </>
   );
 };
 

grafana-plugin/src/components/SchedulesFilters/SchedulesFilters.types.ts

@@ -1,3 +1,7 @@
+import { ScheduleType } from 'models/schedule/schedule.types';
+
 export interface SchedulesFiltersType {
-  selectedDate: string;
+  searchTerm: string;
+  type: ScheduleType;
+  status: string;
 }

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

@@ -8,15 +8,22 @@ interface TagProps {
   color: string;
   className?: string;
   children?: any;
+  onClick?: (ev) => void;
+  forwardedRef?: React.MutableRefObject<HTMLSpanElement>;
 }
 
 const cx = cn.bind(styles);
 
 const Tag: FC<TagProps> = (props) => {
-  const { children, color, className } = props;
+  const { children, color, className, onClick } = props;
 
   return (
-    <span style={{ backgroundColor: color }} className={cx('root', className)}>
+    <span
+      style={{ backgroundColor: color }}
+      className={cx('root', className)}
+      onClick={onClick}
+      ref={props.forwardedRef}
+    >
       {children}
     </span>
   );