IO-1911 Timetickets Scoreboard.

client/src/pages/scoreboard/scoreboard.page.container.jsx

@@ -1,19 +1,21 @@
-import Icon from "@ant-design/icons";
+import Icon, { BarsOutlined } from "@ant-design/icons";
 import { Tabs } from "antd";
 import React, { useEffect } from "react";
 import { useTranslation } from "react-i18next";
+import { FaShieldAlt } from "react-icons/fa";
 import { connect } from "react-redux";
 import { createStructuredSelector } from "reselect";
 import FeatureWrapper from "../../components/feature-wrapper/feature-wrapper.component";
 import RbacWrapper from "../../components/rbac-wrapper/rbac-wrapper.component";
 import ScoreboardDisplay from "../../components/scoreboard-display/scoreboard-display.component";
+import ScoreboardTimeTickets from "../../components/scoreboard-timetickets/scoreboard-timetickets.component";
 import {
   setBreadcrumbs,
   setSelectedHeader,
 } from "../../redux/application/application.actions";
 import { selectBodyshop } from "../../redux/user/user.selectors";
-import { FaHardHat, FaRegStickyNote, FaShieldAlt } from "react-icons/fa";
-import ScoreboardTimeTickets from "../../components/scoreboard-timetickets/scoreboard-timetickets.component";
+import queryString from "query-string";
+import { useHistory, useLocation } from "react-router-dom";
 
 const mapStateToProps = createStructuredSelector({
   bodyshop: selectBodyshop,
@@ -26,7 +28,9 @@ const mapDispatchToProps = (dispatch) => ({
 
 export function ScoreboardContainer({ setBreadcrumbs, setSelectedHeader }) {
   const { t } = useTranslation();
-
+  const searchParams = queryString.parse(useLocation().search);
+  const { tab } = searchParams;
+  const history = useHistory();
   useEffect(() => {
     document.title = t("titles.scoreboard");
     setSelectedHeader("scoreboard");
@@ -41,12 +45,21 @@ export function ScoreboardContainer({ setBreadcrumbs, setSelectedHeader }) {
   return (
     <FeatureWrapper featureName="scoreboard">
       <RbacWrapper action="scoreboard:view">
-        <Tabs>
+        <Tabs
+          activeKey={tab || "sb"}
+          destroyInactiveTabPane
+          onChange={(key) => {
+            searchParams.tab = key;
+            history.push({
+              search: queryString.stringify(searchParams),
+            });
+          }}
+        >
           <Tabs.TabPane
             tab={
               <span>
                 <Icon component={FaShieldAlt} />
-                {t("menus.jobsdetail.general")}
+                {t("scoreboard.labels.jobs")}
               </span>
             }
             destroyInactiveTabPane
@@ -57,8 +70,8 @@ export function ScoreboardContainer({ setBreadcrumbs, setSelectedHeader }) {
           <Tabs.TabPane
             tab={
               <span>
-                <Icon component={FaShieldAlt} />
-                {t("menus.jobsdetail.general")}
+                <BarsOutlined />
+                {t("scoreboard.labels.timetickets")}
               </span>
             }
             destroyInactiveTabPane