Use autogenerated types for users

grafana-plugin/src/components/Policy/EscalationPolicy.tsx

@@ -23,7 +23,7 @@ import {
 } from 'models/escalation_policy/escalation_policy.types';
 import { GrafanaTeam } from 'models/grafana_team/grafana_team.types';
 import { Schedule } from 'models/schedule/schedule.types';
-import { User } from 'models/user/user.types';
+import { UserHelper } from 'models/user/user.helpers';
 import { UserGroup } from 'models/user_group/user_group.types';
 import { ApiSchemas } from 'network/oncall-api/api.types';
 import { SelectOption, WithStoreProps } from 'state/types';
@@ -166,7 +166,7 @@ class _EscalationPolicy extends React.Component<EscalationPolicyProps, any> {
 
     return (
       <WithPermissionControlTooltip key="users-multiple" userAction={UserActions.EscalationChainsWrite}>
-        <GSelect<User>
+        <GSelect<ApiSchemas['User']>
           isMulti
           showSearch
           allowClear
@@ -180,9 +180,9 @@ class _EscalationPolicy extends React.Component<EscalationPolicyProps, any> {
           getOptionLabel={({ value }: SelectableValue) => <UserTooltip id={value} />}
           width={'auto'}
           items={userStore.items}
-          fetchItemsFn={userStore.updateItems}
-          fetchItemFn={userStore.updateItem}
-          getSearchResult={userStore.getSearchResult}
+          fetchItemsFn={userStore.fetchItems}
+          fetchItemFn={async (id) => await userStore.fetchItemById({ userPk: id, skipIfAlreadyPending: true })}
+          getSearchResult={() => UserHelper.getSearchResult(userStore)}
         />
       </WithPermissionControlTooltip>
     );

grafana-plugin/src/components/Policy/NotificationPolicy.tsx

@@ -10,7 +10,7 @@ import { Timeline } from 'components/Timeline/Timeline';
 import { WithPermissionControlTooltip } from 'containers/WithPermissionControl/WithPermissionControlTooltip';
 import { Channel } from 'models/channel/channel';
 import { NotificationPolicyType, prepareNotificationPolicy } from 'models/notification_policy/notification_policy';
-import { User } from 'models/user/user.types';
+import { ApiSchemas } from 'network/oncall-api/api.types';
 import { AppFeature } from 'state/features';
 import { RootStore } from 'state/rootStore';
 import { SelectOption } from 'state/types';
@@ -28,7 +28,7 @@ export interface NotificationPolicyProps {
   slackTeamIdentity?: {
     general_log_channel_pk: Channel['id'];
   };
-  slackUserIdentity?: User['slack_user_identity'];
+  slackUserIdentity?: ApiSchemas['User']['slack_user_identity'];
   onChange: (id: NotificationPolicyType['id'], value: NotificationPolicyType) => void;
   onDelete: (id: string) => void;
   notificationChoices: any[];

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

@@ -3,7 +3,7 @@ import React, { useCallback } from 'react';
 import { InlineSwitch } from '@grafana/ui';
 import cn from 'classnames/bind';
 
-import { User } from 'models/user/user.types';
+import { ApiSchemas } from 'network/oncall-api/api.types';
 
 import styles from './ScheduleFilters.module.scss';
 import { ScheduleFiltersType } from './ScheduleFilters.types';
@@ -12,7 +12,7 @@ const cx = cn.bind(styles);
 
 interface SchedulesFiltersProps {
   value: ScheduleFiltersType;
-  currentUserPk: User['pk'];
+  currentUserPk: ApiSchemas['User']['pk'];
   onChange: (filters: ScheduleFiltersType) => void;
 }
 

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

@@ -1,5 +1,5 @@
-import { User } from 'models/user/user.types';
+import { ApiSchemas } from 'network/oncall-api/api.types';
 
 export interface ScheduleFiltersType {
-  users: Array<User['pk']>;
+  users: Array<ApiSchemas['User']['pk']>;
 }

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

@@ -7,7 +7,7 @@ import { SortableContainer, SortableElement, SortableHandle } from 'react-sortab
 
 import { Text } from 'components/Text/Text';
 import { RemoteSelect } from 'containers/RemoteSelect/RemoteSelect';
-import { User } from 'models/user/user.types';
+import { ApiSchemas } from 'network/oncall-api/api.types';
 import { UserActions } from 'utils/authorization/authorization';
 
 import { fromPlainArray, toPlainArray } from './UserGroups.helpers';
@@ -16,8 +16,8 @@ import { Item } from './UserGroups.types';
 import styles from './UserGroups.module.css';
 
 interface UserGroupsProps {
-  value: Array<Array<User['pk']>>;
-  onChange: (value: Array<Array<User['pk']>>) => void;
+  value: Array<Array<ApiSchemas['User']['pk']>>;
+  onChange: (value: Array<Array<ApiSchemas['User']['pk']>>) => void;
   isMultipleGroups: boolean;
   renderUser: (id: string) => React.ReactElement;
   showError?: boolean;
@@ -56,7 +56,7 @@ export const UserGroups = (props: UserGroupsProps) => {
   };
 
   const handleUserAdd = useCallback(
-    (pk: User['pk']) => {
+    (pk: ApiSchemas['User']['pk']) => {
       if (!pk) {
         return;
       }

grafana-plugin/src/containers/AddResponders/AddResponders.tsx

@@ -9,8 +9,7 @@ import { observer } from 'mobx-react';
 import { Block } from 'components/GBlock/Block';
 import { Text } from 'components/Text/Text';
 import { WithPermissionControlTooltip } from 'containers/WithPermissionControl/WithPermissionControlTooltip';
-import { getTimezone } from 'models/user/user.helpers';
-import { UserCurrentlyOnCall } from 'models/user/user.types';
+import { UserHelper } from 'models/user/user.helpers';
 import { ApiSchemas } from 'network/oncall-api/api.types';
 import { useStore } from 'state/useStore';
 import { UserActions } from 'utils/authorization/authorization';
@@ -62,7 +61,7 @@ export const AddResponders = observer(
     const currentMoment = useMemo(() => dayjs(), []);
     const isCreateMode = mode === 'create';
 
-    const [currentlyConsideredUser, setCurrentlyConsideredUser] = useState<UserCurrentlyOnCall>(null);
+    const [currentlyConsideredUser, setCurrentlyConsideredUser] = useState<ApiSchemas['UserIsCurrentlyOnCall']>(null);
     const [currentlyConsideredUserNotificationPolicy, setCurrentlyConsideredUserNotificationPolicy] =
       useState<NotificationPolicyValue>(NotificationPolicyValue.Default);
 
@@ -141,7 +140,7 @@ export const AddResponders = observer(
                       disableNotificationPolicySelect
                       handleDelete={generateRemovePreviouslyPagedUserCallback(user.pk)}
                       important={user.important}
-                      data={user as unknown as UserCurrentlyOnCall}
+                      data={user as unknown as ApiSchemas['UserIsCurrentlyOnCall']}
                     />
                   ))}
                   {selectedUserResponders.map((responder, index) => (
@@ -192,7 +191,8 @@ export const AddResponders = observer(
                 <div>
                   <Text>
                     <Text strong>{currentlyConsideredUser.name || currentlyConsideredUser.username}</Text> (local time{' '}
-                    {currentMoment.tz(getTimezone(currentlyConsideredUser)).format('HH:mm')}) will be notified using
+                    {currentMoment.tz(UserHelper.getTimezone(currentlyConsideredUser)).format('HH:mm')}) will be
+                    notified using
                   </Text>
                   <div className={cx('confirm-participant-invitation-modal-select')}>
                     <NotificationPoliciesSelect

grafana-plugin/src/containers/AddResponders/AddResponders.types.ts

@@ -1,15 +1,15 @@
 import { SelectableValue } from '@grafana/data';
 import { ActionMeta } from '@grafana/ui';
 
-import { UserCurrentlyOnCall } from 'models/user/user.types';
+import { ApiSchemas } from 'network/oncall-api/api.types';
 
 export enum NotificationPolicyValue {
   Default = 0,
   Important = 1,
 }
 
 export type UserResponder = {
-  data: UserCurrentlyOnCall;
+  data: ApiSchemas['UserIsCurrentlyOnCall'];
   important: boolean;
 };
 export type UserResponders = UserResponder[];

grafana-plugin/src/containers/AddResponders/parts/AddRespondersPopup/AddRespondersPopup.tsx

@@ -9,8 +9,7 @@ import { Avatar } from 'components/Avatar/Avatar';
 import { GTable } from 'components/GTable/GTable';
 import { Text } from 'components/Text/Text';
 import { GrafanaTeam } from 'models/grafana_team/grafana_team.types';
-import { PaginatedUsersResponse } from 'models/user/user';
-import { UserCurrentlyOnCall } from 'models/user/user.types';
+import { UserHelper } from 'models/user/user.helpers';
 import { ApiSchemas } from 'network/oncall-api/api.types';
 import { useStore } from 'state/useStore';
 import { useDebouncedCallback, useOnClickOutside } from 'utils/hooks';
@@ -22,7 +21,7 @@ type Props = {
   visible: boolean;
   setVisible: (value: boolean) => void;
 
-  setCurrentlyConsideredUser: (user: UserCurrentlyOnCall) => void;
+  setCurrentlyConsideredUser: (user: ApiSchemas['UserIsCurrentlyOnCall']) => void;
   setShowUserConfirmationModal: (value: boolean) => void;
 
   existingPagedUsers?: ApiSchemas['AlertGroup']['paged_users'];
@@ -44,16 +43,20 @@ export const AddRespondersPopup = observer(
     setCurrentlyConsideredUser,
     setShowUserConfirmationModal,
   }: Props) => {
-    const { directPagingStore, grafanaTeamStore, userStore } = useStore();
+    const { directPagingStore, grafanaTeamStore } = useStore();
     const { selectedTeamResponder, selectedUserResponders } = directPagingStore;
 
     const isCreateMode = mode === 'create';
 
-    const [searchLoading, setSearchLoading] = useState<boolean>(true);
+    const [searchLoading, setSearchLoading] = useState(true);
     const [activeOption, setActiveOption] = useState<TabOptions>(isCreateMode ? TabOptions.Teams : TabOptions.Users);
     const [teamSearchResults, setTeamSearchResults] = useState<GrafanaTeam[]>([]);
-    const [onCallUserSearchResults, setOnCallUserSearchResults] = useState<UserCurrentlyOnCall[]>([]);
-    const [notOnCallUserSearchResults, setNotOnCallUserSearchResults] = useState<UserCurrentlyOnCall[]>([]);
+    const [onCallUserSearchResults, setOnCallUserSearchResults] = useState<Array<ApiSchemas['UserIsCurrentlyOnCall']>>(
+      []
+    );
+    const [notOnCallUserSearchResults, setNotOnCallUserSearchResults] = useState<
+      Array<ApiSchemas['UserIsCurrentlyOnCall']>
+    >([]);
     const [searchTerm, setSearchTerm] = useState('');
 
     const ref = useRef();
@@ -70,7 +73,7 @@ export const AddRespondersPopup = observer(
     );
 
     const onClickUser = useCallback(
-      async (user: UserCurrentlyOnCall) => {
+      async (user: ApiSchemas['UserIsCurrentlyOnCall']) => {
         if (isCreateMode && user.is_currently_oncall) {
           directPagingStore.addUserToSelectedUsers(user);
         } else {
@@ -98,7 +101,7 @@ export const AddRespondersPopup = observer(
 
     const searchForUsers = useCallback(async () => {
       const _search = async (is_currently_oncall: boolean) => {
-        const response = await userStore.search<PaginatedUsersResponse<UserCurrentlyOnCall>>({
+        const response = await UserHelper.search({
           searchTerm,
           is_currently_oncall,
         });
@@ -107,8 +110,8 @@ export const AddRespondersPopup = observer(
 
       const [onCallUserSearchResults, notOnCallUserSearchResults] = await Promise.all([_search(true), _search(false)]);
 
-      setOnCallUserSearchResults(onCallUserSearchResults);
-      setNotOnCallUserSearchResults(notOnCallUserSearchResults);
+      setOnCallUserSearchResults(onCallUserSearchResults as Array<ApiSchemas['UserIsCurrentlyOnCall']>);
+      setNotOnCallUserSearchResults(notOnCallUserSearchResults as Array<ApiSchemas['UserIsCurrentlyOnCall']>);
     }, [searchTerm]);
 
     const searchForTeams = useCallback(async () => {
@@ -161,7 +164,7 @@ export const AddRespondersPopup = observer(
       if (existingPagedUsers.length > 0) {
         const existingPagedUserIds = existingPagedUsers.map(({ pk }) => pk);
 
-        const _filterUsers = (users: UserCurrentlyOnCall[]) =>
+        const _filterUsers = (users: Array<ApiSchemas['UserIsCurrentlyOnCall']>) =>
           users.filter(({ pk }) => !existingPagedUserIds.includes(pk));
 
         setOnCallUserSearchResults(_filterUsers);
@@ -188,7 +191,8 @@ export const AddRespondersPopup = observer(
     }, []);
 
     const userIsSelected = useCallback(
-      (user: UserCurrentlyOnCall) => selectedUserResponders.some((userResponder) => userResponder.data.pk === user.pk),
+      (user: ApiSchemas['UserIsCurrentlyOnCall']) =>
+        selectedUserResponders.some((userResponder) => userResponder.data.pk === user.pk),
       [selectedUserResponders]
     );
 
@@ -219,11 +223,11 @@ export const AddRespondersPopup = observer(
       },
     ];
 
-    const userColumns: ColumnsType<UserCurrentlyOnCall> = [
+    const userColumns: ColumnsType<ApiSchemas['UserIsCurrentlyOnCall']> = [
       // TODO: how to make the rows span full width properly?
       {
         width: 300,
-        render: (user: UserCurrentlyOnCall) => {
+        render: (user: ApiSchemas['UserIsCurrentlyOnCall']) => {
           const { avatar, name, username, teams } = user;
           const disabled = userIsSelected(user);
 
@@ -244,18 +248,21 @@ export const AddRespondersPopup = observer(
       },
       {
         width: 40,
-        render: (user: UserCurrentlyOnCall) => (userIsSelected(user) ? <Icon name="check" /> : null),
+        render: (user: ApiSchemas['UserIsCurrentlyOnCall']) => (userIsSelected(user) ? <Icon name="check" /> : null),
         key: 'Checked',
       },
     ];
 
-    const UserResultsSection: FC<{ header: string; users: UserCurrentlyOnCall[] }> = ({ header, users }) =>
+    const UserResultsSection: FC<{ header: string; users: Array<ApiSchemas['UserIsCurrentlyOnCall']> }> = ({
+      header,
+      users,
+    }) =>
       users.length > 0 && (
         <>
           <Text type="secondary" className={cx('user-results-section-header')}>
             {header}
           </Text>
-          <GTable<UserCurrentlyOnCall>
+          <GTable<ApiSchemas['UserIsCurrentlyOnCall']>
             emptyText={users ? 'No users found' : 'Loading...'}
             rowKey="pk"
             columns={userColumns}

grafana-plugin/src/containers/AddResponders/parts/UserResponder/UserResponder.test.tsx

@@ -3,15 +3,15 @@ import React from 'react';
 import { render, screen } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
 
-import { UserCurrentlyOnCall } from 'models/user/user.types';
+import { ApiSchemas } from 'network/oncall-api/api.types';
 
 import { UserResponder } from './UserResponder';
 
 describe('UserResponder', () => {
   const user = {
     avatar: 'http://avatar.com/',
     username: 'johnsmith',
-  } as UserCurrentlyOnCall;
+  } as ApiSchemas['UserIsCurrentlyOnCall'];
 
   test('it renders data properly', () => {
     const component = render(

grafana-plugin/src/containers/DefaultPageLayout/helper.ts

@@ -1,5 +1,5 @@
-import { User } from 'models/user/user.types';
+import { ApiSchemas } from 'network/oncall-api/api.types';
 
-export const getIfChatOpsConnected = (user: User) => {
+export const getIfChatOpsConnected = (user: ApiSchemas['User']) => {
   return user?.slack_user_identity || user?.telegram_configuration || user?.messaging_backends?.MSTEAMS;
 };