Add a refresh button to the table views (#287)

Co-authored-by: braginini <[email protected]>

Author: saroojbkhari

src/views/AccessControl.tsx

@@ -21,6 +21,7 @@ import {
   Tooltip,
   Typography,
 } from "antd";
+import { ReloadOutlined } from "@ant-design/icons";
 import { Container } from "../components/Container";
 import { useDispatch, useSelector } from "react-redux";
 import { storeFilterState, getFilterState } from "../utils/filterState";
@@ -72,7 +73,7 @@ export const AccessControl = () => {
   const { onChangePageSize, pageSizeOptions, pageSize } = usePageSizeHelpers();
   const { getTokenSilently } = useGetTokenSilently();
   const dispatch = useDispatch();
- 
+
   const policies = useSelector((state: RootState) => state.policy.data);
   const failed = useSelector((state: RootState) => state.policy.failed);
   const loading = useSelector((state: RootState) => state.policy.loading);
@@ -84,6 +85,7 @@ export const AccessControl = () => {
   );
 
   const [showTutorial, setShowTutorial] = useState(true);
+  const [isRefreshButtonDisabled, setIsRefreshButtonDisabled] = useState(false);
   const [textToSearch, setTextToSearch] = useState("");
   const [optionAllEnable, setOptionAllEnable] = useState("all");
   const [currentPage, setCurrentPage] = useState(1);
@@ -184,6 +186,26 @@ export const AccessControl = () => {
     );
   }, []);
 
