fix expiration validation (#252)

Replace tab view in the Settings panel with the left-handed
sidebar menu.

src/components/NameServerGroupAdd.tsx

@@ -32,6 +32,7 @@ import {
 } from "../store/nameservers/types";
 import { useGetGroupTagHelpers } from "../utils/groups";
 import { useGetTokenSilently } from "../utils/token";
+import { domainValidator } from "../utils/common";
 
 const { Paragraph, Text } = Typography;
 
@@ -272,21 +273,6 @@ const NameServerGroupAdd = () => {
     setEditDescription(status);
   };
 
-  const domainRegex =
-    /(?:[a-z0-9](?:[a-z0-9-]{0,61}[a-z0-9])?\.)+[a-z0-9][a-z0-9-]{0,61}[a-z0-9]/;
-
-  const domainValidator = (_: RuleObject, domain: string) => {
-    if (domainRegex.test(domain)) {
-      return Promise.resolve();
-    }
-    setIsPrimary(false);
-    return Promise.reject(
-      new Error(
-        "Please enter a valid domain, e.g. example.com or intra.example.com"
-      )
-    );
-  };
-
   const nameValidator = (_: RuleObject, value: string) => {
     const found = nsGroupData.find(
       (u) => u.name == value && u.id !== formNSGroup.id

src/components/NameServerGroupUpdate.tsx

@@ -30,7 +30,7 @@ import {
 import { useGetGroupTagHelpers } from "../utils/groups";
 import { useGetTokenSilently } from "../utils/token";
 import { Container } from "./Container";
-
+import { domainValidator } from "../utils/common";
 const { Paragraph, Text } = Typography;
 
 interface formNSGroup extends NameServerGroup {}
@@ -253,21 +253,6 @@ const NameServerGroupUpdate = () => {
     setEditDescription(status);
   };
 
-  const domainRegex =
-    /(?:[a-z0-9](?:[a-z0-9-]{0,61}[a-z0-9])?\.)+[a-z0-9][a-z0-9-]{0,61}[a-z0-9]/;
-
-  const domainValidator = (_: RuleObject, domain: string) => {
-    if (domainRegex.test(domain)) {
-      return Promise.resolve();
-    }
-    setIsPrimary(false);
-    return Promise.reject(
-      new Error(
-        "Please enter a valid domain, e.g. example.com or intra.example.com"
-      )
-    );
-  };
-
   const nameValidator = (_: RuleObject, value: string) => {
     const found = nsGroupData.find(
       (u) => u.name == value && u.id !== formNSGroup.id
@@ -316,38 +301,38 @@ const NameServerGroupUpdate = () => {
       <Col span={24} style={{ marginBottom: "15px" }}>
         <Form.Item name="enabled" label="">
           <div
-              style={{
-                display: "flex",
-                gap: "15px",
-              }}
+            style={{
+              display: "flex",
+              gap: "15px",
+            }}
           >
             <Switch
-                onChange={handleChangeDisabled}
-                defaultChecked={formNSGroup.enabled}
-                size="small"
-                checked={formNSGroup.enabled}
+              onChange={handleChangeDisabled}
+              defaultChecked={formNSGroup.enabled}
+              size="small"
+              checked={formNSGroup.enabled}
             />
             <div>
               <label
-                  style={{
-                    color: "rgba(0, 0, 0, 0.88)",
-                    fontSize: "14px",
-                    fontWeight: "500",
-                  }}
+                style={{
+                  color: "rgba(0, 0, 0, 0.88)",
+                  fontSize: "14px",
+                  fontWeight: "500",
+                }}
               >
                 Enabled
               </label>
               <Paragraph
-                  type={"secondary"}
-                  style={{
-                    marginTop: "-2",
-                    fontWeight: "400",
-                    marginBottom: "0",
-                  }}
+                type={"secondary"}
+                style={{
+                  marginTop: "-2",
+                  fontWeight: "400",
+                  marginBottom: "0",
+                }}
               >
                 {formNSGroup.enabled
-                    ? "Disable this server if you don't want the configuration to apply immediately"
-                    : " Enable this server if you want the configuration to apply immediately"}
+                  ? "Disable this server if you don't want the configuration to apply immediately"
+                  : " Enable this server if you want the configuration to apply immediately"}
               </Paragraph>
             </div>
           </div>

src/components/SetupKeyNew.tsx

@@ -462,6 +462,13 @@ const SetupKeyNew = () => {
                 <Form.Item
                   name="expires_in"
                   rules={[
+                    {
+                      type: "number",
+                      min: 1,
+                      max: 365,
+                      message:
+                        "The expiration should be set between 1 and 365 days",
+                    },
                     { required: true, message: "Please enter expiration date" },
                   ]}
                 >
@@ -476,7 +483,7 @@ const SetupKeyNew = () => {
                   type={"secondary"}
                   style={{ marginTop: "-18px", marginBottom: 0 }}
                 >
-                  Should be between 1 and 180 days
+                  Should be between 1 and 365 days
                 </Paragraph>
               </Col>
             </Row>

src/components/UpdatePeerGroupModal.tsx

@@ -0,0 +1,21 @@
+import React, { useEffect, useState } from "react";
+import { Modal } from "antd";
+import PeerUpdate from "./PeerUpdate";
+export const UpdatePeerGroupModal = (props:any) => {
+  return (
+    <>
+      <Modal
+        closable={false}
+        open={true}
+        footer={[]}
+        onCancel={() => props.setShowGroupModal(false)}
+        width={450}
+      >
+        <PeerUpdate
+          isGroupUpdateView={true}
+          setShowGroupModal={props.setShowGroupModal}
+        />
+      </Modal>
+    </>
+  );
+};

src/index.css

@@ -478,14 +478,35 @@ ul.ant-list-items {
   margin-bottom: 39px;
 }
 
+.delete-button {
+  cursor: auto !important;
+}
+
 .groupsSelect {
   max-width: 200px;
   width: 100%;
 }
 
 @media (max-width: 1220px) {
-  .groupsSelect{
+  .groupsSelect {
     margin-left: 0;
     margin-top: 15px;
   }
+}
+
+@media (max-width: 991px) {
+  .setting-nav {
+    flex-flow: column !important;
+  }
+
+  .setting-nav>div {
+    max-width: 100% !important;
+  }
+}
+.noborderPadding .ant-card-body {
+  padding: 0 !important;
+}
+
+.noborderPadding {
+  box-shadow: none !important;
 }

src/store/group/sagas.ts

@@ -74,13 +74,13 @@ export function* setDeleteGroup(action: ReturnType<typeof  actions.setDeleteGrou
 
 export function* deleteGroup(action: ReturnType<typeof actions.deleteGroup.request>): Generator {
   try {
-    yield call(actions.setDeleteGroup,{
+    yield put(actions.setDeleteGroup({
       loading: true,
       success: false,
       failure: false,
       error: null,
       data: null
-    } as DeleteResponse<string | null>)
+    } as DeleteResponse<string | null>))
 
     const effect = yield call(service.deleteGroup, action.payload);
     const response = effect as ApiResponse<any>;
@@ -93,8 +93,8 @@ export function* deleteGroup(action: ReturnType<typeof actions.deleteGroup.reque
       data: response.body
     } as DeleteResponse<string | null>));
 
-    const rules = (yield select(state => state.rule.data)) as Group[]
-    yield put(actions.getGroups.success(rules.filter((p:Group) => p.id !== action.payload.payload)))
+    const groups = (yield select(state => state.group.data)) as Group[]
+    yield put(actions.getGroups.success(groups.filter((p:Group) => p.id !== action.payload.payload)))
   } catch (err) {
     yield put(actions.deleteGroup.failure({
       loading: false,

src/utils/common.js

@@ -59,22 +59,22 @@ function getFormattedDate(date, preformattedDate = false, hideYear = false) {
 
     if (minutes < 10) {
         // Adding leading zero to minutes
-        minutes = `0${ minutes }`;
+        minutes = `0${minutes}`;
     }
 
     if (preformattedDate) {
         // Today
         // Yesterday
-        return `${ preformattedDate }`;
+        return `${preformattedDate}`;
     }
 
     if (hideYear) {
         // 10. January
-        return `${ day }. ${ month }`;
+        return `${day}. ${month}`;
     }
 
     // 10. January 2017.
-    return `${ day }. ${ month } ${ year }`;
+    return `${day}. ${month} ${year}`;
 }
 
 export const fullDate = (dateParam) => {
@@ -107,11 +107,11 @@ export const timeAgo = (dateParam) => {
     } else if (seconds < 5) {
         return 'just now';
     } else if (seconds < 60) {
-        return `${ seconds } seconds ago`;
+        return `${seconds} seconds ago`;
     } else if (seconds < 90) {
         return 'about a minute ago';
     } else if (minutes < 60) {
-        return `${ minutes } minutes ago`;
+        return `${minutes} minutes ago`;
     } else if (isToday) {
         return getFormattedDate(date, 'today'); // Today at 10:20
     } else if (isYesterday) {
@@ -133,4 +133,19 @@ export const isNetBirdHosted = () => {
 
 export const isLocalDev = () => {
     return window.location.hostname.includes("localhost")
-}
+}
+
+const domainRegex =
+    /^(?!.*\s)[a-zA-Z0-9](?!.*\s$)(?!.*\.$)(?:(?!-)[a-zA-Z0-9-]{1,63}(?<!-)\.){1,126}(?!-)[a-zA-Z0-9-]{1,63}(?<!-)$/;
+
+export const domainValidator = (_, domain) => {
+    if (domainRegex.test(domain)) {
+        return Promise.resolve();
+    }
+    // setIsPrimary(false);
+    return Promise.reject(
+        new Error(
+            "Please enter a valid domain, e.g. example.com or intra.example.com"
+        )
+    );
+};

src/utils/pageSize.tsx

@@ -1,25 +1,25 @@
-import { useState } from "react";
-import { storeFilterState } from "./filterState";
+import {useState} from "react";
+import {storeFilterState} from "./filterState";
 
-export const usePageSizeHelpers = () => {
-  const [pageSize, setPageSize] = useState(10);
+export const usePageSizeHelpers = (defaultSize = 10) => {
+    const [pageSize, setPageSize] = useState(defaultSize);
 
-  const onChangePageSize = (value: string, pageName: string) => {
-    setPageSize(parseInt(value.toString()));
-    storeFilterState(pageName, "pageSize", parseInt(value.toString()));
-  };
+    const onChangePageSize = (value: string, pageName: string) => {
+        setPageSize(parseInt(value.toString()));
+        storeFilterState(pageName, "pageSize", parseInt(value.toString()));
+    };
 
-  const pageSizeOptions = [
-    { label: "10", value: "10" },
-    { label: "25", value: "25" },
-    { label: "50", value: "50" },
-    { label: "100", value: "100" },
-    { label: "1000", value: "1000" },
-  ];
+    const pageSizeOptions = [
+        {label: "10", value: "10"},
+        {label: "25", value: "25"},
+        {label: "50", value: "50"},
+        {label: "100", value: "100"},
+        {label: "1000", value: "1000"},
+    ];
 
-  return {
-    onChangePageSize,
-    pageSize,
-    pageSizeOptions,
-  };
+    return {
+        onChangePageSize,
+        pageSize,
+        pageSizeOptions,
+    };
 };

src/views/Peers.tsx

@@ -50,6 +50,7 @@ import AddPeerPopup from "../components/popups/addpeer/addpeer/AddPeerPopup";
 import { getLocalItem, setLocalItem, StorageKey } from "../services/local";
 import { useOidcUser } from "@axa-fr/react-oidc";
 import { useGetGroupTagHelpers } from "../utils/groups";
+import { UpdatePeerGroupModal } from "../components/UpdatePeerGroupModal";
 
 const { Title, Paragraph, Text } = Typography;
 const { Column } = Table;
@@ -81,6 +82,7 @@ export const Peers = () => {
   const [addPeerModalOpen, setAddPeerModalOpen] = useState(false);
   const { oidcUser } = useOidcUser();
   const [isAdmin, setIsAdmin] = useState(false);
+  const [showGroupModal, setShowGroupModal] = useState(false);
 
   const [textToSearch, setTextToSearch] = useState("");
   const [groupsFilterArray, setGroupsFilterArray] = useState([]);
@@ -441,6 +443,16 @@ export const Peers = () => {
     dispatch(peerActions.setUpdateGroupsVisible(false));
   };
 
+  const setGroupVisible = (peerToAction: Peer, status: boolean) => {
+    if (status) {
+      dispatch(peerActions.setPeer({ ...peerToAction }));
+      setShowGroupModal(true);
+      return;
+    }
+    dispatch(peerActions.setPeer(null));
+    setShowGroupModal(true);
+  };
+
   const renderPopoverGroups = (
     label: string,
     groups: Group[] | string[] | null,
@@ -492,7 +504,7 @@ export const Peers = () => {
       >
         <Button
           type="link"
-          onClick={() => setUpdateGroupsVisible(peerToAction, true)}
+          onClick={() => setGroupVisible(peerToAction, true)}
         >
           {label}
         </Button>
@@ -616,7 +628,7 @@ export const Peers = () => {
 
   return (
     <>
-      {!peer && (
+      {(!peer || (peer && showGroupModal)) && (
         <>
           <Container style={{ paddingTop: "40px" }}>
             <Row>
@@ -935,7 +947,10 @@ export const Peers = () => {
           {confirmModalContextHolder}
         </>
       )}
-      {peer && <PeerUpdate />}
+      {peer && !showGroupModal && <PeerUpdate />}
+      {showGroupModal && (
+        <UpdatePeerGroupModal setShowGroupModal={setShowGroupModal} />
+      )}
     </>
   );
 };