not found notification

This commit is contained in:
Rares Mardare 2022-09-21 13:43:13 +03:00
parent 49ea882fcf
commit 761a79e116
8 changed files with 84 additions and 58 deletions

View file

@ -1,5 +1,9 @@
import { WrongTeamData } from 'components/WrongTeamDisplayWrapper/WrongTeamDisplayWrapper';
export function initWrongTeamDataState(): Partial<WrongTeamData> {
return { isError: false, wrongTeamNoPermissions: false };
}
export function getWrongTeamResponseInfo({ response }): Partial<WrongTeamData> {
if (response) {
if (response.status === 404) {

View file

@ -1,4 +1,4 @@
import React from 'react';
import React, { useEffect } from 'react';
import { Button, VerticalGroup } from '@grafana/ui';
import cn from 'classnames/bind';
@ -10,6 +10,7 @@ import { GrafanaTeam } from 'models/grafana_team/grafana_team.types';
import { useStore } from 'state/useStore';
import styles from './WrongTeamDisplayWrapper.module.css';
import { openWarningNotification } from 'utils';
const cx = cn.bind(styles);
@ -24,21 +25,25 @@ export interface WrongTeamData {
switchToTeam?: { name: string; id: string };
}
export function initWrongTeamDataState(): Partial<WrongTeamData> {
return { isError: false, wrongTeamNoPermissions: false };
}
export default function WrongTeamDisplayWrapper({
wrongTeamData,
objectName,
pageName,
itemNotFoundMessage,
children,
}: {
wrongTeamData: WrongTeamData;
objectName: string;
pageName: string;
itemNotFoundMessage: string;
children: () => JSX.Element;
}) {
useEffect(() => {
if (!wrongTeamData.isError && wrongTeamData.notFound) {
openWarningNotification(itemNotFoundMessage);
}
}, [wrongTeamData.notFound]);
if (!wrongTeamData.isError) return children();
const store = useStore();

View file

@ -16,8 +16,11 @@ import Text from 'components/Text/Text';
import Tutorial from 'components/Tutorial/Tutorial';
import { TutorialStep } from 'components/Tutorial/Tutorial.types';
import WithConfirm from 'components/WithConfirm/WithConfirm';
import WrongTeamDisplayWrapper, { initWrongTeamDataState, PageBaseState, WrongTeamData } from 'components/WrongTeamDisplayWrapper/WrongTeamDisplayWrapper';
import { getWrongTeamResponseInfo } from 'components/WrongTeamDisplayWrapper/WrongTeamDisplayWrapper.helpers';
import WrongTeamDisplayWrapper, { PageBaseState } from 'components/WrongTeamDisplayWrapper/WrongTeamDisplayWrapper';
import {
getWrongTeamResponseInfo,
initWrongTeamDataState,
} from 'components/WrongTeamDisplayWrapper/WrongTeamDisplayWrapper.helpers';
import EscalationChainCard from 'containers/EscalationChainCard/EscalationChainCard';
import EscalationChainForm from 'containers/EscalationChainForm/EscalationChainForm';
import EscalationChainSteps from 'containers/EscalationChainSteps/EscalationChainSteps';
@ -60,7 +63,7 @@ class EscalationChainsPage extends React.Component<EscalationChainsPageProps, Es
}
parseQueryParams = async () => {
this.setState({ wrongTeamData: initWrongTeamDataState() }); // reset wrong team error to false on query parse
this.setState({ wrongTeamData: initWrongTeamDataState() }); // reset on query parse
const { store, query } = this.props;
const { escalationChainStore } = store;
@ -83,10 +86,6 @@ class EscalationChainsPage extends React.Component<EscalationChainsPageProps, Es
escalationChain = escalationChainStore.items[query.id];
if (escalationChain) {
selectedEscalationChain = escalationChain.id;
} else {
openWarningNotification(
`Escalation chain with id=${query?.id} is not found. Please select escalation chain from the list.`
);
}
}
@ -123,7 +122,7 @@ class EscalationChainsPage extends React.Component<EscalationChainsPageProps, Es
}
render() {
const { store } = this.props;
const { store, query } = this.props;
const {
showCreateEscalationChainModal,
escalationChainIdToCopy,
@ -136,7 +135,12 @@ class EscalationChainsPage extends React.Component<EscalationChainsPageProps, Es
const searchResult = escalationChainStore.getSearchResult(escalationChainsFilters.searchTerm);
return (
<WrongTeamDisplayWrapper wrongTeamData={wrongTeamData} objectName="escalation" pageName="escalations">
<WrongTeamDisplayWrapper
wrongTeamData={wrongTeamData}
objectName="escalation"
pageName="escalations"
itemNotFoundMessage={`Escalation chain with id=${query?.id} is not found. Please select escalation chain from the list.`}
>
{() => (
<>
<div className={cx('root')}>

View file

@ -29,8 +29,8 @@ import IntegrationLogo from 'components/IntegrationLogo/IntegrationLogo';
import PluginLink from 'components/PluginLink/PluginLink';
import SourceCode from 'components/SourceCode/SourceCode';
import Text from 'components/Text/Text';
import WrongTeamDisplayWrapper, { initWrongTeamDataState, PageBaseState } from 'components/WrongTeamDisplayWrapper/WrongTeamDisplayWrapper';
import { getWrongTeamResponseInfo } from 'components/WrongTeamDisplayWrapper/WrongTeamDisplayWrapper.helpers';
import WrongTeamDisplayWrapper, { PageBaseState } from 'components/WrongTeamDisplayWrapper/WrongTeamDisplayWrapper';
import { getWrongTeamResponseInfo, initWrongTeamDataState } from 'components/WrongTeamDisplayWrapper/WrongTeamDisplayWrapper.helpers';
import AttachIncidentForm from 'containers/AttachIncidentForm/AttachIncidentForm';
import IntegrationSettings from 'containers/IntegrationSettings/IntegrationSettings';
import { IntegrationSettingsTab } from 'containers/IntegrationSettings/IntegrationSettings.types';
@ -89,7 +89,7 @@ class IncidentPage extends React.Component<IncidentPageProps, IncidentPageState>
}
update = () => {
this.setState({ wrongTeamData: initWrongTeamDataState() }); // reset wrong team error to false on query parse // reset wrong team error to false
this.setState({ wrongTeamData: initWrongTeamDataState() }); // reset wrong team error to false
const {
store,
@ -114,24 +114,6 @@ class IncidentPage extends React.Component<IncidentPageProps, IncidentPageState>
const incident = alerts.get(id);
// if (notFound) {
// return (
// <div className={cx('root')}>
// <div className={cx('not-found')}>
// <VerticalGroup spacing="lg" align="center">
// <Text.Title level={1}>404</Text.Title>
// <Text.Title level={4}>Incident not found</Text.Title>
// <PluginLink query={{ page: 'incidents', cursor, start, perpage }}>
// <Button variant="secondary" icon="arrow-left" size="md">
// Go to incidents page
// </Button>
// </PluginLink>
// </VerticalGroup>
// </div>
// </div>
// );
// }
if (!incident && !wrongTeamData.isError) {
return (
<div className={cx('root')}>
@ -141,7 +123,12 @@ class IncidentPage extends React.Component<IncidentPageProps, IncidentPageState>
}
return (
<WrongTeamDisplayWrapper wrongTeamData={wrongTeamData} objectName="alert group" pageName="incidents">
<WrongTeamDisplayWrapper
wrongTeamData={wrongTeamData}
objectName="alert group"
pageName="incidents"
itemNotFoundMessage={`Incident with id=${id} is not found. Please select incident from the list.`}
>
{() => (
<>
<div className={cx('root')}>

View file

@ -12,8 +12,11 @@ import IntegrationsFilters, { Filters } from 'components/IntegrationsFilters/Int
import Text from 'components/Text/Text';
import Tutorial from 'components/Tutorial/Tutorial';
import { TutorialStep } from 'components/Tutorial/Tutorial.types';
import WrongTeamDisplayWrapper, { initWrongTeamDataState, PageBaseState, WrongTeamData } from 'components/WrongTeamDisplayWrapper/WrongTeamDisplayWrapper';
import { getWrongTeamResponseInfo } from 'components/WrongTeamDisplayWrapper/WrongTeamDisplayWrapper.helpers';
import WrongTeamDisplayWrapper, { PageBaseState } from 'components/WrongTeamDisplayWrapper/WrongTeamDisplayWrapper';
import {
getWrongTeamResponseInfo,
initWrongTeamDataState,
} from 'components/WrongTeamDisplayWrapper/WrongTeamDisplayWrapper.helpers';
import AlertReceiveChannelCard from 'containers/AlertReceiveChannelCard/AlertReceiveChannelCard';
import AlertRules from 'containers/AlertRules/AlertRules';
import CreateAlertReceiveChannelContainer from 'containers/CreateAlertReceiveChannelContainer/CreateAlertReceiveChannelContainer';
@ -81,10 +84,6 @@ class Integrations extends React.Component<IntegrationsProps, IntegrationsState>
if (alertReceiveChannel.id) {
selectedAlertReceiveChannel = alertReceiveChannel.id;
} else {
openWarningNotification(
`Integration with id=${query?.id} is not found. Please select integration from the list.`
);
}
if (query.tab) {
@ -119,7 +118,7 @@ class Integrations extends React.Component<IntegrationsProps, IntegrationsState>
}
render() {
const { store } = this.props;
const { store, query } = this.props;
const {
integrationsFilters,
alertReceiveChannelToShowSettings,
@ -132,7 +131,12 @@ class Integrations extends React.Component<IntegrationsProps, IntegrationsState>
const searchResult = alertReceiveChannelStore.getSearchResult();
return (
<WrongTeamDisplayWrapper wrongTeamData={wrongTeamData} objectName="integration" pageName="integrations">
<WrongTeamDisplayWrapper
wrongTeamData={wrongTeamData}
objectName="integration"
pageName="integrations"
itemNotFoundMessage={`Integration with id=${query?.id} is not found. Please select integration from the list.`}
>
{() => (
<>
<div className={cx('root')}>

View file

@ -10,8 +10,11 @@ import GTable from 'components/GTable/GTable';
import PluginLink from 'components/PluginLink/PluginLink';
import Text from 'components/Text/Text';
import WithConfirm from 'components/WithConfirm/WithConfirm';
import WrongTeamDisplayWrapper, { initWrongTeamDataState, PageBaseState, WrongTeamData } from 'components/WrongTeamDisplayWrapper/WrongTeamDisplayWrapper';
import { getWrongTeamResponseInfo } from 'components/WrongTeamDisplayWrapper/WrongTeamDisplayWrapper.helpers';
import WrongTeamDisplayWrapper, { PageBaseState } from 'components/WrongTeamDisplayWrapper/WrongTeamDisplayWrapper';
import {
getWrongTeamResponseInfo,
initWrongTeamDataState,
} from 'components/WrongTeamDisplayWrapper/WrongTeamDisplayWrapper.helpers';
import OutgoingWebhookForm from 'containers/OutgoingWebhookForm/OutgoingWebhookForm';
import { WithPermissionControl } from 'containers/WithPermissionControl/WithPermissionControl';
import { ActionDTO } from 'models/action';
@ -73,7 +76,7 @@ class OutgoingWebhooks extends React.Component<OutgoingWebhooksProps, OutgoingWe
};
render() {
const { store } = this.props;
const { store, query } = this.props;
const { outgoingWebhookIdToEdit, wrongTeamData } = this.state;
const webhooks = store.outgoingWebhookStore.getSearchResult();
@ -97,7 +100,12 @@ class OutgoingWebhooks extends React.Component<OutgoingWebhooksProps, OutgoingWe
];
return (
<WrongTeamDisplayWrapper wrongTeamData={wrongTeamData} objectName="outgoing webhook" pageName="outgoing_webhooks">
<WrongTeamDisplayWrapper
wrongTeamData={wrongTeamData}
objectName="outgoing webhook"
pageName="outgoing_webhooks"
itemNotFoundMessage={`Outgoing webhook with id=${query?.id} is not found. Please select outgoing webhook from the list.`}
>
{() => (
<>
<div className={cx('root')}>

View file

@ -28,14 +28,15 @@ import { SchedulesFiltersType } from 'components/SchedulesFilters/SchedulesFilte
import Text from 'components/Text/Text';
import Tutorial from 'components/Tutorial/Tutorial';
import { TutorialStep } from 'components/Tutorial/Tutorial.types';
import WrongTeamDisplayWrapper, { initWrongTeamDataState, PageBaseState, WrongTeamData } from 'components/WrongTeamDisplayWrapper/WrongTeamDisplayWrapper';
import { getWrongTeamResponseInfo } from 'components/WrongTeamDisplayWrapper/WrongTeamDisplayWrapper.helpers';
import GSelect from 'containers/GSelect/GSelect';
import WrongTeamDisplayWrapper, { PageBaseState } from 'components/WrongTeamDisplayWrapper/WrongTeamDisplayWrapper';
import {
getWrongTeamResponseInfo,
initWrongTeamDataState,
} from 'components/WrongTeamDisplayWrapper/WrongTeamDisplayWrapper.helpers';
import ScheduleForm from 'containers/ScheduleForm/ScheduleForm';
import ScheduleICalSettings from 'containers/ScheduleIcalLink/ScheduleIcalLink';
import { WithPermissionControl } from 'containers/WithPermissionControl/WithPermissionControl';
import { Schedule, ScheduleEvent } from 'models/schedule/schedule.types';
import { PRIVATE_CHANNEL_NAME } from 'models/slack_channel/slack_channel.config';
import { getSlackChannelName } from 'models/slack_channel/slack_channel.helpers';
import { WithStoreProps } from 'state/types';
import { UserAction } from 'state/userAction';
@ -111,7 +112,7 @@ class SchedulesPage extends React.Component<SchedulesPageProps, SchedulesPageSta
};
render() {
const { store } = this.props;
const { store, query } = this.props;
const { expandedSchedulesKeys, scheduleIdToDelete, scheduleIdToEdit, scheduleIdToExport } = this.state;
const { filters, wrongTeamData } = this.state;
const { scheduleStore } = store;
@ -161,7 +162,12 @@ class SchedulesPage extends React.Component<SchedulesPageProps, SchedulesPageSta
const offset = moment().tz(timezoneStr).format('Z');
return (
<WrongTeamDisplayWrapper wrongTeamData={wrongTeamData} objectName="schedule" pageName="schedules">
<WrongTeamDisplayWrapper
wrongTeamData={wrongTeamData}
objectName="schedule"
pageName="schedules"
itemNotFoundMessage={`Schedule with id=${query?.id} is not found. Please select schedule from the list.`}
>
{() => (
<>
<div className={cx('root')}>

View file

@ -12,8 +12,11 @@ import GTable from 'components/GTable/GTable';
import PluginLink from 'components/PluginLink/PluginLink';
import Text from 'components/Text/Text';
import UsersFilters from 'components/UsersFilters/UsersFilters';
import WrongTeamDisplayWrapper, { initWrongTeamDataState, PageBaseState, WrongTeamData } from 'components/WrongTeamDisplayWrapper/WrongTeamDisplayWrapper';
import { getWrongTeamResponseInfo } from 'components/WrongTeamDisplayWrapper/WrongTeamDisplayWrapper.helpers';
import WrongTeamDisplayWrapper, { PageBaseState } from 'components/WrongTeamDisplayWrapper/WrongTeamDisplayWrapper';
import {
getWrongTeamResponseInfo,
initWrongTeamDataState,
} from 'components/WrongTeamDisplayWrapper/WrongTeamDisplayWrapper.helpers';
import UserSettings from 'containers/UserSettings/UserSettings';
import { WithPermissionControl } from 'containers/WithPermissionControl/WithPermissionControl';
import { getRole } from 'models/user/user.helpers';
@ -116,7 +119,7 @@ class Users extends React.Component<UsersProps, UsersState> {
render() {
const { usersFilters, userPkToEdit, page, wrongTeamData } = this.state;
const { store } = this.props;
const { store, query } = this.props;
const { userStore } = store;
const columns = [
@ -168,7 +171,12 @@ class Users extends React.Component<UsersProps, UsersState> {
const { count, results } = userStore.getSearchResult();
return (
<WrongTeamDisplayWrapper wrongTeamData={wrongTeamData} objectName="user" pageName="users">
<WrongTeamDisplayWrapper
wrongTeamData={wrongTeamData}
objectName="user"
pageName="users"
itemNotFoundMessage={`User with id=${query?.id} is not found. Please select user from the list.`}
>
{() => (
<>
<div className={cx('root')}>