+  const fetchData = async () => {
+    setIsRefreshButtonDisabled(true);
+
+    dispatch(
+      policyActions.getPolicies.request({
+        getAccessTokenSilently: getTokenSilently,
+        payload: null,
+      })
+    );
+    dispatch(
+      groupActions.getGroups.request({
+        getAccessTokenSilently: getTokenSilently,
+        payload: null,
+      })
+    );
+    await new Promise((resolve) => setTimeout(resolve, 5000)).then(() =>
+      setIsRefreshButtonDisabled(false)
+    );
+  };
+
   useEffect(() => {
     if (failed) {
       setShowTutorial(false);
@@ -298,7 +320,11 @@ export const AccessControl = () => {
     setPolicyToAction(record as PolicyDataTable);
     confirm({
       icon: <ExclamationCircleOutlined />,
-      title: <span data-testid="confirm-delete-modal-title" className="font-500">Delete rule {record.name}</span>,
+      title: (
+        <span data-testid="confirm-delete-modal-title" className="font-500">
+          Delete rule {record.name}
+        </span>
+      ),
       width: 500,
       content: (
         <Space direction="vertical" size="small">
@@ -420,7 +446,6 @@ export const AccessControl = () => {
     );
   };
 
-
   const toggleModalGroups = (
     title: string,
     groups: Group[] | string[] | null,
@@ -643,6 +668,7 @@ export const AccessControl = () => {
                           disabled={showTutorial}
                         />
                         <Select
+                          style={{ marginRight: "10px" }}
                           value={pageSize.toString()}
                           options={pageSizeOptions}
                           onChange={(value) => {
@@ -652,6 +678,22 @@ export const AccessControl = () => {
                           disabled={showTutorial}
                         />
                       </Space>
+
+                      <Tooltip
+                        title={
+                          isRefreshButtonDisabled
+                            ? "You can refresh it again in 5 seconds"
+                            : "Refresh"
+                        }
+                      >
+                        <Button
+                          onClick={fetchData}
+                          disabled={isRefreshButtonDisabled}
+                          style={{ marginLeft: "5px", color: "#1890ff" }}
+                        >
+                          <ReloadOutlined />
+                        </Button>
+                      </Tooltip>
                     </Col>
                     {!showTutorial && (
                       <Col

src/views/Activity.tsx

@@ -14,6 +14,7 @@ import {
   Space,
   Table,
   Typography,
+  Tooltip,
 } from "antd";
 import { Event } from "../store/event/types";
 import { filter } from "lodash";
@@ -23,7 +24,7 @@ import { useOidcUser } from "@axa-fr/react-oidc";
 import { capitalize, formatDateTime } from "../utils/common";
 import { User } from "../store/user/types";
 import { usePageSizeHelpers } from "../utils/pageSize";
-import { QuestionCircleFilled } from "@ant-design/icons";
+import { ReloadOutlined } from "@ant-design/icons";
 import { storeFilterState, getFilterState } from "../utils/filterState";
 
 const { Title, Paragraph, Text } = Typography;
@@ -44,6 +45,7 @@ export const Activity = () => {
   const setupKeys = useSelector((state: RootState) => state.setupKey.data);
 
   const [textToSearch, setTextToSearch] = useState("");
+  const [isRefreshButtonDisabled, setIsRefreshButtonDisabled] = useState(false);
   const [dataTable, setDataTable] = useState([] as EventDataTable[]);
 
   const transformDataTable = (d: Event[]): EventDataTable[] => {
@@ -58,6 +60,21 @@ export const Activity = () => {
       })
     );
   }, []);
+
+  const fetchData = async() => {
+    setIsRefreshButtonDisabled(true);
+
+    dispatch(
+      eventActions.getEvents.request({
+        getAccessTokenSilently: getTokenSilently,
+        payload: null,
+      })
+    );
+
+    await new Promise((resolve) => setTimeout(resolve, 5000)).then(() =>
+      setIsRefreshButtonDisabled(false)
+    );
+  };
   // useEffect(() => {
   //   setDataTable(transformDataTable(events));
   // }, [events]);
@@ -427,6 +444,7 @@ export const Activity = () => {
                 <Col xs={24} sm={24} md={11} lg={11} xl={11} xxl={11} span={11}>
                   <Space size="middle">
                     <Select
+                      style={{ marginRight: "10px" }}
                       value={pageSize.toString()}
                       options={pageSizeOptions}
                       onChange={(value) => {
@@ -435,6 +453,22 @@ export const Activity = () => {
                       className="select-rows-per-page-en"
                     />
                   </Space>
+
+                  <Tooltip
+                    title={
+                      isRefreshButtonDisabled
+                        ? "You can refresh it again in 5 seconds"
+                        : "Refresh"
+                    }
+                  >
+                    <Button
+                      onClick={fetchData}
+                      disabled={isRefreshButtonDisabled}
+                      style={{ marginLeft: "5px", color: "#1890ff" }}
+                    >
+                      <ReloadOutlined />
+                    </Button>
+                  </Tooltip>
                 </Col>
               </Row>
               {failed && (

src/views/Nameservers.tsx

@@ -2,7 +2,6 @@ import React, { useEffect, useState } from "react";
 import { useDispatch, useSelector } from "react-redux";
 import { RootState } from "typesafe-actions";
 import { actions as nsGroupActions } from "../store/nameservers";
-import { Container } from "../components/Container";
 import {
   Alert,
   Button,
@@ -21,8 +20,10 @@ import {
   Table,
   Tag,
   Typography,
+  Tooltip,
 } from "antd";
 import { filter } from "lodash";
+import { ReloadOutlined } from "@ant-design/icons";
 import tableSpin from "../components/Spin";
 import { storeFilterState, getFilterState } from "../utils/filterState";
 import { useGetTokenSilently } from "../utils/token";
@@ -77,6 +78,7 @@ export const Nameservers = () => {
   );
 
   const [textToSearch, setTextToSearch] = useState("");
+  const [isRefreshButtonDisabled, setIsRefreshButtonDisabled] = useState(false);
   const [optionAllEnable, setOptionAllEnable] = useState("all");
   const [dataTable, setDataTable] = useState([] as NameserverGroupDataTable[]);
   const [showTutorial, setShowTutorial] = useState(false);
@@ -192,6 +194,26 @@ export const Nameservers = () => {
     );
   }, []);
 
+  const fetchData = async () => {
+    setIsRefreshButtonDisabled(true);
+
+    dispatch(
+      nsGroupActions.getNameServerGroups.request({
+        getAccessTokenSilently: getTokenSilently,
+        payload: null,
+      })
+    );
+    dispatch(
+      groupActions.getGroups.request({
+        getAccessTokenSilently: getTokenSilently,
+        payload: null,
+      })
+    );
+    await new Promise((resolve) => setTimeout(resolve, 5000)).then(() =>
+      setIsRefreshButtonDisabled(false)
+    );
+  };
+
   const onChangeAllEnabled = ({ target: { value } }: RadioChangeEvent) => {
     setOptionAllEnable(value);
     storeFilterState("nameServerFilter", "quickFilter", value);
@@ -554,6 +576,22 @@ export const Nameservers = () => {
                   className="select-rows-per-page-en"
                   disabled={showTutorial}
                 />
+
+                <Tooltip
+                  title={
+                    isRefreshButtonDisabled
+                      ? "You can refresh it again in 5 seconds"
+                      : "Refresh"
+                  }
+                >
+                  <Button
+                    onClick={fetchData}
+                    disabled={isRefreshButtonDisabled}
+                    style={{ color: "#1890ff" }}
+                  >
+                    <ReloadOutlined />
+                  </Button>
+                </Tooltip>
               </Space>
             </Col>
             <Col xs={24} sm={24} md={5} lg={5} xl={5} xxl={5} span={5}>

src/views/Peers.tsx

@@ -94,6 +94,7 @@ export const Peers = () => {
   const [groupPopupVisible, setGroupPopupVisible] = useState("");
   const [showTutorial, setShowTutorial] = useState(false);
   const [hadFirstRun, setHadFirstRun] = useState(true);
+  const [isRefreshButtonDisabled, setIsRefreshButtonDisabled] = useState(false);
   const [confirmModal, confirmModalContextHolder] = Modal.useModal();
 
   const optionsOnOff = [
@@ -182,6 +183,33 @@ export const Peers = () => {
       );
   };
 
+  const fetchData = async () => {
+    setIsRefreshButtonDisabled(true);
+
+    dispatch(
+      userActions.getUsers.request({
+        getAccessTokenSilently: getTokenSilently,
+        payload: null,
+      })
+    );
+    dispatch(
+      peerActions.getPeers.request({
+        getAccessTokenSilently: getTokenSilently,
+        payload: null,
+      })
+    );
+    dispatch(
+      groupActions.getGroups.request({
+        getAccessTokenSilently: getTokenSilently,
+        payload: null,
+      })
+    );
+
+    await new Promise((resolve) => setTimeout(resolve, 5000)).then(() =>
+      setIsRefreshButtonDisabled(false)
+    );
+  };
+
   useEffect(() => {
     getLocalItem<boolean>(StorageKey.hadFirstRun).then((f) =>
       setHadFirstRun(f === null ? false : f)
@@ -694,7 +722,7 @@ export const Peers = () => {
                       {isAdmin && (
                         <Select
                           mode="tags"
-                          style={{ marginRight: "15px" }}
+                          style={{ marginRight: "10px" }}
                           placeholder="Filter by groups"
                           tagRender={blueTagRender}
                           // dropdownRender={dropDownRender}
@@ -715,10 +743,17 @@ export const Peers = () => {
                         </Select>
                       )}
 
-                      <Tooltip title="Refersh">
+                      <Tooltip
+                        title={
+                          isRefreshButtonDisabled
+                            ? "You can refresh it again in 5 seconds"
+                            : "Refresh"
+                        }
+                      >
                         <Button
-                          onClick={refresh}
-                          style={{color: "#1890ff" }}
+                          onClick={fetchData}
+                          disabled={isRefreshButtonDisabled}
+                          style={{ marginLeft: "5px", color: "#1890ff" }}
                         >
                           <ReloadOutlined />
                         </Button>