Corrections from running the dashboard

 * Controller name check and Date picker
 * Changed fetchControllers method
 * Removed return in fetchDataList
 * Main layout changes
 * Updated Search Component
 * Replaced the term controllers

Author: MVarshini

dashboard/package.json

@@ -15,6 +15,9 @@
     "classnames": "^2.3.1",
     "crypto-js": "^4.1.1",
     "js-cookie": "^3.0.1",
+    "babel-jest": "^27.5.1",
+    "gulp": "^4.0.2",
+    "jest": "^27.5.1",
     "less-watch-compiler": "^1.16.3",
     "patternfly": "^3.9.0",
     "react": "^17.0.2",

dashboard/src/App.js

@@ -5,7 +5,7 @@ import './App.css';
 import * as APP_ROUTES from "./utils/routeConstants";
 import AuthComponent from './modules/components/AuthComponent';
 import '@patternfly/patternfly/patternfly.css';
-import { TableWithFavorite } from 'modules/components/TableComponent';
+import MainLayout  from 'modules/containers/MainLayout';
 
 function App() {  
   useEffect(() => {
@@ -17,7 +17,7 @@ function App() {
     <div className="App">
       <BrowserRouter>
         <Routes>
-          <Route path="/" element={<TableWithFavorite />} />           
+          <Route path="/" element={<MainLayout />} />           
           <Route path={APP_ROUTES.AUTH} element={<AuthComponent />} />
           <Route path={APP_ROUTES.AUTH_LOGIN} element={<AuthComponent />} />
           <Route path={APP_ROUTES.AUTH_SIGNUP} element={<AuthComponent />} />            

dashboard/src/actions/datasetListActions.js

@@ -0,0 +1,44 @@
+import * as TYPES from "./types";
+import API from "../utils/api";
+
+export const fetchPublicDatasets = () => async (dispatch) => {
+  try {
+    dispatch({ type: TYPES.LOADING });
+    const response = await API.get(
+      "api/v1/datasets/list?metadata=dataset.created&access=public"
+    );
+    if (response.status === 200 && response.data) {
+      dispatch({
+        type: "GET_PUBLIC_DATASETS",
+        payload: response?.data,
+      });
+    }
+    dispatch({ type: TYPES.COMPLETED });
+  } catch (error) {
+    return error;
+  }
+};
+
+export const getFavoritedDatasets = () => async (dispatch) => {
+  let fav_datasets = [];
+  let fav_datasets_text = localStorage.getItem("favorite_datasets");
+  fav_datasets = fav_datasets_text ? JSON.parse(fav_datasets_text) : [];
+  dispatch({
+    type: TYPES.FAVORITED_DATASETS,
+    payload: [...fav_datasets],
+  });
+};
+
+export const updateFavoriteRepoNames = (favorites) => async (dispatch) => {
+  dispatch({
+    type: TYPES.FAVORITED_DATASETS,
+    payload: [...favorites],
+  });
+};
+
+export const updateTblData = (data) => async (dispatch) => {
+  dispatch({
+    type: TYPES.UPDATE_PUBLIC_DATASETS,
+    payload: [...data],
+  });
+};

dashboard/src/actions/fetchPublicDatasets.js

@@ -16,3 +16,8 @@ export const SET_SIGNUP_BUTTON = "SET_SIGNUP_BUTTON";
 /* NAVBAR OPEN/CLOSE */
 export const NAVBAR_OPEN="NAVBAR_OPEN";
 export const NAVBAR_CLOSE="NAVBAR_CLOSE";
+
+/* PUBLIC DATASETS */
+export const GET_PUBLIC_DATASETS = "GET_PUBLIC_DATASETS";
+export const FAVORITED_DATASETS = "GET_FAVORITE_DATASETS";
+export const UPDATE_PUBLIC_DATASETS = "UPDATE_PUBLIC_DATASETS";

dashboard/src/actions/types.js

@@ -1,32 +1,16 @@
-import { Alert, AlertActionCloseButton } from "@patternfly/react-core";
-import { useNavigate } from "react-router-dom";
-import "./index.css";
+import { Alert } from "@patternfly/react-core";
 import React from "react";
-import { AUTH_LOGIN } from "utils/routeConstants";
 
-function LoginAlertMessage() {
-  const navigate = useNavigate();
+
+const AlertMessage = ( message ) => {
   return (
     <Alert
       className="alertNotification"
       variant="info"
       isInline
-      actionClose={
-        <AlertActionCloseButton
-          onClose={() =>
-            (document.querySelector(".alertNotification").style.display =
-              "none")
-          }
-        />
-      }
-      title={[
-        'Want to see your own data?',
-        <a className="alertHelpText" onClick={() => navigate(`/${AUTH_LOGIN}`)}>
-          Login to your account
-        </a>,
-      ]}
-    ></Alert>
+      title={ message }
+    />
   );
-}
+};
 
-export default LoginAlertMessage;
+export default AlertMessage;

dashboard/src/modules/components/AlertComponent/index.css

@@ -4,19 +4,16 @@ import React from "react";
 function PathBreadCrumb({ pathList }) {
   return (
     <Breadcrumb>
-      {pathList.map((value, index) => {
-        if (index === pathList.length - 1)
-          return (
-            <BreadcrumbItem key={index} to="#" isActive>
-              {value}
-            </BreadcrumbItem>
-          );
-        else
-          return (
-            <BreadcrumbItem key={index} to="#">
-              {value}
-            </BreadcrumbItem>
-          );
+      {pathList.map((path, index) => {
+        return (
+          <BreadcrumbItem
+            key={index}
+            to={path.link}
+            isActive={index === pathList.length - 1 ? true : false}
+          >
+            {path.name}
+          </BreadcrumbItem>
+        );
       })}
     </Breadcrumb>
   );

dashboard/src/modules/components/AlertComponent/index.jsx

@@ -6,16 +6,18 @@ import {
   isValidDate,
   Button,
 } from "@patternfly/react-core";
-import "./index.css";
+import "./index.less";
 import { filterData } from "utils/filterDataset";
-import { dateFromUTCString } from "utils/constructDate";
-import { bumpToDate } from "utils/bumpDate";
-import { getTodayMidnightUTCDate } from "utils/getMidnightUTCDate";
+import {
+  bumpToDate,
+  dateFromUTCString,
+  getTodayMidnightUTCDate,
+} from "utils/dateFunctions";
 
 function DatePickerWidget({
   dataArray,
   setPublicData,
-  controllerName,
+  datasetName,
   setDateRange,
 }) {
   const [fromDate, setFromDate] = useState({});
@@ -42,7 +44,7 @@ function DatePickerWidget({
   };
 
   const filterByDate = () => {
-    setPublicData(filterData(dataArray, fromDate, toDate, controllerName));
+    setPublicData(filterData(dataArray, fromDate, toDate, datasetName));
     setDateRange(fromDate, toDate);
   };
   return (