Adjust DNS view

* fix initial value for setup keys so default works

* fix initial value for setup keys so default works

src/components/AccessControlEdit.tsx

@@ -457,11 +457,7 @@ const AccessControlEdit = () => {
               },
             ]}
           />
-          <Card
-            bordered={true}
-            // title={setupKey.name}
-            style={{ marginBottom: "7px" }}
-          >
+          <Card bordered={true} style={{ marginBottom: "7px" }}>
             <div style={{ maxWidth: "550px" }}>
               <Form
                 layout="vertical"
@@ -508,7 +504,6 @@ const AccessControlEdit = () => {
                               <Form.Item
                                 name="name"
                                 label=""
-                                style={{ margin: "0" }}
                                 rules={[
                                   {
                                     required: true,
@@ -532,7 +527,7 @@ const AccessControlEdit = () => {
                           {!editDescription ? (
                             <div
                               style={{
-                                margin: "12px 0 30px",
+                                margin: "0 0 39px",
                                 lineHeight: "22px",
                                 cursor: "pointer",
                               }}
@@ -551,7 +546,7 @@ const AccessControlEdit = () => {
                             <Form.Item
                               name="description"
                               label="Description"
-                              style={{ marginTop: 24, fontWeight: "500" }}
+                              style={{ marginTop: 10, fontWeight: "500" }}
                             >
                               <Input
                                 placeholder="Add description..."
@@ -568,7 +563,7 @@ const AccessControlEdit = () => {
                       </Row>
                     </Header>
                   </Col>
-                  <Col span={24}>
+                  <Col span={24} style={{ marginBottom: "15px" }}>
                     <Form.Item name="enabled" label="">
                       <div
                         style={{
@@ -579,6 +574,7 @@ const AccessControlEdit = () => {
                         <Switch
                           onChange={handleChangeDisabled}
                           defaultChecked={policy.enabled}
+                          size="small"
                         />
                         <div>
                           <label
@@ -784,7 +780,7 @@ const AccessControlEdit = () => {
                       </Col>
                     </Row>
                   </Col>
-                  <Col span={24}>
+                  <Col span={24} style={{ marginBottom: "15px" }}>
                     <Paragraph
                       type={"secondary"}
                       style={{ marginTop: "-15px", marginBottom: "30px" }}
@@ -793,7 +789,7 @@ const AccessControlEdit = () => {
                       protocol below
                     </Paragraph>
                   </Col>
-                  <Col span={24}>
+                  <Col span={24} style={{ marginBottom: "15px" }}>
                     <Row>
                       <Col span={10}>
                         <Form.Item
@@ -830,7 +826,14 @@ const AccessControlEdit = () => {
                                 maxWidth: "260px",
                                 fontWeight: "500",
                               }}
-                              placeholder={<div color={"rgba(0,0,0,0.25)"} className="arimo-font">Select ports</div>}
+                              placeholder={
+                                <div
+                                  color={"rgba(0,0,0,0.25)"}
+                                  className="arimo-font"
+                                >
+                                  Select ports
+                                </div>
+                              }
                               className="menlo-font"
                               value={formPolicyCopy}
                               disabled={true}
@@ -862,7 +865,14 @@ const AccessControlEdit = () => {
                                 maxWidth: "260px",
                                 fontWeight: "500",
                               }}
-                              placeholder={<div color={"rgba(0,0,0,0.25)"} className="arimo-font">Select ports</div>}
+                              placeholder={
+                                <div
+                                  color={"rgba(0,0,0,0.25)"}
+                                  className="arimo-font"
+                                >
+                                  Select ports
+                                </div>
+                              }
                               tagRender={grayTagRender}
                               onChange={handleChangePorts}
                               className="menlo-font"
@@ -890,7 +900,7 @@ const AccessControlEdit = () => {
                 justifyContent: "start",
                 padding: 0,
                 gap: "10px",
-                marginTop: "30px",
+                marginTop: "12px",
               }}
               key={0}
             >

src/components/AccessControlNew.tsx

@@ -456,18 +456,20 @@ const AccessControlNew = () => {
                       textAlign: "start",
                       whiteSpace: "pre-line",
                       fontSize: "18px",
-                      margin: "0px",
                       fontWeight: "500",
                     }}
                   >
-                    Create Rule
+                    Create rule
                   </Paragraph>
                   <Paragraph
                     type={"secondary"}
                     style={{
                       textAlign: "start",
                       whiteSpace: "pre-line",
-                      paddingBottom: "15px",
+                      marginTop: "-20px",
+                      fontSize: "14px",
+                      paddingBottom: "25px",
+                      marginBottom: "4px",
                     }}
                   >
                     Use this rule to restrict access to groups of resources
@@ -767,6 +769,8 @@ const AccessControlNew = () => {
                       color: "rgba(0, 0, 0, 0.88)",
                       fontSize: "14px",
                       fontWeight: "500",
+                      padding: "0 0 2px",
+                      display: "inline-block",
                     }}
                   >
                     Ports
@@ -828,9 +832,16 @@ const AccessControlNew = () => {
                       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>)
+                        formPolicy.protocol === "icmp" ? (
+                          "All"
+                        ) : (
+                          <div
+                            color={"rgba(0,0,0,0.25)"}
+                            className="arimo-font"
+                          >
+                            Select ports
+                          </div>
+                        )
                       }
                       tagRender={grayTagRender}
                       onChange={handleChangePorts}
@@ -859,6 +870,7 @@ const AccessControlNew = () => {
                     }}
                   >
                     <Switch
+                      size="small"
                       onChange={handleChangeDisabled}
                       defaultChecked={true}
                     />
@@ -890,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
@@ -900,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({

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,17 +26,15 @@ 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, blueTagRender } = useGetGroupTagHelpers();
@@ -88,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;
@@ -108,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,
@@ -348,8 +345,7 @@ const SetupKeyNew = () => {
             textAlign: "start",
             whiteSpace: "pre-line",
             fontSize: "18px",
-            margin: "0px",
-            fontWeight:"500"
+            fontWeight: "500",
           }}
         >
           {showPlainToken
@@ -361,6 +357,10 @@ const SetupKeyNew = () => {
           style={{
             textAlign: "start",
             whiteSpace: "pre-line",
+            marginTop: "-20px",
+            fontSize: "14px",
+            paddingBottom: "25px",
+            marginBottom: "4px",
           }}
         >
           {showPlainToken
@@ -374,7 +374,6 @@ const SetupKeyNew = () => {
             form={form}
             onValuesChange={onChange}
             initialValues={{
-              expiresIn: ExpiresInDefault,
               usage_limit: 1,
             }}
           >
@@ -402,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={{
@@ -424,6 +423,7 @@ const SetupKeyNew = () => {
                 <Row justify={"end"}>
                   <Form.Item name="reusable" valuePropName="checked">
                     <Switch
+                      size="small"
                       onChange={(checked) => {
                         setFormSetupKey({
                           ...formSetupKey,
@@ -436,7 +436,7 @@ const SetupKeyNew = () => {
               </Col>
             </Row>
 
-            <Row style={{ marginTop: "10px" }}>
+            <Row style={{ marginTop: "16px" }}>
               <Col span={24}>
                 <Paragraph
                   style={{
@@ -474,7 +474,7 @@ const SetupKeyNew = () => {
               </Col>
             </Row>
 
-            <Row style={{ marginTop: "20px" }}>
+            <Row style={{ marginTop: "24px" }}>
               <Col span={24}>
                 <Paragraph
                   style={{
@@ -488,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"
@@ -510,7 +509,7 @@ const SetupKeyNew = () => {
               </Col>
             </Row>
 
-            <Row style={{ marginTop: "20px" }}>
+            <Row style={{ marginTop: "24px" }}>
               <Col span={24}>
                 <Paragraph
                   style={{
@@ -534,7 +533,7 @@ const SetupKeyNew = () => {
                 >
                   <Select
                     mode="tags"
-                    style={{ width: "100%"}}
+                    style={{ width: "100%" }}
                     placeholder="Associate groups with the key"
                     tagRender={blueTagRender}
                     dropdownRender={dropDownRender}
@@ -548,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

@@ -211,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,
@@ -430,7 +433,7 @@ ul.ant-list-items {
 }
 
 .route-form .ant-form-item {
-  margin-bottom: 20px;
+  margin-bottom: 24px;
 }
 
 .nb-code {
@@ -441,4 +444,36 @@ ul.ant-list-items {
   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
 }