From 0a51fefc555d275d0f9a0805c69149383d97581c Mon Sep 17 00:00:00 2001
From: Bonymol Baby <88372115+Bonymol-aot@users.noreply.github.com>
Date: Fri, 17 Nov 2023 03:25:40 -0800
Subject: [PATCH] Dashboard issues fixed (#1740)

* Dashboard fixes

* Update Dashboard.js
---
 .../components/Dashboard/CardFormCounter.js   |   2 +-
 .../src/components/Dashboard/Dashboard.js     |   7 +-
 .../src/components/Insights/Insights.js       | 153 +++++++++---------
 3 files changed, 83 insertions(+), 79 deletions(-)
diff --git a/forms-flow-web/src/components/Dashboard/CardFormCounter.js b/forms-flow-web/src/components/Dashboard/CardFormCounter.js
index b1027ee68c..88404128af 100644
--- a/forms-flow-web/src/components/Dashboard/CardFormCounter.js
+++ b/forms-flow-web/src/components/Dashboard/CardFormCounter.js
@@ -32,7 +32,7 @@ const CardFormCounter = React.memo((props) => {
                 </Tooltip>
                 )}
               >
-                <span className="form-title">{formName}</span>
+                <span className="form-title text-truncate">{formName}</span>
               </OverlayTrigger>
             </div>
             <div>
diff --git a/forms-flow-web/src/components/Dashboard/Dashboard.js b/forms-flow-web/src/components/Dashboard/Dashboard.js
index 689fbab0cf..aa52986eea 100644
--- a/forms-flow-web/src/components/Dashboard/Dashboard.js
+++ b/forms-flow-web/src/components/Dashboard/Dashboard.js
@@ -14,7 +14,7 @@ import Loading from "../../containers/Loading";
 import LoadError from "../Error";
 import DateRangePicker from "@wojtekmaj/react-daterange-picker";
 import moment from "moment";
-import { Translation, useTranslation } from "react-i18next";
+import { useTranslation } from "react-i18next";
 import {
   setMetricsDateRangeLoading,
   setMetricsSubmissionLimitChange,
@@ -257,11 +257,12 @@ const Dashboard = React.memo(() => {
             </div>
 
             <div className="d-flex justify-content-end align-items-center col-12 col-md-4 px-0">
-              <div className="input-group mr-4">
+              <div className="input-group mr-2">
                 <FormControl
                   as="select"
                   onChange={(e) => onChangeInput(e.target.value)}
                   className="form-control"
+                  style={{ padding: ".375rem .3rem" }}
                   title={t("Choose any")}
                   aria-label="Select date type"
                 >
@@ -269,7 +270,7 @@ const Dashboard = React.memo(() => {
                   <option value="modified">{t("Modified Date")}</option>
                 </FormControl>
               </div>
-              <DateRangePicker className = "bg-white"
+              <DateRangePicker className = "bg-white mr-2"
                 onChange={onSetDateRange}
                 value={dateRange}
                 dayPlaceholder="dd"
diff --git a/forms-flow-web/src/components/Insights/Insights.js b/forms-flow-web/src/components/Insights/Insights.js
index 13a741b5ba..cf3e57a61f 100644
--- a/forms-flow-web/src/components/Insights/Insights.js
+++ b/forms-flow-web/src/components/Insights/Insights.js
@@ -1,5 +1,5 @@
 import React, { useEffect, useState } from "react";
-import { connect, useSelector,useDispatch } from "react-redux";
+import { connect, useSelector, useDispatch } from "react-redux";
 import Select from "react-select";
 import NoData from "./nodashboard";
 import { Route, Redirect } from "react-router";
@@ -91,84 +91,87 @@ const Insights = React.memo((props) => {
 
   return (
     <>
-       
-        <div className="mb-2">
-        
-            
-              <Head items={headerList()} page="Insights"/>
-           
-              
-                <div className="d-flex align-items-center flex-md-row flex-colum justify-content-between mt-3"
-                  data-testid="Insight"
-                  role="main"
-                >
-                  <h3 className="insight-title" data-testid="Dashboard">
-                    <i className="fa fa-bars mr-2" />{" "}
-                    <Translation>{(t) => t("Dashboard")}</Translation>
-                  </h3>
-
-                  <div className="col-6 col-md-3 mb-2">
-                    {options.length > 0 && (
-                      <Select
-                      
-                        aria-label="Select Dashboard"
-                        options={options}
-                        onChange={setDashboardSelected}
-                        placeholder={t("Select Dashboard")}
-                        value={options.find(
-                          (element) => element.value == activeDashboard.id
-                        )}
-                      />
-                    )}
-                  </div>
-                </div>
-             
-         
-            <LoadingOverlay
-              active={
-                !(isDashboardListUpdated || isDashboardDetailUpdated) && !error
-              }
-              styles={{
-                overlay: (base) => ({
-                  ...base,
-                  background: "rgba(255, 255, 255)",
-                }),
-              }}
-              className="col-12"
-            >
-              {options.length > 0 ? (
-                activeDashboard.public_url ? (
-                  <iframe
-                    title="dashboard"
-                    style={{
-                      width: "100%",
-                      height: "auto",
-                      overflow: "visible",
-                      border: "none",
-                      minHeight: "60vh",
-                    }}
-                    src={activeDashboard.public_url}
-                  />
-                ) : !isDashboardDetailUpdated ? (
-                  <div 
-                  style={{
+
+      <div className="mb-2">
+
+
+        <Head items={headerList()} page="Insights"/>
+
+
+        <div className="d-flex align-items-center flex-md-row flex-colum justify-content-between mt-3"
+          data-testid="Insight"
+          role="main"
+        >
+          <h3 className="insight-title" data-testid="Dashboard">
+            <i className="fa fa-bars mr-2" />{" "}
+            <Translation>{(t) => t("Dashboard")}</Translation>
+          </h3>
+
+          <div className="col-6 col-md-3 mb-2">
+            {options.length > 0 && (
+              <Select
+
+                aria-label="Select Dashboard"
+                options={options}
+                onChange={setDashboardSelected}
+                placeholder={t("Select Dashboard")}
+                value={options.find(
+                  (element) => element.value == activeDashboard.id
+                )}
+              />
+            )}
+          </div>
+        </div>
+
+        {options.length > 0 ? (
+          <LoadingOverlay
+            active={
+              !(isDashboardListUpdated || isDashboardDetailUpdated) && !error
+            }
+            styles={{
+              overlay: (base) => ({
+                ...base,
+                background: "rgba(255, 255, 255)",
+              }),
+            }}
+            className="col-12"
+          >
+
+            {activeDashboard.public_url ? (
+              <iframe
+                title="dashboard"
+                style={{
+                  width: "100%",
+                  height: "auto",
+                  overflow: "visible",
+                  border: "none",
+                  minHeight: "60vh",
+                }}
+                src={activeDashboard.public_url}
+              />
+            ) : !isDashboardDetailUpdated ? (
+              <div
+                style={{
                   position:'absolute',
                   left: '52%',
                   marginTop: '400px',
                   transform: 'translate(-50%, -90%)',
-                  }}>
-                    <Loading />
-                  </div>
-                  ) : (
-                  <NoPublicUrlMessage />
-                )
-              ) : (
-                <NoData />
-              )}
-            </LoadingOverlay>
-           
-        </div>
-      
+                }}>
+                <Loading />
+              </div>
+            ) : (
+              <NoPublicUrlMessage />
+            )
+            }
+          </LoadingOverlay>
+        )
+          : (
+            <NoData />
+          )}
+
+
+      </div>
+
       <Route path={`${BASE_ROUTE}insights/:notAvailable`}>
         <Redirect exact to="/404" />
       </Route>
