Adjust DNS view

* fix initial value for setup keys so default works

* fix initial value for setup keys so default works

src/components/AccessControlNew.tsx

@@ -29,7 +29,7 @@ import { uniq } from "lodash";
 import { Header } from "antd/es/layout/layout";
 import { RuleObject } from "antd/lib/form";
 import { useGetTokenSilently } from "../utils/token";
-import {useGetGroupTagHelpers} from "../utils/groups";
+import { useGetGroupTagHelpers } from "../utils/groups";
 
 const { Paragraph } = Typography;
 const { Option } = Select;
@@ -50,11 +50,8 @@ interface FormPolicy {
 }
 
 const AccessControlNew = () => {
-  const {
-    optionRender,
-      grayTagRender,
-      blueTagRender
-  } = useGetGroupTagHelpers()
+  const { optionRender, grayTagRender, blueTagRender } =
+    useGetGroupTagHelpers();
   const { getTokenSilently } = useGetTokenSilently();
   const dispatch = useDispatch();
   const setupNewPolicyVisible = useSelector(
@@ -71,6 +68,8 @@ const AccessControlNew = () => {
     { label: "UDP", value: "udp" },
     { label: "ICMP", value: "icmp" },
   ];
+  const formPolicyCopy: any = ["ALL"];
+
   const policy = useSelector((state: RootState) => state.policy.policy);
   const savedPolicy = useSelector(
     (state: RootState) => state.policy.savedPolicy
@@ -274,9 +273,7 @@ const AccessControlNew = () => {
       <Divider style={{ margin: "8px 0" }} />
       <Row style={{ padding: "0 8px 4px" }}>
         <Col flex="auto">
-          <Text type={"secondary"}>
-            Add new ports by pressing "Enter"
-          </Text>
+          <Text type={"secondary"}>Add new ports by pressing "Enter"</Text>
         </Col>
         <Col flex="none">
           <svg
@@ -459,19 +456,21 @@ const AccessControlNew = () => {
                       textAlign: "start",
                       whiteSpace: "pre-line",
                       fontSize: "18px",
-                      margin: "0px",
-                      fontWeight:"500"
+                      fontWeight: "500",
                     }}
                   >
-                    Create Rule
+                    Create rule
                   </Paragraph>
                   <Paragraph
-                      type={"secondary"}
-                      style={{
-                        textAlign: "start",
-                        whiteSpace: "pre-line",
-                        paddingBottom: "15px",
-                      }}
+                    type={"secondary"}
+                    style={{
+                      textAlign: "start",
+                      whiteSpace: "pre-line",
+                      marginTop: "-20px",
+                      fontSize: "14px",
+                      paddingBottom: "25px",
+                      marginBottom: "4px",
+                    }}
                   >
                     Use this rule to restrict access to groups of resources
                   </Paragraph>
@@ -727,10 +726,11 @@ const AccessControlNew = () => {
               </Col>
               <Col span={24}>
                 <Paragraph
-                    type={"secondary"}
-                    style={{  marginTop: "-15px", marginBottom: "30px" }}
+                  type={"secondary"}
+                  style={{ marginTop: "-15px", marginBottom: "30px" }}
                 >
-                  To change traffic direction and ports, select TCP or UDP protocol below
+                  To change traffic direction and ports, select TCP or UDP
+                  protocol below
                 </Paragraph>
               </Col>
               <Col span={24}>
@@ -769,6 +769,8 @@ const AccessControlNew = () => {
                       color: "rgba(0, 0, 0, 0.88)",
                       fontSize: "14px",
                       fontWeight: "500",
+                      padding: "0 0 2px",
+                      display: "inline-block",
                     }}
                   >
                     Ports
@@ -784,50 +786,80 @@ const AccessControlNew = () => {
                     Allow network traffic and access only to specified ports
                   </Paragraph>
                 </div>
-                <Form.Item
-                  name="ports"
-                  label=""
-                  style={{ fontWeight: "500" }}
-                  rules={[
-                    {
-                      message: "Directional traffic requires at least one port",
-                      validator: selectPortProtocolValidator,
-                      required: false,
-                    },
-                    {
-                      message: "Port value must be in 1..65535 range",
-                      validator: selectPortRangeValidator,
-                      required: false,
-                    },
-                  ]}
-                >
-                  <Select
-                    mode="tags"
-                    style={{
-                      width: "100%",
-                      maxWidth: "280px",
-                      fontWeight: "500",
-                    }}
-                    className="menlo-font"
-                    placeholder={ (formPolicy.protocol === "all" || formPolicy.protocol === "icmp") ? "Change protocol to add ports" : "Add ports"}
-                    tagRender={grayTagRender}
-                    onChange={handleChangePorts}
-                    dropdownRender={dropDownRenderPorts}
-                    disabled={
-                      formPolicy.protocol === "all" ||
-                      formPolicy.protocol === "icmp"
-                    }
+
+                {formPolicy.protocol === "all" ||
+                formPolicy.protocol === "icmp" ? (
+                  <Form.Item>
+                    <Select
+                      mode="tags"
+                      style={{
+                        width: "100%",
+                        maxWidth: "260px",
+                        fontWeight: "500",
+                      }}
+                      placeholder={<Text>Select ports</Text>}
+                      className="menlo-font"
+                      value={formPolicyCopy}
+                      disabled={true}
+                    ></Select>
+                  </Form.Item>
+                ) : (
+                  <Form.Item
+                    name="ports"
+                    label=""
+                    style={{ fontWeight: "500" }}
+                    rules={[
+                      {
+                        message:
+                          "Directional traffic requires at least one port",
+                        validator: selectPortProtocolValidator,
+                        required: false,
+                      },
+                      {
+                        message: "Port value must be in 1..65535 range",
+                        validator: selectPortRangeValidator,
+                        required: false,
+                      },
+                    ]}
                   >
-                    {formPolicy &&
-                      formPolicy.ports?.map((m) => (
-                        <Option key={m}>
-                          <Tag style={{ marginRight: 3 }}>
-                            {m}
-                          </Tag>
-                        </Option>
-                      ))}
-                  </Select>
-                </Form.Item>
+                    <Select
+                      mode="tags"
+                      style={{
+                        width: "100%",
+                        maxWidth: "280px",
+                        fontWeight: "500",
+                      }}
+                      className="menlo-font"
+                      placeholder={
+                        formPolicy.protocol === "all" ||
+                        formPolicy.protocol === "icmp" ? (
+                          "All"
+                        ) : (
+                          <div
+                            color={"rgba(0,0,0,0.25)"}
+                            className="arimo-font"
+                          >
+                            Select ports
+                          </div>
+                        )
+                      }
+                      tagRender={grayTagRender}
+                      onChange={handleChangePorts}
+                      dropdownRender={dropDownRenderPorts}
+                      disabled={
+                        formPolicy.protocol === "all" ||
+                        formPolicy.protocol === "icmp"
+                      }
+                    >
+                      {formPolicy &&
+                        formPolicy.ports?.map((m) => (
+                          <Option key={m}>
+                            <Tag style={{ marginRight: 3 }}>{m}</Tag>
+                          </Option>
+                        ))}
+                    </Select>
+                  </Form.Item>
+                )}
               </Col>
               <Col span={24}>
                 <Form.Item name="enabled" label="">
@@ -838,6 +870,7 @@ const AccessControlNew = () => {
                     }}
                   >
                     <Switch
+                      size="small"
                       onChange={handleChangeDisabled}
                       defaultChecked={true}
                     />
@@ -869,7 +902,7 @@ const AccessControlNew = () => {
               </Col>
               <Col
                 span={24}
-                style={{ marginTop: "20px", marginBottom: "25px" }}
+                style={{ marginTop: "10px", marginBottom: "24px" }}
               >
                 <Text type={"secondary"}>
                   Learn more about
@@ -879,7 +912,7 @@ const AccessControlNew = () => {
                     href="https://docs.netbird.io/how-to/manage-network-access"
                   >
                     {" "}
-                    Access Controls
+                    access controls
                   </a>
                 </Text>
               </Col>

src/components/FooterComponent.tsx

@@ -6,7 +6,7 @@ const { Footer } = Layout
 export default () => {
   return (
       <Footer style={{ textAlign: 'center',  bottom: "0"}}>
-          Copyright © 2022 <a href="https://netbird.io">NetBird Authors</a>
+          Copyright © 2023 <a href="https://netbird.io">NetBird Authors</a>
       </Footer>
   );
-};
+};

src/components/PeerUpdate.tsx

@@ -366,7 +366,6 @@ const PeerUpdate = () => {
       noUpdateToName() &&
       noUpdateToLoginExpiration()
     ) {
-      console.log("no group update==<");
       const style = { marginTop: 85 };
       if (savedGroups.loading) {
         message.loading({
@@ -863,15 +862,26 @@ const PeerUpdate = () => {
                   </Form.Item>
                 </Col>
                 <Col span={8}>
+                  <Paragraph
+                      style={{
+                        whiteSpace: "pre-line",
+                        margin: 0,
+                        fontWeight: "500",
+                      }}
+                  >
+                    Groups
+                  </Paragraph>
+                  <Text type={"secondary"}>
+                    Use groups to control what this peer can access
+                  </Text>
                   <Form.Item
                     name="groupsNames"
-                    label="Select peer groups"
                     rules={[{ validator: selectValidator }]}
                     style={{ fontWeight: "500" }}
                   >
                     <Select
                       mode="tags"
-                      style={{ width: "100%" }}
+                      style={{ width: "100%", marginTop: 5 }}
                       placeholder="Select groups..."
                       tagRender={tagRender}
                       dropdownRender={dropDownRender}

src/components/RouteAddNew.tsx

@@ -426,7 +426,7 @@ const RouteAddNew = (selectedPeer: any) => {
                 disabled={savedRoute.loading}
                 onClick={handleFormSubmit}
               >
-                Add Route
+                Add route
               </Button>
             </Space>
           }
@@ -455,7 +455,7 @@ const RouteAddNew = (selectedPeer: any) => {
                       marginBottom: "25px",
                     }}
                   >
-                    Add Route
+                    Add route
                   </Paragraph>
 
                   {!!selectedPeer.selectedPeer && (
@@ -887,7 +887,7 @@ const RouteAddNew = (selectedPeer: any) => {
               </Col>
               <Col
                 span={24}
-                style={{ marginTop: "20px", marginBottom: "25px" }}
+                style={{ marginTop: "24px", marginBottom: "12px" }}
               >
                 <Text type={"secondary"}>
                   Learn more about
@@ -897,7 +897,7 @@ const RouteAddNew = (selectedPeer: any) => {
                     href="https://docs.netbird.io/how-to/routing-traffic-to-private-networks"
                   >
                     {" "}
-                    Network Routes
+                    network routes
                   </a>
                 </Text>
               </Col>

src/components/RoutePeerUpdate.tsx

@@ -234,7 +234,6 @@ const RoutePeerUpdate = () => {
           style: styleNotification,
         });
       } else if (savedRoute.success) {
-        console.log("savedRoute", savedRoute);
         message.success({
           content: "Route has been successfully updated.",
           key: saveKey,
@@ -292,7 +291,7 @@ const RoutePeerUpdate = () => {
               requiredMark={false}
               onValuesChange={onChange}
               style={{ width: "100%", maxWidth: "600px" }}
-              className="route-form"
+              className="route-form  edit-form-wrapper"
             >
               <Row gutter={16}>
                 <Col span={24}>

src/components/RouteUpdate.tsx

@@ -259,7 +259,6 @@ const RouteAddNew = () => {
         style: styleNotification,
       });
     } else if (savedRoute.success) {
-      console.log("savedRoute", savedRoute);
       message.success({
         content: "Route has been successfully added.",
         key: saveKey,
@@ -311,7 +310,7 @@ const RouteAddNew = () => {
                 disabled={savedRoute.loading}
                 onClick={handleFormSubmit}
               >
-                Add Route
+                Add route
               </Button>
             </Space>
           }
@@ -335,9 +334,7 @@ const RouteAddNew = () => {
                       textAlign: "start",
                       whiteSpace: "pre-line",
                       fontSize: "18px",
-                      margin: "0px",
                       fontWeight: 500,
-                      marginBottom: "0",
                     }}
                   >
                     Add new routing peer
@@ -345,9 +342,12 @@ const RouteAddNew = () => {
                   <Paragraph
                     type={"secondary"}
                     style={{
-                      marginTop: "-2",
-                      fontWeight: "400",
-                      marginBottom: "25px",
+                      textAlign: "start",
+                      whiteSpace: "pre-line",
+                      marginTop: "-23px",
+                      fontSize: "14px",
+                      paddingBottom: "25px",
+                      marginBottom: "4px",
                     }}
                   >
                     When you add multiple routing peers, NetBird enables high

src/components/SetupKeyEdit.tsx

@@ -27,7 +27,6 @@ import { RuleObject } from "antd/lib/form";
 import { CustomTagProps } from "rc-select/lib/BaseSelect";
 import { Group } from "../store/group/types";
 import { useGetTokenSilently } from "../utils/token";
-import { expiresInToSeconds, ExpiresInValue } from "../views/ExpiresInInput";
 import moment from "moment";
 import { Container } from "./Container";
 import Paragraph from "antd/es/typography/Paragraph";
@@ -37,7 +36,6 @@ import { useGetGroupTagHelpers } from "../utils/groups";
 
 const { Option } = Select;
 const { Text } = Typography;
-const ExpiresInDefault: ExpiresInValue = { number: 30, interval: "day" };
 
 const customExpiresFormat = (value: Date): string | null => {
   return formatDate(value);
@@ -95,7 +93,6 @@ const SetupKeyNew = () => {
     const fSetupKey = {
       ...setupKey,
       autoGroupNames: setupKey.auto_groups ? formKeyGroups : [],
-      expiresInFormatted: ExpiresInDefault,
       exp: moment(setupKey.expires),
       last: moment(setupKey.last_used),
     } as FormSetupKey;
@@ -115,7 +112,7 @@ const SetupKeyNew = () => {
       (s) => !allGroupsNames.includes(s)
     );
 
-    const expiresIn = expiresInToSeconds(formSetupKey.expiresInFormatted);
+    const expiresIn = formSetupKey.expires_in * 24 * 3600 // the api expects seconds while the form returns days
     return {
       id: formSetupKey.id,
       name: formSetupKey.name,
@@ -278,7 +275,13 @@ const SetupKeyNew = () => {
       />
       <Card bordered={true} style={{ marginBottom: "7px", border: "none" }}>
         <div style={{ maxWidth: "800px" }}>
-          <h3 style={{ fontSize: "22px", fontWeight: "500",marginBottom:"30px" }}>
+          <h3
+            style={{
+              fontSize: "22px",
+              fontWeight: "500",
+              marginBottom: "30px",
+            }}
+          >
             {setupKey.name}
           </h3>
           <Form
@@ -287,7 +290,6 @@ const SetupKeyNew = () => {
             form={form}
             onValuesChange={onChange}
             initialValues={{
-              expiresIn: ExpiresInDefault,
               usage_limit: 1,
             }}
           >
@@ -365,7 +367,7 @@ const SetupKeyNew = () => {
               </Col>
             </Row>
 
-            <Row style={{ marginTop: "30px" }}>
+            <Row style={{ marginTop: "39px" }}>
               <Col
                 xs={24}
                 sm={24}
@@ -423,20 +425,6 @@ const SetupKeyNew = () => {
                 </Row>
               </Col>
             </Row>
-
-            <Row style={{ marginTop: "40px", marginBottom: "28px" }}>
-              <Text type={"secondary"}>
-                Learn more about
-                <a
-                  target="_blank"
-                  rel="noreferrer"
-                  href="https://docs.netbird.io/how-to/register-machines-using-setup-keys"
-                >
-                  {" "}
-                  Setup Keys
-                </a>
-              </Text>
-            </Row>
           </Form>
         </div>
         <Container
@@ -446,6 +434,7 @@ const SetupKeyNew = () => {
             justifyContent: "start",
             padding: 0,
             gap: "10px",
+            marginTop: "24px",
           }}
           key={0}
         >

src/components/SetupKeyNew.tsx

@@ -26,22 +26,18 @@ import { RuleObject } from "antd/lib/form";
 import { CustomTagProps } from "rc-select/lib/BaseSelect";
 import { Group } from "../store/group/types";
 import { useGetTokenSilently } from "../utils/token";
-import { expiresInToSeconds, ExpiresInValue } from "../views/ExpiresInInput";
 import moment from "moment";
 import { Container } from "./Container";
 import Paragraph from "antd/es/typography/Paragraph";
 import { CheckOutlined, CopyOutlined } from "@ant-design/icons";
 import { copyToClipboard } from "../utils/common";
-import {useGetGroupTagHelpers} from "../utils/groups";
+import { useGetGroupTagHelpers } from "../utils/groups";
 
 const { Option } = Select;
 const { Text } = Typography;
-const ExpiresInDefault: ExpiresInValue = { number: 30, interval: "day" };
 
 const SetupKeyNew = () => {
-  const {
-    optionRender,
-  } = useGetGroupTagHelpers()
+  const { optionRender, blueTagRender } = useGetGroupTagHelpers();
   const { getTokenSilently } = useGetTokenSilently();
   const dispatch = useDispatch();
   const setupNewKeyVisible = useSelector(
@@ -90,7 +86,6 @@ const SetupKeyNew = () => {
     const fSetupKey = {
       ...setupKey,
       autoGroupNames: setupKey.auto_groups ? formKeyGroups : [],
-      expiresInFormatted: ExpiresInDefault,
       exp: moment(setupKey.expires),
       last: moment(setupKey.last_used),
     } as FormSetupKey;
@@ -110,7 +105,7 @@ const SetupKeyNew = () => {
       (s) => !allGroupsNames.includes(s)
     );
 
-    const expiresIn = expiresInToSeconds(formSetupKey.expiresInFormatted);
+    const expiresIn = formSetupKey.expires_in * 24 * 3600; // the api expects seconds we have days
     return {
       id: formSetupKey.id,
       name: formSetupKey.name,
@@ -227,26 +222,6 @@ const SetupKeyNew = () => {
     return Promise.resolve();
   };
 
-  const tagRender = (props: CustomTagProps) => {
-    const { value, closable, onClose } = props;
-    const onPreventMouseDown = (event: React.MouseEvent<HTMLSpanElement>) => {
-      event.preventDefault();
-      event.stopPropagation();
-    };
-
-    return (
-      <Tag
-        color="blue"
-        onMouseDown={onPreventMouseDown}
-        closable={closable}
-        onClose={onClose}
-        style={{ marginRight: 3 }}
-      >
-        <strong>{value}</strong>
-      </Tag>
-    );
-  };
-
   const dropDownRender = (menu: React.ReactElement) => (
     <>
       {menu}
@@ -370,8 +345,7 @@ const SetupKeyNew = () => {
             textAlign: "start",
             whiteSpace: "pre-line",
             fontSize: "18px",
-            margin: "0px",
-            fontWeight:"500"
+            fontWeight: "500",
           }}
         >
           {showPlainToken
@@ -383,6 +357,10 @@ const SetupKeyNew = () => {
           style={{
             textAlign: "start",
             whiteSpace: "pre-line",
+            marginTop: "-20px",
+            fontSize: "14px",
+            paddingBottom: "25px",
+            marginBottom: "4px",
           }}
         >
           {showPlainToken
@@ -396,7 +374,6 @@ const SetupKeyNew = () => {
             form={form}
             onValuesChange={onChange}
             initialValues={{
-              expiresIn: ExpiresInDefault,
               usage_limit: 1,
             }}
           >
@@ -424,7 +401,7 @@ const SetupKeyNew = () => {
               </Col>
             </Row>
 
-            <Row style={{ marginTop: "20px" }} justify={"space-between"}>
+            <Row style={{ marginTop: "24px" }} justify={"space-between"}>
               <Col span={18}>
                 <Paragraph
                   style={{
@@ -446,6 +423,7 @@ const SetupKeyNew = () => {
                 <Row justify={"end"}>
                   <Form.Item name="reusable" valuePropName="checked">
                     <Switch
+                      size="small"
                       onChange={(checked) => {
                         setFormSetupKey({
                           ...formSetupKey,
@@ -458,7 +436,7 @@ const SetupKeyNew = () => {
               </Col>
             </Row>
 
-            <Row style={{ marginTop: "10px" }}>
+            <Row style={{ marginTop: "16px" }}>
               <Col span={24}>
                 <Paragraph
                   style={{
@@ -496,7 +474,7 @@ const SetupKeyNew = () => {
               </Col>
             </Row>
 
-            <Row style={{ marginTop: "20px" }}>
+            <Row style={{ marginTop: "24px" }}>
               <Col span={24}>
                 <Paragraph
                   style={{
@@ -510,13 +488,12 @@ const SetupKeyNew = () => {
               </Col>
               <Col>
                 <Form.Item
-                  name="expiresIn"
+                  name="expires_in"
                   rules={[
                     { required: true, message: "Please enter expiration date" },
                   ]}
                 >
                   <InputNumber
-                    defaultValue={7}
                     placeholder={`2`}
                     type="number"
                     addonAfter=" Days"
@@ -532,7 +509,7 @@ const SetupKeyNew = () => {
               </Col>
             </Row>
 
-            <Row style={{ marginTop: "20px" }}>
+            <Row style={{ marginTop: "24px" }}>
               <Col span={24}>
                 <Paragraph
                   style={{
@@ -558,7 +535,7 @@ const SetupKeyNew = () => {
                     mode="tags"
                     style={{ width: "100%" }}
                     placeholder="Associate groups with the key"
-                    tagRender={tagRender}
+                    tagRender={blueTagRender}
                     dropdownRender={dropDownRender}
                     // enabled only when we have a new key !setupkey.id or when the key is valid
                     disabled={!(!setupKey.id || setupKey.valid)}
@@ -570,7 +547,7 @@ const SetupKeyNew = () => {
                 </Form.Item>
               </Col>
             </Row>
-            <Row style={{ marginTop: "40px", marginBottom: "28px" }}>
+            <Row style={{ marginTop: "24px", marginBottom: "24px" }}>
               <Text type={"secondary"}>
                 Learn more about
                 <a

src/components/popups/AddPATPopup.tsx

@@ -177,9 +177,18 @@ const AddPATPopup = () => {
                                 </Form.Item>
                                 <Paragraph type={"secondary"} style={{fontSize: "14px", marginTop: "-18px"}}>Should be between 1 and 365 days</Paragraph>
                             </Col>
-                            <Col span={24}>
-                                <Button icon={<QuestionCircleFilled/>} type="link" target="_blank" disabled={true} style={{marginTop: "20px", marginBottom: "20px"}}
-                                        href="https://docs.netbird.io/how-to/access-netbird-public-api">Learn more about personal access tokens</Button>
+                            <Col span={24} style={{marginTop: "15px"}}>
+                                <Text type={"secondary"}>
+                                    Learn more about
+                                    <a
+                                        target="_blank"
+                                        rel="noreferrer"
+                                        href="https://docs.netbird.io/how-to/access-netbird-public-api"
+                                    >
+                                        {" "}
+                                        access tokens
+                                    </a>
+                                </Text>
                             </Col>
                         </Row>
                     </Form>}

src/components/popups/InviteUserPopup.tsx

@@ -343,16 +343,17 @@ const InviteUserPopup = () => {
                 </Form.Item>
               </Col>
               <Col span={24}>
-                <Button
-                  icon={<QuestionCircleFilled />}
-                  type="link"
-                  target="_blank"
-                  disabled={true}
-                  style={{ marginTop: "20px", marginBottom: "20px" }}
-                  href="https://docs.netbird.io/how-to/access-netbird-public-api"
-                >
-                  Learn more about user
-                </Button>
+                <Text type={"secondary"}>
+                  Learn more about
+                  <a
+                      target="_blank"
+                      rel="noreferrer"
+                      href="https://docs.netbird.io/how-to/add-users-to-your-network"
+                  >
+                    {" "}
+                    user management
+                  </a>
+                </Text>
               </Col>
             </Row>
           </Form>

src/index.css

@@ -2,6 +2,17 @@
 @import url('https://fonts.googleapis.com/css2?family=Inconsolata:wght@400;500&display=swap');
 @import 'antd/dist/reset.css';
 
+pre,
+code,
+kbd,
+samp,
+pre *,
+code *,
+kbd *,
+samp * {
+  font-family: 'SFMono-Regular', Consolas, 'Liberation Mono', Menlo, Courier, monospace !important;
+}
+
 html,
 body,
 * {
@@ -200,6 +211,9 @@ td.non-highlighted-table-column {
 
 .ant-form-item-explain-error {
   font-weight: 500;
+  font-size: 12px;
+  line-height: 14px;
+  margin-top: 2px;
 }
 
 .menlo-font,
@@ -207,6 +221,11 @@ td.non-highlighted-table-column {
   font-family: 'Menlo', monospace !important;
 }
 
+.arimo-font,
+.arimo-font * {
+  font-family: 'Arimo', sans-serif !important;
+}
+
 .tag-box .ant-select-selector {
   padding: 0 5px !important;
 }
@@ -412,16 +431,49 @@ ul.ant-list-items {
 .remove-bg .ant-collapse-content-box {
   background-color: transparent;
 }
+
 .route-form .ant-form-item {
-  margin-bottom: 20px;
-  /* width: 8px!important;
-  height: 8px!important; */
+  margin-bottom: 24px;
 }
-.nb-code{
+
+.nb-code {
   position: relative;
 }
+
 .btn-copy-code.peer {
   position: absolute;
   top: 10px;
   right: 2px;
+}
+
+.blue-color {
+  color: #1890FF;
+}
+
+.style-like-text .ant-select-selector {
+  background: transparent !important;
+  border: none !important;
+  padding: 0 !important;
+  color: rgba(0, 0, 0, 1) !important;
+}
+
+.style-like-text .ant-select-selection-search::after {
+  display: none !important;
+}
+
+.style-like-text .ant-select-selection-item {
+  padding-inline-end: 0 !important;
+}
+
+.style-like-text .ant-select-arrow {
+  display: none !important;
+}
+
+
+.ant-spin-nested-loading .ant-spin-spinning {
+  min-height: 300px;
+}
+
+.route-form.edit-form-wrapper .ant-form-item{
+      margin-bottom: 39px;
 }

src/store/nameservers/actions.ts

@@ -28,6 +28,7 @@ const actions = {
 
   setNameServerGroup: createAction('SET_NameServerGroup')<NameServerGroup>(),
   setSetupNewNameServerGroupVisible: createAction('SET_SETUP_NEW_NameServerGroup_VISIBLE')<boolean>(),
+  setSetupEditNameServerGroupVisible: createAction('SET_SETUP_EDIT_NameServerGroup_VISIBLE')<boolean>(),
   setSetupNewNameServerGroupHA: createAction('SET_SETUP_NEW_NameServerGroup_HA')<boolean>()
 };
 

src/store/nameservers/reducer.ts

@@ -13,6 +13,7 @@ type StateType = Readonly<{
   deleteNameServerGroup: DeleteResponse<string | null>;
   savedNameServerGroup: CreateResponse<NameServerGroup | null>;
   setupNewNameServerGroupVisible: boolean;
+  setupEditNameServerGroupVisible: boolean;
   setupNewNameServerGroupHA: boolean
 }>;
 
@@ -27,17 +28,18 @@ const initialState: StateType = {
     success: false,
     failure: false,
     error: null,
-    data : null
+    data: null,
   },
   savedNameServerGroup: <CreateResponse<NameServerGroup | null>>{
     loading: false,
     success: false,
     failure: false,
     error: null,
-    data : null
+    data: null,
   },
   setupNewNameServerGroupVisible: false,
-  setupNewNameServerGroupHA: false
+  setupEditNameServerGroupVisible: false,
+  setupNewNameServerGroupHA: false,
 };
 
 const data = createReducer<NameServerGroup[], ActionTypes>(initialState.data as NameServerGroup[])
@@ -79,6 +81,9 @@ const savedNameServerGroup = createReducer<CreateResponse<NameServerGroup | null
 const setupNewNameServerGroupVisible = createReducer<boolean, ActionTypes>(initialState.setupNewNameServerGroupVisible)
     .handleAction(actions.setSetupNewNameServerGroupVisible, (store, action) => action.payload)
 
+const setupEditNameServerGroupVisible = createReducer<boolean, ActionTypes>(initialState.setupEditNameServerGroupVisible)
+    .handleAction(actions.setSetupEditNameServerGroupVisible, (store, action) => action.payload)
+
 const setupNewNameServerGroupHA = createReducer<boolean, ActionTypes>(initialState.setupNewNameServerGroupHA)
     .handleAction(actions.setSetupNewNameServerGroupHA, (store, action) => action.payload)
 
@@ -91,5 +96,6 @@ export default combineReducers({
   deletedNameServerGroup,
   savedNameServerGroup,
   setupNewNameServerGroupVisible,
-  setupNewNameServerGroupHA
+  setupEditNameServerGroupVisible,
+  setupNewNameServerGroupHA,
 });

src/store/nameservers/sagas.ts

@@ -118,13 +118,13 @@ export function* setDeleteNameServerGroup(action: ReturnType<typeof  actions.set
 
 export function* deleteNameServerGroup(action: ReturnType<typeof actions.deleteNameServerGroup.request>): Generator {
   try {
-    yield call(actions.setDeletedNameServerGroup,{
+    yield put(actions.setDeletedNameServerGroup({
       loading: true,
       success: false,
       failure: false,
       error: null,
       data: null
-    } as DeleteResponse<string | null>)
+     }))
 
     const effect = yield call(service.deletedNameServerGroup, action.payload);
     const response = effect as ApiResponse<any>;

src/store/nameservers/types.ts

@@ -1,21 +1,20 @@
 export interface NameServerGroup {
-    id?: string
-    name: string
-    description: string
-    primary: boolean
-    domains: string[]
-    nameservers: NameServer[]
-    groups: string[]
-    enabled: boolean
+  id?: string;
+  name: string;
+  description: string;
+  primary: boolean;
+  domains: string[];
+  nameservers: NameServer[];
+  groups: string[];
+  enabled: boolean;
 }
 
 export interface NameServer {
-    ip: string
-    ns_type: string
-    port: number
+  ip: string;
+  ns_type: string;
+  port: number;
 }
 
-export interface NameServerGroupToSave extends NameServerGroup
-{
-    groupsToCreate: string[]
-}
+export interface NameServerGroupToSave extends NameServerGroup {
+  groupsToCreate?: string[];
+}

src/store/policy/sagas.ts

@@ -174,13 +174,15 @@ export function* deletePolicy(
   action: ReturnType<typeof actions.deletePolicy.request>
 ): Generator {
   try {
-    yield call(actions.setDeletedPolicy, {
-      loading: true,
-      success: false,
-      failure: false,
-      error: null,
-      data: null,
-    } as DeleteResponse<string | null>);
+    yield put(
+      actions.setDeletedPolicy({
+        loading: true,
+        success: false,
+        failure: false,
+        error: null,
+        data: null,
+      })
+    );
 
     const effect = yield call(service.deletedPolicy, action.payload);
     const response = effect as ApiResponse<any>;

src/store/setup-key/types.ts

@@ -1,4 +1,3 @@
-import {ExpiresInValue} from "../../views/ExpiresInInput";
 import moment from "moment";
 
 export interface SetupKey {
@@ -19,7 +18,6 @@ export interface SetupKey {
 
 export interface FormSetupKey extends SetupKey {
   autoGroupNames: string[]
-  expiresInFormatted: ExpiresInValue
   exp: moment.Moment
   last: moment.Moment
 }