Add default view option

CHANGELOG.md

@@ -6,6 +6,7 @@
 
 - Add yearly view (#134)
 - Add internationalization(Spanish, French, German, and Chinese) i18n (#135)
+- Add default view option (#137)
 
 ## 2.2.0 (2023-10-06)
 

src/components/BigCalendar/BigCalendar.tsx

@@ -80,7 +80,7 @@ export const BigCalendar: React.FC<Props> = ({ height, events, timeRange, onChan
   /**
    * Manage calendar time range and view
    */
-  const { date, view, onChangeView, onNavigate } = useCalendarRange(timeRange, onChangeTimeRange);
+  const { date, view, onChangeView, onNavigate } = useCalendarRange(timeRange, onChangeTimeRange, options.defaultView);
 
   /**
    * Is Selected View Exist

src/components/DefaultViewEditor/DefaultViewEditor.test.tsx

@@ -0,0 +1,177 @@
+import { fireEvent, render, screen } from '@testing-library/react';
+import { getJestSelectors } from '@volkovlabs/jest-selectors';
+import React from 'react';
+import { DefaultView, TestIds } from '../../constants';
+import { View } from '../../types';
+import { DefaultViewEditor } from './DefaultViewEditor';
+
+/**
+ * Mock @grafana/ui
+ */
+jest.mock('@grafana/ui', () => ({
+  Select: jest.fn(({ options, onChange, value, ...restProps }) => (
+    <select
+      onChange={(event: any) => {
+        if (onChange) {
+          const option = options.find((option: any) => {
+            /**
+             * Jest convert number to string, so just using not strict comparison
+             */
+            // eslint-disable-next-line eqeqeq
+            return option.value == event.target.value;
+          });
+
+          if (option) {
+            onChange(option);
+          }
+        }
+      }}
+      /**
+       * Fix jest warnings because null value.
+       * For Select component in @grafana/ui should be used null to reset value.
+       */
+      value={value === null ? '' : value}
+      {...restProps}
+    >
+      {options.map(({ label, value }: any) => (
+        <option key={value} value={value}>
+          {label}
+        </option>
+      ))}
+    </select>
+  )),
+}));
+
+/**
+ * Component Props
+ */
+type Props = React.ComponentProps<typeof DefaultViewEditor>;
+
+/**
+ * Default View Editor
+ */
+describe('Default View Editor', () => {
+  /**
+   * Selectors
+   */
+  const getSelectors = getJestSelectors(TestIds.defaultViewEditor);
+  const selectors = getSelectors(screen);
+
+  /**
+   * Get Tested Component
+   * @param props
+   */
+  const getComponent = (props: Partial<Props>) => {
+    return <DefaultViewEditor {...(props as any)} />;
+  };
+
+  it('Should update value', () => {
+    const onChange = jest.fn();
+
+    render(
+      getComponent({
+        value: View.YEAR,
+        context: { options: { views: [View.MONTH, View.YEAR] } as any } as any,
+        onChange,
+      })
+    );
+
+    expect(selectors.field()).toHaveValue(View.YEAR);
+
+    /**
+     * Change value
+     */
+    fireEvent.change(selectors.field(), { target: { value: View.MONTH } });
+
+    expect(onChange).toHaveBeenCalledWith(View.MONTH);
+  });
+
+  it('Should filter available options', () => {
+    const onChange = jest.fn();
+
+    render(
+      getComponent({
+        value: View.YEAR,
+        context: { options: { views: [View.MONTH, View.YEAR] } as any } as any,
+        onChange,
+      })
+    );
+
+    expect(selectors.field()).toHaveValue(View.YEAR);
+
+    /**
+     * Change on unavailable value
+     */
+    fireEvent.change(selectors.field(), { target: { value: View.DAY } });
+
+    expect(onChange).not.toHaveBeenCalled();
+  });
+
+  it('Should use first available option if value unavailable ', () => {
+    const onChange = jest.fn();
+
+    const { rerender } = render(
+      getComponent({
+        value: View.YEAR,
+        context: { options: { views: [View.WEEK, View.YEAR] } as any } as any,
+        onChange,
+      })
+    );
+
+    expect(selectors.field()).toHaveValue(View.YEAR);
+
+    /**
+     * Re-render
+     */
+    rerender(
+      getComponent({
+        value: View.YEAR,
+        context: { options: { views: [View.WEEK] } as any } as any,
+        onChange,
+      })
+    );
+
+    expect(onChange).toHaveBeenCalledWith(View.WEEK);
+  });
+
+  it('Should not use first available option if value available ', () => {
+    const onChange = jest.fn();
+
+    const { rerender } = render(
+      getComponent({
+        value: View.YEAR,
+        context: { options: { views: [View.WEEK, View.YEAR] } as any } as any,
+        onChange,
+      })
+    );
+
+    expect(selectors.field()).toHaveValue(View.YEAR);
+
+    /**
+     * Re-render
+     */
+    rerender(
+      getComponent({
+        value: View.YEAR,
+        context: { options: { views: [View.YEAR] } as any } as any,
+        onChange,
+      })
+    );
+
+    expect(onChange).not.toHaveBeenCalled();
+  });
+
+  it('Should use default value if no options', () => {
+    const onChange = jest.fn();
+
+    render(
+      getComponent({
+        value: View.YEAR,
+        context: { options: { views: [] } as any } as any,
+        onChange,
+      })
+    );
+
+    expect(onChange).toHaveBeenCalledWith(DefaultView);
+  });
+});

src/components/DefaultViewEditor/DefaultViewEditor.tsx

@@ -0,0 +1,50 @@
+import React, { useEffect, useMemo } from 'react';
+import { StandardEditorProps } from '@grafana/data';
+import { Select } from '@grafana/ui';
+import { useTranslation } from 'react-i18next';
+import { CalendarViewOptions, DefaultView, TestIds } from '../../constants';
+import { CalendarOptions, View } from '../../types';
+
+/**
+ * Properties
+ */
+interface Props extends StandardEditorProps<View, null, CalendarOptions> {}
+
+/**
+ * Default View Editor
+ */
+export const DefaultViewEditor: React.FC<Props> = ({ onChange, value, context }) => {
+  /**
+   * Translation
+   */
+  const { t } = useTranslation();
+
+  /**
+   * Available options
+   */
+  const options = useMemo(() => {
+    const allOptions = CalendarViewOptions(t);
+
+    return allOptions.filter((option) => context.options?.views?.includes(option.value));
+  }, [context.options?.views, t]);
+
+  /**
+   * Use first option if selectedValue is unavailable
+   */
+  useEffect(() => {
+    if (!options.some((option) => option.value === value)) {
+      onChange(options[0]?.value || DefaultView);
+    }
+  }, [onChange, options, value]);
+
+  return (
+    <Select
+      onChange={(event) => {
+        onChange(event.value);
+      }}
+      options={options}
+      value={value}
+      aria-label={TestIds.defaultViewEditor.field}
+    />
+  );
+};

src/components/DefaultViewEditor/index.ts

@@ -0,0 +1 @@
+export * from './DefaultViewEditor';

src/components/index.ts

@@ -1,3 +1,4 @@
+export * from './BigToolbar';
 export * from './CalendarPanel';
+export * from './DefaultViewEditor';
 export * from './MultiFieldEditor';
-export * from './BigToolbar';

src/constants/default.ts

@@ -35,3 +35,8 @@ export const DefaultOptions: CalendarOptions = {
  * Default Views
  */
 export const DefaultViews = [View.DAY, View.WEEK, View.MONTH];
+
+/**
+ * Default View
+ */
+export const DefaultView = View.MONTH;

src/constants/options.ts

@@ -1,4 +1,3 @@
-import { SelectableValue } from '@grafana/data';
 import { TFunction } from 'i18next';
 import { CalendarType, View } from '../types';
 
@@ -79,7 +78,7 @@ export const AnnotationsTypeOptions = (t: TFunction) => [
 /**
  * Calendar View Options
  */
-export const CalendarViewOptions = (t: TFunction): Array<SelectableValue<View>> => [
+export const CalendarViewOptions = (t: TFunction) => [
   { value: View.DAY, label: t('panelOptions.views.options.day') },
   { value: View.WEEK, label: t('panelOptions.views.options.week') },
   { value: View.WORK_WEEK, label: t('panelOptions.views.options.workWeek') },

src/constants/tests.ts

@@ -63,4 +63,7 @@ export const TestIds = {
     date: (day: number) => `data-testid year-view date-${day}`,
     currentDate: 'data-testid year-view current-date',
   },
+  defaultViewEditor: {
+    field: 'default-view-editor field',
+  },
 };

src/hooks/useCalendarRange.test.ts → src/hooks/useCalendarRange.test.tsx

@@ -1,6 +1,7 @@
-import dayjs from 'dayjs';
+import React from 'react';
 import { dateTime, TimeRange } from '@grafana/data';
-import { act, renderHook } from '@testing-library/react';
+import { act, render, renderHook, screen } from '@testing-library/react';
+import dayjs from 'dayjs';
 import { View } from '../types';
 import { getUnitType, useCalendarRange } from './useCalendarRange';
 
@@ -31,25 +32,76 @@ describe('Use Calendar Range', () => {
     onChangeTimeRange.mockClear();
   });
 
-  it('Should set last month for initial date', () => {
+  it('Should set last month for initial date if month by default', () => {
     const last3Months = dayjs(getSafeDate()).subtract(3, 'month');
     const timeRange = {
       ...defaultTimeRange,
       from: dateTime(last3Months.toDate()),
     };
-    const { result } = renderHook(() => useCalendarRange(timeRange, onChangeTimeRange));
+    const { result } = renderHook(() => useCalendarRange(timeRange, onChangeTimeRange, View.MONTH));
 
     expect(result.current.date.toISOString()).toEqual(new Date('2023-02-01 12:00').toISOString());
   });
 
+  it('Should set last week for initial date if week by default', () => {
+    const last3Months = dayjs(getSafeDate()).subtract(3, 'month');
+    const timeRange = {
+      ...defaultTimeRange,
+      from: dateTime(last3Months.toDate()),
+    };
+    const { result } = renderHook(() => useCalendarRange(timeRange, onChangeTimeRange, View.WEEK));
+
+    expect(result.current.date.toISOString()).toEqual(new Date('2023-01-31 00:00').toISOString());
+  });
+
+  it('Should set last day for initial date if day by default', () => {
+    const last3Months = dayjs(getSafeDate()).subtract(3, 'month');
+    const timeRange = {
+      ...defaultTimeRange,
+      from: dateTime(last3Months.toDate()),
+    };
+    const { result } = renderHook(() => useCalendarRange(timeRange, onChangeTimeRange, View.DAY));
+
+    expect(result.current.date.toISOString()).toEqual(new Date('2023-02-02 00:00').toISOString());
+  });
+
+  it('Should update calendar dates on time range update', () => {
+    const last3Months = dayjs(getSafeDate()).subtract(3, 'month');
+    const timeRange = {
+      ...defaultTimeRange,
+      from: dateTime(last3Months.toDate()),
+    };
+
+    /**
+     * Component to test re-render
+     * @param timeRange
+     * @constructor
+     */
+    const Component = ({ timeRange }: any) => {
+      const { date } = useCalendarRange(timeRange, onChangeTimeRange, View.DAY);
+      return <div data-testid="date">{date.toISOString()}</div>;
+    };
+
+    const { rerender } = render(<Component timeRange={timeRange} />);
+
+    expect(screen.getByTestId('date')).toHaveTextContent('2023-02-02T00:00:00.000Z');
+
+    /**
+     * Re-render with updated timeRange
+     */
+    rerender(<Component timeRange={{ ...timeRange, from: dateTime(last3Months.subtract(1, 'month').toDate()) }} />);
+
+    expect(screen.getByTestId('date')).toHaveTextContent('2022-12-02T12:00:00.000Z');
+  });
+
   describe('Navigate', () => {
     it('Should apply new range based on view', async () => {
       const last3Months = dayjs(getSafeDate()).subtract(3, 'month');
       const timeRange = {
         ...defaultTimeRange,
         from: dateTime(last3Months.toDate()),
       };
-      const { result } = renderHook(() => useCalendarRange(timeRange, onChangeTimeRange));
+      const { result } = renderHook(() => useCalendarRange(timeRange, onChangeTimeRange, View.MONTH));
 
       /**
        * Month