diff --git a/packages/core/src/components/Table/Table.tsx b/packages/core/src/components/Table/Table.tsx index a9a55ae763..85f1acc7f8 100644 --- a/packages/core/src/components/Table/Table.tsx +++ b/packages/core/src/components/Table/Table.tsx @@ -99,7 +99,7 @@ const tableIcons = { )), }; -const useCellStyles = makeStyles(theme => ({ +const useCellStyles = makeStyles((theme) => ({ root: { color: theme.palette.grey[500], padding: theme.spacing(0, 2, 0, 2.5), @@ -107,7 +107,7 @@ const useCellStyles = makeStyles(theme => ({ }, })); -const useHeaderStyles = makeStyles(theme => ({ +const useHeaderStyles = makeStyles((theme) => ({ header: { padding: theme.spacing(1, 2, 1, 2.5), borderTop: `1px solid ${theme.palette.grey.A100}`, @@ -118,7 +118,7 @@ const useHeaderStyles = makeStyles(theme => ({ }, })); -const useToolbarStyles = makeStyles(theme => ({ +const useToolbarStyles = makeStyles((theme) => ({ root: { padding: theme.spacing(3, 0, 2.5, 2.5), }, @@ -130,7 +130,7 @@ const useToolbarStyles = makeStyles(theme => ({ })); const convertColumns = (columns: TableColumn[]): TableColumn[] => { - return columns.map(column => { + return columns.map((column) => { const headerStyle: React.CSSProperties = {}; const cellStyle: React.CSSProperties = {}; @@ -149,6 +149,7 @@ const convertColumns = (columns: TableColumn[]): TableColumn[] => { export interface TableColumn extends Column<{}> { highlight?: boolean; + width?: string; } export interface TableProps extends MaterialTableProps<{}> { @@ -171,13 +172,13 @@ const Table: FC = ({ columns, options, ...props }) => { return ( ( + Cell: (cellProps) => ( ), - Header: headerProps => ( + Header: (headerProps) => ( ), - Toolbar: toolbarProps => ( + Toolbar: (toolbarProps) => ( ), }} diff --git a/plugins/circleci/src/App.tsx b/plugins/circleci/src/App.tsx index ec802a88b3..111989405f 100644 --- a/plugins/circleci/src/App.tsx +++ b/plugins/circleci/src/App.tsx @@ -1,11 +1,11 @@ -import { Route, Switch } from 'react-router'; import React from 'react'; -import { BuildsPage } from 'pages/BuildsPage'; -import { DetailedViewPage } from 'pages/DetailedViewPage'; -import { SettingsPage } from 'pages/SettingsPage'; +import { Route, Switch } from 'react-router'; 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(); diff --git a/plugins/circleci/src/api/index.ts b/plugins/circleci/src/api/index.ts index 44f081878f..de76791cc5 100644 --- a/plugins/circleci/src/api/index.ts +++ b/plugins/circleci/src/api/index.ts @@ -21,9 +21,14 @@ import { getFullBuild, postBuildActions, BuildAction, + BuildWithSteps, + BuildStepAction, + BuildSummary, } from 'circleci-api'; import { ApiRef } from '@backstage/core'; +export { BuildWithSteps, BuildStepAction, BuildSummary }; + export const circleCIApiRef = new ApiRef({ id: 'plugin.circleci.service', description: 'Used by the CircleCI plugin to make requests', diff --git a/plugins/circleci/src/components/Layout/Layout.tsx b/plugins/circleci/src/components/Layout/Layout.tsx index 81f5f68d44..4ddf4b7c90 100644 --- a/plugins/circleci/src/components/Layout/Layout.tsx +++ b/plugins/circleci/src/components/Layout/Layout.tsx @@ -7,11 +7,11 @@ import { Box } from '@material-ui/core'; export const Layout: React.FC = ({ children }) => (
- Circle CI Plugin + Circle CI } > diff --git a/plugins/circleci/src/components/PluginHeader/PluginHeader.tsx b/plugins/circleci/src/components/PluginHeader/PluginHeader.tsx index f875c54f02..9676f86e42 100644 --- a/plugins/circleci/src/components/PluginHeader/PluginHeader.tsx +++ b/plugins/circleci/src/components/PluginHeader/PluginHeader.tsx @@ -1,11 +1,11 @@ -import React from 'react'; +import React, { FC } from 'react'; import { Link as RouterLink, useLocation } from 'react-router-dom'; import { ContentHeader, SupportButton } from '@backstage/core'; import { Button, IconButton, Box, Typography } from '@material-ui/core'; import { Settings as SettingsIcon, ArrowBack } from '@material-ui/icons'; -export const PluginHeader: React.FC<{ title?: string }> = ({ - title = 'Circle CI', -}) => { + +export type Props = { title?: string }; +export const PluginHeader: FC = ({ title = 'Circle CI' }) => { const location = useLocation(); const notRoot = !location.pathname.match(/\/circleci\/?$/); const isSettingsPage = location.pathname.match(/\/circleci\/settings\/?/); diff --git a/plugins/circleci/src/pages/BuildsPage/BuildsPage.tsx b/plugins/circleci/src/pages/BuildsPage/BuildsPage.tsx index ff078dcd95..6c1c3f0638 100644 --- a/plugins/circleci/src/pages/BuildsPage/BuildsPage.tsx +++ b/plugins/circleci/src/pages/BuildsPage/BuildsPage.tsx @@ -2,8 +2,8 @@ import React, { FC } from 'react'; import { Content } from '@backstage/core'; import { Grid } from '@material-ui/core'; import { Builds } from './lib/Builds'; -import { Layout } from 'components/Layout'; -import { PluginHeader } from 'components/PluginHeader'; +import { Layout } from '../../components/Layout'; +import { PluginHeader } from '../../components/PluginHeader'; export const BuildsPage: FC<{}> = () => ( diff --git a/plugins/circleci/src/pages/BuildsPage/lib/Builds/Builds.tsx b/plugins/circleci/src/pages/BuildsPage/lib/Builds/Builds.tsx index 2044fe531b..ebf4e37300 100644 --- a/plugins/circleci/src/pages/BuildsPage/lib/Builds/Builds.tsx +++ b/plugins/circleci/src/pages/BuildsPage/lib/Builds/Builds.tsx @@ -14,18 +14,18 @@ * limitations under the License. */ -import React, { FC } from 'react'; +import React, { FC, useEffect } from 'react'; -import { BuildSummary } from 'circleci-api'; +import {} from 'circleci-api'; +import { useApi } from '@backstage/core'; import { CITable, CITableBuildInfo } from '../CITable'; import { useSelector, useDispatch } from 'react-redux'; -import { iRootState, Dispatch } from 'state/store'; -import { useApi } from '@backstage/core'; -import { circleCIApiRef } from 'api'; +import { iRootState, Dispatch } from '../../../../state/store'; +import { circleCIApiRef, BuildSummary } from '../../../../api'; const makeReadableStatus = (status: string | undefined) => { - if (typeof status === 'undefined') return ''; + if (!status) return ''; return ({ retried: 'Retried', canceled: 'Canceled', @@ -75,12 +75,13 @@ export const Builds: FC<{}> = () => { const dispatch: Dispatch = useDispatch(); const api = useApi(circleCIApiRef); - React.useEffect(() => { + useEffect(() => { dispatch.builds.startPolling(api); return () => { dispatch.builds.stopPolling(); }; }, []); + const { builds } = useSelector((state: iRootState) => state.builds); const { repo, owner } = useSelector((state: iRootState) => state.settings); const transformedBuilds = transform(builds, dispatch, api); diff --git a/plugins/circleci/src/pages/BuildsPage/lib/CITable/CITable.tsx b/plugins/circleci/src/pages/BuildsPage/lib/CITable/CITable.tsx index d3f45a6414..cf4fd74b81 100644 --- a/plugins/circleci/src/pages/BuildsPage/lib/CITable/CITable.tsx +++ b/plugins/circleci/src/pages/BuildsPage/lib/CITable/CITable.tsx @@ -9,8 +9,8 @@ import { StatusNA, StatusRunning, Table, + TableColumn, } from '@backstage/core'; -import type { TableColumn } from '@backstage/core/src/components/Table'; export type CITableBuildInfo = { id: string; @@ -57,7 +57,6 @@ const generatedColumns: TableColumn[] = [ title: 'ID', field: 'id', type: 'numeric', - // @ts-ignore width: '80px', }, { @@ -97,7 +96,6 @@ const generatedColumns: TableColumn[] = [ ), - // @ts-ignore width: '10%', }, ]; diff --git a/plugins/circleci/src/pages/DetailedViewPage/DetailedViewPage.tsx b/plugins/circleci/src/pages/DetailedViewPage/DetailedViewPage.tsx index 7562409536..297936b765 100644 --- a/plugins/circleci/src/pages/DetailedViewPage/DetailedViewPage.tsx +++ b/plugins/circleci/src/pages/DetailedViewPage/DetailedViewPage.tsx @@ -1,21 +1,20 @@ import React, { FC } from 'react'; -import { Content, InfoCard, useApi } from '@backstage/core'; -import { Grid, Box } from '@material-ui/core'; -import { PluginHeader } from 'components/PluginHeader'; -import { BuildWithSteps, BuildStepAction } from 'circleci-api'; -import { circleCIApiRef } from 'api'; -import { useParams } from 'react-router-dom'; -import { ActionOutput } from './lib/ActionOutput/ActionOutput'; -import { Layout } from 'components/Layout'; -import { Dispatch, iRootState } from 'state/store'; import { useDispatch, useSelector } from 'react-redux'; +import { useParams } from 'react-router-dom'; +import { Content, InfoCard, useApi } from '@backstage/core'; +import { circleCIApiRef, BuildWithSteps, BuildStepAction } from '../../api'; +import { Grid, Box } from '@material-ui/core'; +import { makeStyles } from '@material-ui/core/styles'; +import { PluginHeader } from '../../components/PluginHeader'; +import { ActionOutput } from './lib/ActionOutput/ActionOutput'; +import { Layout } from '../../components/Layout'; +import { Dispatch, iRootState } from '../../state/store'; const BuildName: FC<{ build: BuildWithSteps | null }> = ({ build }) => ( <> #{build?.build_num} - {build?.subject} ); -import { makeStyles } from '@material-ui/core/styles'; const useStyles = makeStyles((theme) => ({ neutral: {}, failed: { @@ -66,16 +65,11 @@ const pickClassName = ( classes: ReturnType, build: BuildWithSteps = {} as BuildWithSteps, ) => { - switch (true) { - case build.failed: - return classes.failed; - case ['running', 'queued'].includes(build.status!): - return classes.running; - case build.status === 'success': - return classes.success; - default: - return classes.neutral; - } + if (build.failed) return classes.failed; + if (['running', 'queued'].includes(build.status!)) return classes.running; + if (build.status === 'success') return classes.success; + + return classes.neutral; }; export const DetailedViewPage: FC<{}> = () => { let { buildId = '' } = useParams(); diff --git a/plugins/circleci/src/pages/DetailedViewPage/lib/ActionOutput/ActionOutput.tsx b/plugins/circleci/src/pages/DetailedViewPage/lib/ActionOutput/ActionOutput.tsx index 63d78412a0..03bf984835 100644 --- a/plugins/circleci/src/pages/DetailedViewPage/lib/ActionOutput/ActionOutput.tsx +++ b/plugins/circleci/src/pages/DetailedViewPage/lib/ActionOutput/ActionOutput.tsx @@ -4,6 +4,7 @@ import { ExpansionPanelSummary, Typography, ExpansionPanelDetails, + LinearProgress, } from '@material-ui/core'; import moment from 'moment'; import ExpandMoreIcon from '@material-ui/icons/ExpandMore'; @@ -70,7 +71,7 @@ export const ActionOutput: FC<{ {messages.length === 0 ? ( 'Nothing here...' ) : ( - + }>
diff --git a/plugins/circleci/src/pages/SettingsPage/SettingsPage.tsx b/plugins/circleci/src/pages/SettingsPage/SettingsPage.tsx index f9f479d436..155669737a 100644 --- a/plugins/circleci/src/pages/SettingsPage/SettingsPage.tsx +++ b/plugins/circleci/src/pages/SettingsPage/SettingsPage.tsx @@ -9,13 +9,12 @@ import { Snackbar, Box, } from '@material-ui/core'; -import { InfoCard, Content } from '@backstage/core'; -import { Layout } from 'components/Layout'; -import { SettingsState } from 'state/models/settings'; -import { iRootState } from 'state/store'; -import { Dispatch } from '../../state/store'; import { Alert } from '@material-ui/lab'; -import { PluginHeader } from 'components/PluginHeader'; +import { InfoCard, Content } from '@backstage/core'; +import { Layout } from '../../components/Layout'; +import { PluginHeader } from '../../components/PluginHeader'; +import { SettingsState } from '../../state/models/settings'; +import { iRootState, Dispatch } from '../../state/store'; export const SettingsPage = () => { const { diff --git a/plugins/circleci/src/state/models/buildWithSteps.ts b/plugins/circleci/src/state/models/buildWithSteps.ts index 4bde261f09..20a5023215 100644 --- a/plugins/circleci/src/state/models/buildWithSteps.ts +++ b/plugins/circleci/src/state/models/buildWithSteps.ts @@ -1,6 +1,6 @@ import { Dispatch, iRootState } from '../store'; import { GitType, BuildWithSteps } from 'circleci-api'; -import { CircleCIApi } from 'api'; +import { CircleCIApi } from '../../api'; export type BuildState = { builds: Record; diff --git a/plugins/circleci/src/state/models/builds.ts b/plugins/circleci/src/state/models/builds.ts index f427175bd8..8d5f9727d6 100644 --- a/plugins/circleci/src/state/models/builds.ts +++ b/plugins/circleci/src/state/models/builds.ts @@ -1,6 +1,6 @@ import { Dispatch, iRootState } from '../store'; import { BuildSummary, GitType } from 'circleci-api'; -import { CircleCIApi } from 'api'; +import { CircleCIApi } from '../../api'; export type BuildsState = { builds: BuildSummary[]; diff --git a/plugins/circleci/tsconfig.json b/plugins/circleci/tsconfig.json index 91968a6e49..5cf0a023cb 100644 --- a/plugins/circleci/tsconfig.json +++ b/plugins/circleci/tsconfig.json @@ -2,7 +2,6 @@ "extends": "../../tsconfig.json", "include": ["src"], "compilerOptions": { - "module": "esnext", - "baseUrl": "src" + "module": "esnext" } }