CEC-3519 Add car version history (#260)

* CEC-3519 Add car version history
CEC-3455 Delete button is icon and remove column
CEC-3496 Fix Issue delete

* smell

* Remove tab from issues details page

* Fix date format

src/components/Controls/IssueSelectionTable/index.jsx

@@ -1,26 +1,26 @@
-import React, { useEffect, useState } from "react";
-import { Link } from "react-router-dom";
-import PropTypes from "prop-types";
 import {
   Table,
   TableBody,
   TableCell,
   TableFooter,
   TablePagination,
-  TableRow,
-  Button,
+  TableRow
 } from "@material-ui/core";
+import DeleteIcon from "@material-ui/icons/Delete";
 import clsx from "clsx";
+import PropTypes from "prop-types";
+import React, { useEffect, useState } from "react";
+import { Link } from "react-router-dom";
 
+import { logger } from "../../../services/monitoring";
+import { LocalDateTimeString } from "../../../utils/dates";
+import { Permissions } from "../../../utils/roles";
 import { useIssueContext } from "../../Contexts/IssueContext";
 import { useStatusContext } from "../../Contexts/StatusContext";
-import { LocalDateTimeString } from "../../../utils/dates";
+import { useUserContext } from "../../Contexts/UserContext";
 import TableHeaderSortable from "../../Table/HeaderSortable";
-import { logger } from "../../../services/monitoring";
 import { useLocalStorage } from "../../useLocalStorage";
 import { RoleWrap } from "../RoleWrap";
-import { useUserContext } from "../../Contexts/UserContext";
-import { Permissions } from "../../../utils/roles";
 
 const tableColumns = [
   {
@@ -35,10 +35,6 @@ const tableColumns = [
     id: "title",
     label: "Title",
   },
-  {
-    id: "description",
-    label: "Description",
-  },
   {
     id: "driver_id",
     label: "Driver ID",
@@ -69,7 +65,7 @@ const IssueSelectionTable = (props) => {
   const [pageIndex, setPageIndex] = useState(0);
   const [orderBy, setOrderBy] = useState("created_at");
   const [order, setOrder] = useState("asc");
-  const { getIssues, issues, totalIssues = 0 } = useIssueContext();
+  const { deleteIssue, getIssues, issues, totalIssues = 0 } = useIssueContext();
   const { groups, providers } = useUserContext();
   const { setMessage } = useStatusContext();
 
@@ -132,12 +128,19 @@ const IssueSelectionTable = (props) => {
     setPageIndex(0);
   }, [search]);
 
-  const { deleteIssue } = useIssueContext();
   const handleDelete = (id) => {
     deleteIssue(id, token).then(() => {
-      getIssues(token)
+      getIssues(
+        {
+          limit: pageSize,
+          offset: pageSize * pageIndex,
+          order: `${orderBy} ${order}`,
+        },
+        token
+      );
     });
   };
+
   return (
     <div className={clsx(classes.paper, classes.tableSize)}>
       <Table>
@@ -161,7 +164,6 @@ const IssueSelectionTable = (props) => {
                 </TableCell>
                 <TableCell align="center">{row.vin}</TableCell>
                 <TableCell align="center">{row.title}</TableCell>
-                <TableCell align="center">{row.description || ""}</TableCell>
                 <TableCell align="center">{row.driver_id}</TableCell>
                 <TableCell align="center">
                   {LocalDateTimeString(row.timestamp)}
@@ -172,7 +174,9 @@ const IssueSelectionTable = (props) => {
                   rolesPerProvider={Permissions.FiskerDelete}
                 >
                   <TableCell>
-                    <Button onClick={() => handleDelete(row.id)}>Delete</Button>
+                    <Link to="#" onClick={() => handleDelete(row.id)}>
+                      <DeleteIcon />
+                    </Link>
                   </TableCell>
                 </RoleWrap>
               </TableRow>
@@ -181,12 +185,9 @@ const IssueSelectionTable = (props) => {
         </TableBody>
         <TableFooter>
           <TableRow>
-              {totalIssues === 0 ? (
-                <td>No issues found</td>
-              ) : (
               <TablePagination
                 rowsPerPageOptions={[5, 10, 25, 100]}
-                colSpan={7}
+                colSpan={6}
                 count={totalIssues}
                 rowsPerPage={pageSize}
                 page={pageIndex}
@@ -197,7 +198,6 @@ const IssueSelectionTable = (props) => {
                 onPageChange={handleChangePageIndex}
                 onRowsPerPageChange={handleChangePageSize}
               />
-            )}
           </TableRow>
         </TableFooter>
       </Table>