Skip to content

Commit

Permalink
remove page context for breadcrumbs rendering
Browse files Browse the repository at this point in the history
  • Loading branch information
Maxim committed Sep 21, 2023
1 parent 7a919ad commit d291d4c
Show file tree
Hide file tree
Showing 4 changed files with 112 additions and 128 deletions.
8 changes: 0 additions & 8 deletions grafana-plugin/src/contexts/PageContext.tsx
View file

This file was deleted.

17 changes: 8 additions & 9 deletions grafana-plugin/src/pages/incident/Incident.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -38,7 +38,6 @@ import AttachIncidentForm from 'containers/AttachIncidentForm/AttachIncidentForm
import EscalationVariants from 'containers/EscalationVariants/EscalationVariants';
import { prepareForEdit, prepareForUpdate } from 'containers/EscalationVariants/EscalationVariants.helpers';
import { WithPermissionControlTooltip } from 'containers/WithPermissionControl/WithPermissionControlTooltip';
import { PageContext } from 'contexts/PageContext';
import {
Alert as AlertType,
Alert,
Expand All @@ -65,7 +64,10 @@ import PagedUsers from './parts/PagedUsers';
const cx = cn.bind(styles);
const INTEGRATION_NAME_LENGTH_LIMIT = 30;

interface IncidentPageProps extends WithStoreProps, PageProps, RouteComponentProps<{ id: string }> {}
interface IncidentPageProps extends WithStoreProps, PageProps, RouteComponentProps<{ id: string }> {
pageTitle: string;
setPageTitle: (value: string) => void;
}

interface IncidentPageState extends PageBaseState {
showIntegrationSettings?: boolean;
Expand All @@ -76,9 +78,6 @@ interface IncidentPageState extends PageBaseState {

@observer
class IncidentPage extends React.Component<IncidentPageProps, IncidentPageState> {
static contextType = PageContext;
context: React.ContextType<typeof PageContext>;

state: IncidentPageState = {
timelineFilter: 'all',
resolutionNoteText: '',
Expand All @@ -94,7 +93,7 @@ class IncidentPage extends React.Component<IncidentPageProps, IncidentPageState>
}

componentWillUnmount(): void {
const { setPageTitle } = this.context;
const { setPageTitle } = this.props;

setPageTitle(undefined);
}
Expand All @@ -113,10 +112,9 @@ class IncidentPage extends React.Component<IncidentPageProps, IncidentPageState>
match: {
params: { id },
},
setPageTitle,
} = this.props;

const { setPageTitle } = this.context;

store.alertGroupStore
.getAlert(id)
.then((alertGroup) => {
Expand Down Expand Up @@ -253,6 +251,7 @@ class IncidentPage extends React.Component<IncidentPageProps, IncidentPageState>
match: {
params: { id },
},
pageTitle,
} = this.props;

const { alerts } = store.alertGroupStore;
Expand All @@ -276,7 +275,7 @@ class IncidentPage extends React.Component<IncidentPageProps, IncidentPageState>
{/* @ts-ignore*/}
<HorizontalGroup align="baseline">
<Text.Title level={3} data-testid="incident-title">
{this.context.pageTitle}
{pageTitle}
</Text.Title>
{incident.root_alert_group && (
<Text type="secondary">
Expand Down
22 changes: 9 additions & 13 deletions grafana-plugin/src/pages/schedule/Schedule.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -26,7 +26,6 @@ import ScheduleForm from 'containers/ScheduleForm/ScheduleForm';
import ScheduleICalSettings from 'containers/ScheduleIcalLink/ScheduleIcalLink';
import UsersTimezones from 'containers/UsersTimezones/UsersTimezones';
import { WithPermissionControlTooltip } from 'containers/WithPermissionControl/WithPermissionControlTooltip';
import { PageContext } from 'contexts/PageContext';
import { Event, Schedule, ScheduleType, Shift, ShiftSwap } from 'models/schedule/schedule.types';
import { Timezone } from 'models/timezone/timezone.types';
import { PageProps, WithStoreProps } from 'state/types';
Expand All @@ -40,7 +39,10 @@ import styles from './Schedule.module.css';

const cx = cn.bind(styles);

interface SchedulePageProps extends PageProps, WithStoreProps, RouteComponentProps<{ id: string }> {}
interface SchedulePageProps extends PageProps, WithStoreProps, RouteComponentProps<{ id: string }> {
pageTitle: string;
setPageTitle: (value: string) => void;
}

interface SchedulePageState extends PageBaseState {
startMoment: dayjs.Dayjs;
Expand All @@ -61,9 +63,6 @@ interface SchedulePageState extends PageBaseState {

@observer
class SchedulePage extends React.Component<SchedulePageProps, SchedulePageState> {
static contextType = PageContext;
context: React.ContextType<typeof PageContext>;

highlightMyShiftsWasToggled = false;

constructor(props: SchedulePageProps) {
Expand Down Expand Up @@ -104,8 +103,7 @@ class SchedulePage extends React.Component<SchedulePageProps, SchedulePageState>
}

componentWillUnmount() {
const { store } = this.props;
const { setPageTitle } = this.context;
const { store, setPageTitle } = this.props;

store.scheduleStore.clearPreview();

Expand Down Expand Up @@ -188,7 +186,7 @@ class SchedulePage extends React.Component<SchedulePageProps, SchedulePageState>
level={2}
onTextChange={this.handleNameChange}
>
{this.context.pageTitle}
{pageTitle}
</Text.Title>
{schedule && <ScheduleQuality schedule={schedule} lastUpdated={this.state.lastUpdated} />}
</div>
Expand Down Expand Up @@ -366,8 +364,8 @@ class SchedulePage extends React.Component<SchedulePageProps, SchedulePageState>
match: {
params: { id: scheduleId },
},
setPageTitle,
} = this.props;
const { setPageTitle } = this.context;

const { scheduleStore } = store;

Expand Down Expand Up @@ -408,10 +406,9 @@ class SchedulePage extends React.Component<SchedulePageProps, SchedulePageState>
match: {
params: { id: scheduleId },
},
setPageTitle,
} = this.props;

const { setPageTitle } = this.context;

const schedule = store.scheduleStore.items[scheduleId];

store.scheduleStore
Expand All @@ -428,10 +425,9 @@ class SchedulePage extends React.Component<SchedulePageProps, SchedulePageState>
match: {
params: { id: scheduleId },
},
setPageTitle,
} = this.props;

const { setPageTitle } = this.context;

const { startMoment } = this.state;

this.setState((prevState) => ({
Expand Down
193 changes: 95 additions & 98 deletions grafana-plugin/src/plugin/GrafanaPluginRootPage.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -20,7 +20,6 @@ import { AppRootProps } from 'types';

import Unauthorized from 'components/Unauthorized';
import DefaultPageLayout from 'containers/DefaultPageLayout/DefaultPageLayout';
import { PageContext } from 'contexts/PageContext';
import { getMatchedPage, getRoutesForPage, pages } from 'pages';
import NoMatch from 'pages/NoMatch';
import EscalationChains from 'pages/escalation-chains/EscalationChains';
Expand Down Expand Up @@ -112,104 +111,102 @@ export const Root = observer((props: AppRootProps) => {
};

return (
<PageContext.Provider value={{ pageTitle, setPageTitle }}>
<DefaultPageLayout {...props} page={page} pageNav={getPageNav()}>
{!isTopNavbar() && (
<>
<Header />
<LegacyNavTabsBar currentPage={page} />
</>
)}

<div
className={classnames('u-position-relative', 'u-flex-grow-1', {
'u-overflow-x-auto': !isTopNavbar(),
'page-body': !isTopNavbar(),
})}
>
{userHasAccess ? (
// Otherwise we'll run into concurrency issues
!basicDataLoaded ? (
<LoadingPlaceholder text="Loading..." />
) : (
<Switch>
<Route path={getRoutesForPage('alert-groups')} exact>
<Incidents query={query} />
</Route>
<Route path={getRoutesForPage('alert-group')} exact>
<Incident query={query} />
</Route>
<Route path={getRoutesForPage('users')} exact>
<Users query={query} />
</Route>
<Route path={getRoutesForPage('integrations')} exact>
<Integrations query={query} />
</Route>
<Route path={getRoutesForPage('integration')} exact>
<Integration query={query} />
</Route>
<Route path={getRoutesForPage('escalations')} exact>
<EscalationChains query={query} />
</Route>
<Route path={getRoutesForPage('schedules')} exact>
<Schedules query={query} />
</Route>
<Route path={getRoutesForPage('schedule')} exact>
<Schedule query={query} />
</Route>
<Route path={getRoutesForPage('outgoing_webhooks')} exact>
<OutgoingWebhooks query={query} />
</Route>
<Route path={getRoutesForPage('settings')} exact>
<SettingsPage />
</Route>
<Route path={getRoutesForPage('chat-ops')} exact>
<ChatOps query={query} />
</Route>
<Route path={getRoutesForPage('live-settings')} exact>
<LiveSettings />
</Route>
<Route path={getRoutesForPage('cloud')} exact>
<CloudPage />
</Route>

{/* Backwards compatibility redirect routes */}
<Route
path={getRoutesForPage('incident')}
exact
render={({ location }) => (
<Redirect
to={{
...location,
pathname: location.pathname.replace(/incident/, 'alert-group'),
}}
></Redirect>
)}
></Route>
<Route
path={getRoutesForPage('incidents')}
exact
render={({ location }) => (
<Redirect
to={{
...location,
pathname: location.pathname.replace(/incidents/, 'alert-groups'),
}}
></Redirect>
)}
></Route>

<Route path="*">
<NoMatch />
</Route>
</Switch>
)
<DefaultPageLayout {...props} page={page} pageNav={getPageNav()}>
{!isTopNavbar() && (
<>
<Header />
<LegacyNavTabsBar currentPage={page} />
</>
)}

<div
className={classnames('u-position-relative', 'u-flex-grow-1', {
'u-overflow-x-auto': !isTopNavbar(),
'page-body': !isTopNavbar(),
})}
>
{userHasAccess ? (
// Otherwise we'll run into concurrency issues
!basicDataLoaded ? (
<LoadingPlaceholder text="Loading..." />
) : (
<Unauthorized requiredUserAction={pagePermissionAction} />
)}
</div>
</DefaultPageLayout>
</PageContext.Provider>
<Switch>
<Route path={getRoutesForPage('alert-groups')} exact>
<Incidents query={query} />
</Route>
<Route path={getRoutesForPage('alert-group')} exact>
<Incident query={query} pageTitle={pageTitle} setPageTitle={setPageTitle} />
</Route>
<Route path={getRoutesForPage('users')} exact>
<Users query={query} />
</Route>
<Route path={getRoutesForPage('integrations')} exact>
<Integrations query={query} />
</Route>
<Route path={getRoutesForPage('integration')} exact>
<Integration query={query} />
</Route>
<Route path={getRoutesForPage('escalations')} exact>
<EscalationChains query={query} />
</Route>
<Route path={getRoutesForPage('schedules')} exact>
<Schedules query={query} />
</Route>
<Route path={getRoutesForPage('schedule')} exact>
<Schedule query={query} pageTitle={pageTitle} setPageTitle={setPageTitle} />
</Route>
<Route path={getRoutesForPage('outgoing_webhooks')} exact>
<OutgoingWebhooks query={query} />
</Route>
<Route path={getRoutesForPage('settings')} exact>
<SettingsPage />
</Route>
<Route path={getRoutesForPage('chat-ops')} exact>
<ChatOps query={query} />
</Route>
<Route path={getRoutesForPage('live-settings')} exact>
<LiveSettings />
</Route>
<Route path={getRoutesForPage('cloud')} exact>
<CloudPage />
</Route>

{/* Backwards compatibility redirect routes */}
<Route
path={getRoutesForPage('incident')}
exact
render={({ location }) => (
<Redirect
to={{
...location,
pathname: location.pathname.replace(/incident/, 'alert-group'),
}}
></Redirect>
)}
></Route>
<Route
path={getRoutesForPage('incidents')}
exact
render={({ location }) => (
<Redirect
to={{
...location,
pathname: location.pathname.replace(/incidents/, 'alert-groups'),
}}
></Redirect>
)}
></Route>

<Route path="*">
<NoMatch />
</Route>
</Switch>
)
) : (
<Unauthorized requiredUserAction={pagePermissionAction} />
)}
</div>
</DefaultPageLayout>
);

async function runQueuedUpdateData(attemptCount: number) {
Expand Down

0 comments on commit d291d4c

Please sign in to comment.