fix: pr fixes

packages/core/src/components/Table/Table.tsx

@@ -99,7 +99,7 @@ const tableIcons = {
   )),
 };
 
-const useCellStyles = makeStyles<BackstageTheme>(theme => ({
+const useCellStyles = makeStyles<BackstageTheme>((theme) => ({
   root: {
     color: theme.palette.grey[500],
     padding: theme.spacing(0, 2, 0, 2.5),
@@ -107,7 +107,7 @@ const useCellStyles = makeStyles<BackstageTheme>(theme => ({
   },
 }));
 
-const useHeaderStyles = makeStyles<BackstageTheme>(theme => ({
+const useHeaderStyles = makeStyles<BackstageTheme>((theme) => ({
   header: {
     padding: theme.spacing(1, 2, 1, 2.5),
     borderTop: `1px solid ${theme.palette.grey.A100}`,
@@ -118,7 +118,7 @@ const useHeaderStyles = makeStyles<BackstageTheme>(theme => ({
   },
 }));
 
-const useToolbarStyles = makeStyles<BackstageTheme>(theme => ({
+const useToolbarStyles = makeStyles<BackstageTheme>((theme) => ({
   root: {
     padding: theme.spacing(3, 0, 2.5, 2.5),
   },
@@ -130,7 +130,7 @@ const useToolbarStyles = makeStyles<BackstageTheme>(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<TableProps> = ({ columns, options, ...props }) => {
   return (
     <MTable
       components={{
-        Cell: cellProps => (
+        Cell: (cellProps) => (
           <MTableCell className={cellClasses.root} {...cellProps} />
         ),
-        Header: headerProps => (
+        Header: (headerProps) => (
           <MTableHeader classes={headerClasses} {...headerProps} />
         ),
-        Toolbar: toolbarProps => (
+        Toolbar: (toolbarProps) => (
           <MTableToolbar classes={toolbarClasses} {...toolbarProps} />
         ),
       }}

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();

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<CircleCIApi>({
   id: 'plugin.circleci.service',
   description: 'Used by the CircleCI plugin to make requests',

plugins/circleci/src/components/Layout/Layout.tsx

@@ -7,11 +7,11 @@ import { Box } from '@material-ui/core';
 export const Layout: React.FC = ({ children }) => (
   <Page theme={pageTheme.tool}>
     <Header
-      pageTitleOverride="Circle CI Plugin"
+      pageTitleOverride="Circle CI"
       title={
         <Box display="flex" alignItems="center">
           <img src={logo} style={{ height: '1em' }} />
-          <Box mr={1} /> Circle CI Plugin
+          <Box mr={1} /> Circle CI
         </Box>
       }
     >

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<Props> = ({ title = 'Circle CI' }) => {
   const location = useLocation();
   const notRoot = !location.pathname.match(/\/circleci\/?$/);
   const isSettingsPage = location.pathname.match(/\/circleci\/settings\/?/);

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<{}> = () => (
   <Layout>

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);

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[] = [
         <RetryIcon />
       </IconButton>
     ),
-    // @ts-ignore
     width: '10%',
   },
 ];

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<typeof useStyles>,
   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();

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...'
         ) : (
-          <Suspense fallback="...">
+          <Suspense fallback={<LinearProgress />}>
             <div style={{ height: '20vh', width: '100%' }}>
               <LazyLog text={messages.join('\n')} extraLines={1} enableSearch />
             </div>

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 {

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<number, BuildWithSteps>;

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[];

plugins/circleci/tsconfig.json

@@ -2,7 +2,6 @@
   "extends": "../../tsconfig.json",
   "include": ["src"],
   "compilerOptions": {
-    "module": "esnext",
-    "baseUrl": "src"
+    "module": "esnext"
   }
 }