188 datagrid

package.json

@@ -4,6 +4,7 @@
   "private": true,
   "dependencies": {
     "@material-ui/core": "^4.11.2",
+    "@material-ui/data-grid": "^4.0.0-alpha.19",
     "@material-ui/icons": "^4.11.2",
     "@material-ui/lab": "^4.0.0-alpha.57",
     "@testing-library/jest-dom": "^5.11.1",

src/_helpers/route.helpers.ts

@@ -1,15 +1,29 @@
 import { TestRun, TestVariation } from "../types";
 import { routes } from "../constants";
+import qs from "qs";
 
 export const buildTestRunUrl = (
   testVariation: TestVariation,
   testRun: TestRun
 ) =>
   `${routes.HOME}${testVariation.projectId}?buildId=${testRun.buildId}&testId=${testRun.id}`;
 
-export const buildTestRunLocation = (testRun: TestRun) => ({
-  search: `buildId=${testRun.buildId}&testId=${testRun.id}`,
+export const buildTestRunLocation = (buildId: string, testRunId: string) => ({
+  search: `buildId=${buildId}&testId=${testRunId}`,
 });
 
 export const buildBuildPageUrl = (projectId: string, buildId: string) =>
   `${routes.HOME}${projectId}?buildId=${buildId}`;
+
+export interface QueryParams {
+  buildId?: string;
+  testId?: string;
+}
+
+export const getQueryParams = (guery: string): QueryParams => {
+  const queryParams = qs.parse(guery, { ignoreQueryPrefix: true });
+  return {
+    buildId: queryParams.buildId as string,
+    testId: queryParams.testId as string,
+  };
+};

src/components/ArrowButtons.tsx

@@ -33,7 +33,7 @@ export const ArrowButtons: React.FunctionComponent<{
   const navigateNext = () => {
     if (selectedTestRunIndex + 1 < testRuns.length) {
       const next = testRuns[selectedTestRunIndex + 1];
-      history.push(buildTestRunLocation(next));
+      history.push(buildTestRunLocation(next.buildId, next.id));
       selectTestRun(testRunDispatch, next.id);
     }
   };
@@ -42,7 +42,7 @@ export const ArrowButtons: React.FunctionComponent<{
   const navigateBefore = () => {
     if (selectedTestRunIndex > 0) {
       const prev = testRuns[selectedTestRunIndex - 1];
-      history.push(buildTestRunLocation(prev));
+      history.push(buildTestRunLocation(prev.buildId, prev.id));
       selectTestRun(testRunDispatch, prev.id);
     }
   };

src/components/BuildDetails.tsx

@@ -7,67 +7,72 @@ import {
   Button,
   LinearProgress,
 } from "@material-ui/core";
-import { Build } from "../types";
 import { BuildStatusChip } from "./BuildStatusChip";
 import { useSnackbar } from "notistack";
 import { buildsService } from "../services";
 import { formatDateTime } from "../_helpers/format.helper";
+import { useBuildState } from "../contexts";
 
-interface IProps {
-  build: Build;
-}
-
-const BuildDetails: React.FunctionComponent<IProps> = ({ build }) => {
+const BuildDetails: React.FunctionComponent = () => {
   const { enqueueSnackbar } = useSnackbar();
+  const { selectedBuild } = useBuildState();
+
+  if (!selectedBuild) {
+    return null;
+  }
+
+  const approveAllButton = selectedBuild.unresolvedCount > 0 && (
+    <Grid item>
+      <Button
+        variant="contained"
+        color="primary"
+        size="small"
+        onClick={async () => {
+          enqueueSnackbar(
+            "Wait for the confirmation message until approval is completed.",
+            {
+              variant: "info",
+            }
+          );
+
+          buildsService
+            .approve(selectedBuild.id, selectedBuild.merge)
+            .then(() =>
+              enqueueSnackbar("All approved.", {
+                variant: "success",
+              })
+            )
+            .catch((err) =>
+              enqueueSnackbar(err, {
+                variant: "error",
+              })
+            );
+        }}
+      >
+        Approve All
+      </Button>
+    </Grid>
+  );
+
+  const loadingAnimation = selectedBuild.isRunning && <LinearProgress />;
 
   return (
     <Grid container direction="column">
       <Grid item>
         <Box m={0.5}>
           <Grid container spacing={1} alignItems="center">
             <Grid item>
-              <Typography variant="subtitle2">{`#${build.number} ${
-                build.ciBuildId || ""
+              <Typography variant="subtitle2">{`#${selectedBuild.number} ${
+                selectedBuild.ciBuildId || ""
               }`}</Typography>
             </Grid>
             <Grid item>
-              <Chip size="small" label={build.branchName} />
+              <Chip size="small" label={selectedBuild.branchName} />
             </Grid>
             <Grid item>
-              <BuildStatusChip status={build.status} />
+              <BuildStatusChip status={selectedBuild.status} />
             </Grid>
-            {build.unresolvedCount > 0 && (
-              <Grid item>
-                <Button
-                  variant="contained"
-                  color="primary"
-                  size="small"
-                  onClick={async () => {
-                    enqueueSnackbar(
-                      "Wait for the confirmation message until approval is completed.",
-                      {
-                        variant: "info",
-                      }
-                    );
-
-                    buildsService
-                      .approve(build.id, build.merge)
-                      .then(() =>
-                        enqueueSnackbar("All approved.", {
-                          variant: "success",
-                        })
-                      )
-                      .catch((err) =>
-                        enqueueSnackbar(err, {
-                          variant: "error",
-                        })
-                      );
-                  }}
-                >
-                  Approve All
-                </Button>
-              </Grid>
-            )}
+            {approveAllButton}
           </Grid>
         </Box>
       </Grid>
@@ -76,7 +81,7 @@ const BuildDetails: React.FunctionComponent<IProps> = ({ build }) => {
           <Grid container spacing={1}>
             <Grid item>
               <Typography variant="caption">
-                {formatDateTime(build.createdAt)}
+                {formatDateTime(selectedBuild.createdAt)}
               </Typography>
             </Grid>
           </Grid>
@@ -87,22 +92,24 @@ const BuildDetails: React.FunctionComponent<IProps> = ({ build }) => {
           <Grid container spacing={1}>
             <Grid item>
               <Typography variant="caption">{`${
-                build.unresolvedCount + build.failedCount + build.passedCount
+                selectedBuild.unresolvedCount +
+                selectedBuild.failedCount +
+                selectedBuild.passedCount
               } total`}</Typography>
             </Grid>
             <Grid item>
-              <Typography variant="caption">{`${build.unresolvedCount} unresolved`}</Typography>
+              <Typography variant="caption">{`${selectedBuild.unresolvedCount} unresolved`}</Typography>
             </Grid>
             <Grid item>
-              <Typography variant="caption">{`${build.failedCount} failed`}</Typography>
+              <Typography variant="caption">{`${selectedBuild.failedCount} failed`}</Typography>
             </Grid>
             <Grid item>
-              <Typography variant="caption">{`${build.passedCount} passed`}</Typography>
+              <Typography variant="caption">{`${selectedBuild.passedCount} passed`}</Typography>
             </Grid>
           </Grid>
         </Box>
       </Grid>
-      {build.isRunning && <LinearProgress />}
+      {loadingAnimation}
     </Grid>
   );
 };

src/components/BuildList.tsx → src/components/BuildList/index.tsx

@@ -24,13 +24,16 @@ import {
   deleteBuild,
   selectBuild,
   stopBuild,
-} from "../contexts";
-import { BuildStatusChip } from "./BuildStatusChip";
-import { SkeletonList } from "./SkeletonList";
-import { formatDateTime } from "../_helpers/format.helper";
+  getBuildList,
+  useProjectState,
+} from "../../contexts";
+import { BuildStatusChip } from "../BuildStatusChip";
+import { SkeletonList } from "../SkeletonList";
+import { formatDateTime } from "../../_helpers/format.helper";
 import { useSnackbar } from "notistack";
-import { Build } from "../types";
-import { BaseModal } from "./BaseModal";
+import { Build } from "../../types";
+import { BaseModal } from "../BaseModal";
+import { Pagination } from "@material-ui/lab";
 
 const useStyles = makeStyles((theme: Theme) =>
   createStyles({
@@ -52,10 +55,10 @@ const useStyles = makeStyles((theme: Theme) =>
 const BuildList: FunctionComponent = () => {
   const classes = useStyles();
   const history = useHistory();
-  const { buildList, selectedBuild, loading } = useBuildState();
+  const { buildList, selectedBuild, loading, total, take } = useBuildState();
   const buildDispatch = useBuildDispatch();
   const { enqueueSnackbar } = useSnackbar();
-
+  const { selectedProjectId } = useProjectState();
   const [deleteDialogOpen, setDeleteDialogOpen] = React.useState(false);
   const [anchorEl, setAnchorEl] = React.useState<null | HTMLElement>(null);
   const [menuBuild, setMenuBuild] = React.useState<Build | null>();
@@ -83,9 +86,25 @@ const BuildList: FunctionComponent = () => {
     }
   }, [buildDispatch, selectedBuild, buildList]);
 
+  const getBuildListCalback: any = React.useCallback(
+    (page: number) =>
+      selectedProjectId &&
+      getBuildList(buildDispatch, selectedProjectId, page).catch(
+        (err: string) =>
+          enqueueSnackbar(err, {
+            variant: "error",
+          })
+      ),
+    [buildDispatch, enqueueSnackbar, selectedProjectId]
+  );
+
+  React.useEffect(() => {
+    getBuildListCalback(1);
+  }, [getBuildListCalback]);
+
   return (
     <React.Fragment>
-      <Box height={1} overflow="auto">
+      <Box height="91%" overflow="auto">
         <List>
           {loading ? (
             <SkeletonList />
@@ -150,6 +169,19 @@ const BuildList: FunctionComponent = () => {
           )}
         </List>
       </Box>
+      <Box height="9%">
+        <Grid container justify="center">
+          <Grid item>
+            <Pagination
+              size="small"
+              defaultPage={1}
+              count={Math.ceil(total / take)}
+              onChange={(event, page) => getBuildListCalback(page)}
+            />
+          </Grid>
+        </Grid>
+      </Box>
+
       {menuBuild && (
         <Menu anchorEl={anchorEl} open={!!menuBuild} onClose={handleMenuClose}>
           {menuBuild.isRunning && (
@@ -187,16 +219,23 @@ const BuildList: FunctionComponent = () => {
             }?`}</Typography>
           }
           onSubmit={() => {
-            let indexOfBuildDeleted = buildList.findIndex((e) => e.id === menuBuild.id);
-            let indexOfSelectedBuild = buildList.findIndex((e) => e.id === selectedBuild?.id);
+            let indexOfBuildDeleted = buildList.findIndex(
+              (e) => e.id === menuBuild.id
+            );
+            let indexOfSelectedBuild = buildList.findIndex(
+              (e) => e.id === selectedBuild?.id
+            );
             deleteBuild(buildDispatch, menuBuild.id)
               .then((b) => {
                 if (indexOfBuildDeleted === indexOfSelectedBuild) {
                   if (buildList.length > 1) {
                     if (indexOfBuildDeleted === 0) {
                       selectBuild(buildDispatch, buildList[1].id);
                     } else {
-                      selectBuild(buildDispatch, buildList[indexOfBuildDeleted - 1].id);
+                      selectBuild(
+                        buildDispatch,
+                        buildList[indexOfBuildDeleted - 1].id
+                      );
                     }
                   } else {
                     selectBuild(buildDispatch, null);