CE-2200: remove tabs from log list view

src/views/jobs/JobListView.js

-import React, { useContext, useState, useCallback, useMemo } from "react";
-import { Grid, Container, TextField, Autocomplete } from "@mui/material";
-import Tabs from "@mui/material/Tabs";
-import Tab from "@mui/material/Tab";
+import React, { useContext, useCallback, useMemo } from "react";
+import { Grid, TextField, Autocomplete } from "@mui/material";
 import { RootPaper, useAPIMethod } from "@ess-ics/ce-ui-common";
 import { initRequestParams } from "../../components/common/Helper";
 import { useEffect } from "react";
@@ -15,6 +13,13 @@ import { usePagination } from "../../hooks/pagination";
 import { JobTable } from "../../components/Job/JobTable";
 import { apiContext } from "../../api/DeployApi";
 
+const jobTypeOptions = [
+  { label: "Show all" },
+  { label: "Only deployments", filter: "DEPLOYMENT" },
+  { label: "Only commands", filter: "COMMAND" }
+];
+const defaultJobTypeOption = jobTypeOptions[0];
+
 export function JobListView() {
   const client = useContext(apiContext);
 
@@ -31,7 +36,6 @@ export function JobListView() {
 
   const [urlState, setUrlState] = useUrlState(
     {
-      tab: "0",
       rows: "20",
       page: "0",
       query: "",
@@ -40,32 +44,6 @@ export function JobListView() {
     { navigateMode: "replace" }
   );
 
-  const [deploymentStatus, setDeploymentStatus] = useState(null);
-
-  const handleTabChange = (event, tab) => {
-    setUrlState((s) =>
-      serialize(s.tab) === serialize(tab)
-        ? { tab: serialize(tab) }
-        : { tab: serialize(tab), page: "0" }
-    );
-
-    changeTab(tab);
-  };
-
-  const changeTab = (tab) => {
-    if (tab === 0) {
-      setDeploymentStatus(null);
-    } else if (tab === 1) {
-      setDeploymentStatus("ONGOING");
-    } else if (tab === 2) {
-      setDeploymentStatus("FINISHED");
-    }
-  };
-
-  useEffect(() => {
-    urlState.tab && changeTab(deserialize(urlState.tab));
-  }, [urlState]);
-
   const urlPagination = useMemo(() => {
     return {
       rows: deserialize(urlState.rows),
@@ -114,10 +92,6 @@ export function JobListView() {
       deserialize(urlState.query)
     );
 
-    if (deploymentStatus) {
-      requestParams.status = deploymentStatus;
-    }
-
     if (urlState.job_type) {
       requestParams.type = deserialize(urlState.job_type);
     }
@@ -127,14 +101,7 @@ export function JobListView() {
     return () => {
       abort();
     };
-  }, [
-    getOperations,
-    urlPagination,
-    urlState.query,
-    urlState.job_type,
-    deploymentStatus,
-    abort
-  ]);
+  }, [getOperations, urlPagination, urlState.query, urlState.job_type, abort]);
 
   const setSearch = useCallback(
     (query) => {
@@ -165,12 +132,6 @@ export function JobListView() {
     </SearchBar>
   );
 
-  const jobTypeOptions = [
-    { label: "Show all" },
-    { label: "Only deployments", filter: "DEPLOYMENT" },
-    { label: "Only commands", filter: "COMMAND" }
-  ];
-
   return (
     <RootPaper>
       <Grid
@@ -180,21 +141,10 @@ export function JobListView() {
         <Grid
           container
           spacing={1}
-          component={Container}
-          justifyContent="space-between"
+          justifyContent="flex-end"
           alignItems="center"
           style={{ display: "flex" }}
         >
-          <Grid item>
-            <Tabs
-              value={deserialize(urlState.tab)}
-              onChange={handleTabChange}
-            >
-              <Tab label="All" />
-              <Tab label="Only Ongoing" />
-              <Tab label="Only Completed" />
-            </Tabs>
-          </Grid>
           <Grid
             item
             xs={3}
@@ -206,16 +156,13 @@ export function JobListView() {
                 urlState.job_type
                   ? jobTypeOptions.find(
                       (o) => o.filter === urlState.job_type
-                    ) || {
-                      label: "Show all"
-                    }
-                  : { label: "Show all" }
+                    ) || defaultJobTypeOption
+                  : defaultJobTypeOption
               }
               getOptionLabel={(option) => option.label}
               isOptionEqualToValue={(option, value) =>
                 option.label === value.label
               }
-              style={{ width: "100%" }}
               renderInput={(params) => (
                 <TextField
                   {...params}