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/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

@@ -275,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
@@ -361,7 +367,7 @@ const SetupKeyNew = () => {
               </Col>
             </Row>
 
-            <Row style={{ marginTop: "30px" }}>
+            <Row style={{ marginTop: "39px" }}>
               <Col
                 xs={24}
                 sm={24}
@@ -419,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
@@ -442,6 +434,7 @@ const SetupKeyNew = () => {
             justifyContent: "start",
             padding: 0,
             gap: "10px",
+            marginTop: "24px",
           }}
           key={0}
         >

src/components/SetupKeyNew.tsx

@@ -31,7 +31,7 @@ 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;
@@ -105,7 +105,7 @@ const SetupKeyNew = () => {
       (s) => !allGroupsNames.includes(s)
     );
 
-    const expiresIn = formSetupKey.expires_in * 24 * 3600 // the api expects seconds we have days
+    const expiresIn = formSetupKey.expires_in * 24 * 3600; // the api expects seconds we have days
     return {
       id: formSetupKey.id,
       name: formSetupKey.name,
@@ -345,8 +345,7 @@ const SetupKeyNew = () => {
             textAlign: "start",
             whiteSpace: "pre-line",
             fontSize: "18px",
-            margin: "0px",
-            fontWeight:"500"
+            fontWeight: "500",
           }}
         >
           {showPlainToken
@@ -358,6 +357,10 @@ const SetupKeyNew = () => {
           style={{
             textAlign: "start",
             whiteSpace: "pre-line",
+            marginTop: "-20px",
+            fontSize: "14px",
+            paddingBottom: "25px",
+            marginBottom: "4px",
           }}
         >
           {showPlainToken
@@ -371,7 +374,6 @@ const SetupKeyNew = () => {
             form={form}
             onValuesChange={onChange}
             initialValues={{
-              expires_in: 7,
               usage_limit: 1,
             }}
           >
@@ -399,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={{
@@ -421,6 +423,7 @@ const SetupKeyNew = () => {
                 <Row justify={"end"}>
                   <Form.Item name="reusable" valuePropName="checked">
                     <Switch
+                      size="small"
                       onChange={(checked) => {
                         setFormSetupKey({
                           ...formSetupKey,
@@ -433,7 +436,7 @@ const SetupKeyNew = () => {
               </Col>
             </Row>
 
-            <Row style={{ marginTop: "10px" }}>
+            <Row style={{ marginTop: "16px" }}>
               <Col span={24}>
                 <Paragraph
                   style={{
@@ -471,7 +474,7 @@ const SetupKeyNew = () => {
               </Col>
             </Row>
 
-            <Row style={{ marginTop: "20px" }}>
+            <Row style={{ marginTop: "24px" }}>
               <Col span={24}>
                 <Paragraph
                   style={{
@@ -506,7 +509,7 @@ const SetupKeyNew = () => {
               </Col>
             </Row>
 
-            <Row style={{ marginTop: "20px" }}>
+            <Row style={{ marginTop: "24px" }}>
               <Col span={24}>
                 <Paragraph
                   style={{
@@ -530,7 +533,7 @@ const SetupKeyNew = () => {
                 >
                   <Select
                     mode="tags"
-                    style={{ width: "100%"}}
+                    style={{ width: "100%" }}
                     placeholder="Associate groups with the key"
                     tagRender={blueTagRender}
                     dropdownRender={dropDownRender}
@@ -544,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/views/AccessControl.tsx

@@ -473,7 +473,7 @@ export const AccessControl = () => {
   };
 
   const renderPorts = (ports: string[]) => {
-     if (!ports) {
+    if (!ports) {
       return (
         <Tag style={{ marginRight: 3 }}>
           <span className="menlo-font">ALL</span>
@@ -549,7 +549,6 @@ export const AccessControl = () => {
       })
     );
   };
-  console.log("dataTable", dataTable);
   return (
     <>
       {!setupEditPolicyVisible && (
@@ -645,7 +644,7 @@ export const AccessControl = () => {
                               disabled={savedPolicy.loading}
                               onClick={onClickAddNewPolicy}
                             >
-                              Add Rule
+                              Add rule
                             </Button>
                           </Col>
                         </Row>
@@ -662,7 +661,46 @@ export const AccessControl = () => {
                     />
                   )}
                   <Card bodyStyle={{ padding: 0 }}>
-                    {!showTutorial && (
+                    {showTutorial && !loading ? (
+                      <Space
+                        direction="vertical"
+                        size="small"
+                        align="center"
+                        style={{
+                          display: "flex",
+                          padding: "45px 15px",
+                          justifyContent: "center",
+                        }}
+                      >
+                        <Title level={4} style={{ textAlign: "center" }}>
+                          Create New Rule
+                        </Title>
+                        <Paragraph
+                          style={{
+                            textAlign: "center",
+                            whiteSpace: "pre-line",
+                          }}
+                        >
+                          It looks like you don't have any rules. {"\n"}
+                          Get started with access control by adding a new one.
+                          <a
+                            target="_blank"
+                            rel="noreferrer"
+                            href="https://docs.netbird.io/how-to/manage-network-access"
+                          >
+                            {" "}
+                            Learn more
+                          </a>
+                        </Paragraph>
+                        <Button
+                          size={"middle"}
+                          type="primary"
+                          onClick={() => onClickAddNewPolicy()}
+                        >
+                          Add rule
+                        </Button>
+                      </Space>
+                    ) : (
                       <Table
                         pagination={{
                           current: currentPage,
@@ -684,6 +722,7 @@ export const AccessControl = () => {
                         }`}
                         showSorterTooltip={false}
                         scroll={{ x: true }}
+                        style={{ minHeight: "300px" }}
                         loading={tableSpin(loading)}
                         dataSource={dataTable}
                       >
@@ -826,46 +865,6 @@ export const AccessControl = () => {
                         />
                       </Table>
                     )}
-                    {showTutorial && (
-                      <Space
-                        direction="vertical"
-                        size="small"
-                        align="center"
-                        style={{
-                          display: "flex",
-                          padding: "45px 15px",
-                          justifyContent: "center",
-                        }}
-                      >
-                        <Title level={4} style={{ textAlign: "center" }}>
-                          Create New Rule
-                        </Title>
-                        <Paragraph
-                          style={{
-                            textAlign: "center",
-                            whiteSpace: "pre-line",
-                          }}
-                        >
-                          It looks like you don't have any rules. {"\n"}
-                          Get started with access control by adding a new one.
-                          <a
-                            target="_blank"
-                            rel="noreferrer"
-                            href="https://docs.netbird.io/how-to/manage-network-access"
-                          >
-                            {" "}
-                            Learn more
-                          </a>
-                        </Paragraph>
-                        <Button
-                          size={"middle"}
-                          type="primary"
-                          onClick={() => onClickAddNewPolicy()}
-                        >
-                          Add rule
-                        </Button>
-                      </Space>
-                    )}
                   </Card>
                 </Space>
               </Col>

src/views/DNS.tsx

@@ -1,78 +1,91 @@
-import React, {useEffect, useState} from 'react';
-import {Container} from "../components/Container";
-import {
-    Col,
-    Row,
-    Tabs,
-    Typography,
-} from "antd";
-import type { TabsProps } from 'antd';
+import React, { useEffect, useState } from "react";
+import { Container } from "../components/Container";
+import { Col, Row, Tabs, Typography } from "antd";
+import type { TabsProps } from "antd";
 import NameServerGroupUpdate from "../components/NameServerGroupUpdate";
+import NameServerGroupAdd from "../components/NameServerGroupAdd";
 import Nameservers from "./Nameservers";
-import {actions as groupActions} from "../store/group";
-import {useGetTokenSilently} from "../utils/token";
-import {useDispatch, useSelector} from "react-redux";
+import { actions as groupActions } from "../store/group";
+import { useGetTokenSilently } from "../utils/token";
+import { useDispatch, useSelector } from "react-redux";
 import DNSSettingsForm from "./DNSSettings";
-import {RootState} from "typesafe-actions";
-import {actions as dnsSettingsActions} from '../store/dns-settings';
-import {useGetGroupTagHelpers} from "../utils/groups";
+import { RootState } from "typesafe-actions";
+import { actions as dnsSettingsActions } from "../store/dns-settings";
+import { useGetGroupTagHelpers } from "../utils/groups";
 
-const {Title, Paragraph} = Typography;
+const { Title, Paragraph } = Typography;
 
 export const DNS = () => {
-    const {getTokenSilently} = useGetTokenSilently()
-    const dispatch = useDispatch()
-    const {
-        getGroupNamesFromIDs,
-    } = useGetGroupTagHelpers()
+  const { getTokenSilently } = useGetTokenSilently();
+  const dispatch = useDispatch();
+  const { getGroupNamesFromIDs } = useGetGroupTagHelpers();
 
-    const dnsSettingsData = useSelector((state: RootState) => state.dnsSettings.data)
+  const dnsSettingsData = useSelector(
+    (state: RootState) => state.dnsSettings.data
+  );
+  const setupEditNameServerGroupVisible = useSelector(
+    (state: RootState) => state.nameserverGroup.setupEditNameServerGroupVisible
+  );
+  const setupNewNameServerGroupVisible = useSelector(
+    (state: RootState) => state.nameserverGroup.setupNewNameServerGroupVisible
+  );
+  useEffect(() => {
+    dispatch(
+      groupActions.getGroups.request({
+        getAccessTokenSilently: getTokenSilently,
+        payload: null,
+      })
+    );
+  }, []);
 
-    useEffect(() => {
-        dispatch(groupActions.getGroups.request({getAccessTokenSilently: getTokenSilently, payload: null}));
-    }, [])
+  const nsTabKey = "1";
+  const items: TabsProps["items"] = [
+    {
+      key: nsTabKey,
+      label: "Nameservers",
+      children: <Nameservers />,
+    },
+    {
+      key: "2",
+      label: "Settings",
+      children: <DNSSettingsForm />,
+    },
+  ];
 
-    const nsTabKey = '1'
-    const items: TabsProps['items'] = [
-        {
-            key: nsTabKey,
-            label: 'Nameservers',
-            children: <Nameservers/>,
-        },
-        {
-            key: '2',
-            label: 'Settings',
-            children: <DNSSettingsForm/>,
-        },
-    ]
-
-    const onTabClick = (key:string) => {
-        if (key == nsTabKey) {
-            if (!dnsSettingsData) return
-            dispatch(dnsSettingsActions.setDNSSettings({
-                disabled_management_groups: getGroupNamesFromIDs(dnsSettingsData.disabled_management_groups),
-            }))
-        }
+  const onTabClick = (key: string) => {
+    if (key == nsTabKey) {
+      if (!dnsSettingsData) return;
+      dispatch(
+        dnsSettingsActions.setDNSSettings({
+          disabled_management_groups: getGroupNamesFromIDs(
+            dnsSettingsData.disabled_management_groups
+          ),
+        })
+      );
     }
+  };
 
-    return (
-        <>
-            <Container style={{paddingTop: "40px"}}>
-                <Row>
-                    <Col span={24}>
-                        <Tabs
-                            defaultActiveKey={nsTabKey}
-                            items={items}
-                            onTabClick={onTabClick}
-                            animated={{ inkBar: true, tabPane: false }}
-                            tabPosition="top"
-                        />
-                    </Col>
-                </Row>
-            </Container>
-            <NameServerGroupUpdate/>
-        </>
-    )
-}
+  return (
+    <>
+      {!setupEditNameServerGroupVisible && (
+        <Container style={{ paddingTop: "40px" }}>
+          <Row>
+            <Col span={24}>
+              <Tabs
+                defaultActiveKey={nsTabKey}
+                items={items}
+                onTabClick={onTabClick}
+                animated={{ inkBar: true, tabPane: false }}
+                tabPosition="top"
+              />
+            </Col>
+          </Row>
+        </Container>
+      )}
+      {setupEditNameServerGroupVisible && <NameServerGroupUpdate />}
+      {setupNewNameServerGroupVisible && <NameServerGroupAdd />}
+    </>
+  );
+};
 
-export default DNS;
+export default DNS;