diff --git a/plugins/circleci/src/App.tsx b/plugins/circleci/src/components/Store/Store.tsx similarity index 60% rename from plugins/circleci/src/App.tsx rename to plugins/circleci/src/components/Store/Store.tsx index eddb9556ad..897f19d0ce 100644 --- a/plugins/circleci/src/App.tsx +++ b/plugins/circleci/src/components/Store/Store.tsx @@ -13,14 +13,10 @@ * See the License for the specific language governing permissions and * limitations under the License. */ -import React from 'react'; -import { Route, Switch } from 'react-router'; +import React, { FC } from 'react'; import { Provider, useDispatch } from 'react-redux'; -import { BuildsPage } from './pages/BuildsPage'; -import { DetailedViewPage } from './pages/DetailedViewPage'; -import { SettingsPage } from './pages/SettingsPage'; -import store, { Dispatch } from './state/store'; +import store, { Dispatch } from '../../state/store'; const RehydrateSettings = () => { const dispatch: Dispatch = useDispatch(); @@ -30,17 +26,20 @@ const RehydrateSettings = () => { }, []); return null; }; -export const App = () => { + +export const Store: FC = ({ children }) => { return ( - <> +
- - - - - - + {children} +
); }; + +export const withStore = (Component: React.ComponentType) => () => ( + + + +); diff --git a/plugins/circleci/src/components/Store/index.ts b/plugins/circleci/src/components/Store/index.ts new file mode 100644 index 0000000000..47e0805c13 --- /dev/null +++ b/plugins/circleci/src/components/Store/index.ts @@ -0,0 +1 @@ +export * from './Store'; diff --git a/plugins/circleci/src/pages/BuildsPage/BuildsPage.tsx b/plugins/circleci/src/pages/BuildsPage/BuildsPage.tsx index 70722ae487..700aa1288e 100644 --- a/plugins/circleci/src/pages/BuildsPage/BuildsPage.tsx +++ b/plugins/circleci/src/pages/BuildsPage/BuildsPage.tsx @@ -19,8 +19,9 @@ import { Grid } from '@material-ui/core'; import { Builds } from './lib/Builds'; import { Layout } from '../../components/Layout'; import { PluginHeader } from '../../components/PluginHeader'; +import { withStore } from '../../components/Store'; -export const BuildsPage: FC<{}> = () => ( +const BuildsPage: FC<{}> = () => ( @@ -32,3 +33,5 @@ export const BuildsPage: FC<{}> = () => ( ); + +export default withStore(BuildsPage); diff --git a/plugins/circleci/src/pages/BuildsPage/index.ts b/plugins/circleci/src/pages/BuildsPage/index.ts index bb9de5d696..9b555f0f12 100644 --- a/plugins/circleci/src/pages/BuildsPage/index.ts +++ b/plugins/circleci/src/pages/BuildsPage/index.ts @@ -13,4 +13,4 @@ * See the License for the specific language governing permissions and * limitations under the License. */ -export * from './BuildsPage'; +export { default as BuildsPage } from './BuildsPage'; diff --git a/plugins/circleci/src/pages/DetailedViewPage/DetailedViewPage.tsx b/plugins/circleci/src/pages/DetailedViewPage/DetailedViewPage.tsx index 0a0c90c649..15598cd8f4 100644 --- a/plugins/circleci/src/pages/DetailedViewPage/DetailedViewPage.tsx +++ b/plugins/circleci/src/pages/DetailedViewPage/DetailedViewPage.tsx @@ -24,6 +24,7 @@ import { PluginHeader } from '../../components/PluginHeader'; import { ActionOutput } from './lib/ActionOutput/ActionOutput'; import { Layout } from '../../components/Layout'; import { Dispatch, iRootState } from '../../state/store'; +import { withStore } from '../../components/Store'; const BuildName: FC<{ build: BuildWithSteps | null }> = ({ build }) => ( <> @@ -86,7 +87,8 @@ const pickClassName = ( return classes.neutral; }; -export const DetailedViewPage: FC<{}> = () => { + +const DetailedViewPage: FC<{}> = () => { const { buildId = '' } = useParams(); const classes = useStyles(); const dispatch: Dispatch = useDispatch(); @@ -151,3 +153,5 @@ const ActionsList: FC<{ actions: BuildStepAction[]; name: string }> = ({ ); }; + +export default withStore(DetailedViewPage); diff --git a/plugins/circleci/src/pages/DetailedViewPage/index.ts b/plugins/circleci/src/pages/DetailedViewPage/index.ts index 62bbabbfe5..40d25c4a84 100644 --- a/plugins/circleci/src/pages/DetailedViewPage/index.ts +++ b/plugins/circleci/src/pages/DetailedViewPage/index.ts @@ -13,4 +13,4 @@ * See the License for the specific language governing permissions and * limitations under the License. */ -export * from './DetailedViewPage'; +export { default as DetailedViewPage } from './DetailedViewPage'; diff --git a/plugins/circleci/src/pages/SettingsPage/SettingsPage.tsx b/plugins/circleci/src/pages/SettingsPage/SettingsPage.tsx index 20fe096605..536535bc85 100644 --- a/plugins/circleci/src/pages/SettingsPage/SettingsPage.tsx +++ b/plugins/circleci/src/pages/SettingsPage/SettingsPage.tsx @@ -30,8 +30,9 @@ import { Layout } from '../../components/Layout'; import { PluginHeader } from '../../components/PluginHeader'; import { SettingsState } from '../../state/models/settings'; import { iRootState, Dispatch } from '../../state/store'; +import { withStore } from '../../components/Store'; -export const SettingsPage = () => { +const SettingsPage = () => { const { token: tokenFromStore, owner: ownerFromStore, @@ -89,7 +90,7 @@ export const SettingsPage = () => { value={token} fullWidth variant="outlined" - onChange={e => setToken(e.target.value)} + onChange={(e) => setToken(e.target.value)} /> @@ -99,7 +100,7 @@ export const SettingsPage = () => { label="Owner" variant="outlined" value={owner} - onChange={e => setOwner(e.target.value)} + onChange={(e) => setOwner(e.target.value)} /> @@ -109,7 +110,7 @@ export const SettingsPage = () => { fullWidth variant="outlined" value={repo} - onChange={e => setRepo(e.target.value)} + onChange={(e) => setRepo(e.target.value)} /> @@ -144,3 +145,5 @@ export const SettingsPage = () => { ); }; + +export default withStore(SettingsPage); diff --git a/plugins/circleci/src/pages/SettingsPage/index.ts b/plugins/circleci/src/pages/SettingsPage/index.ts index b7883e4887..e0ba8157b2 100644 --- a/plugins/circleci/src/pages/SettingsPage/index.ts +++ b/plugins/circleci/src/pages/SettingsPage/index.ts @@ -13,4 +13,4 @@ * See the License for the specific language governing permissions and * limitations under the License. */ -export * from './SettingsPage'; +export { default as SettingsPage } from './SettingsPage'; diff --git a/plugins/circleci/src/plugin.ts b/plugins/circleci/src/plugin.ts index 8e308bd12c..fb42c53835 100644 --- a/plugins/circleci/src/plugin.ts +++ b/plugins/circleci/src/plugin.ts @@ -14,11 +14,15 @@ * limitations under the License. */ import { createPlugin } from '@backstage/core'; -import { App } from './App'; +import { BuildsPage } from './pages/BuildsPage'; +import { SettingsPage } from './pages/SettingsPage'; +import { DetailedViewPage } from './pages/DetailedViewPage'; export const plugin = createPlugin({ id: 'circleci', register({ router }) { - router.registerRoute('/circleci', App, { exact: false }); + router.registerRoute('/circleci', BuildsPage); + router.registerRoute('/circleci/settings', SettingsPage); + router.registerRoute('/circleci/build/:buildId', DetailedViewPage); }, });