Update networks docs to reflect new state of 'add resource' modal (#651)

src/pages/manage/networks/index.mdx

@@ -93,11 +93,15 @@ For troubleshooting, see [Debugging access to Domain Resources](/help/troublesho
 
 ## Manage Access to Resources
 
-To control access to resources, assign them to groups and create [access control policies](/manage/access-control/manage-network-access#creating-policies). A peer can only see a resource when a policy grants access from one of the peer's groups (source) to one of the resource's groups (destination).
+To control access to resources, you can assign them to resource groups and create [access control policies](/manage/access-control/manage-network-access#creating-policies) directly from the Add Resource modal. A peer can only see a resource when a policy grants access from one of the peer's groups (source) to one of the resource's groups (destination).
+
+When adding or editing a resource, the modal has two tabs:
+
+- **Resource**: Configure the resource name and address. Expand **Additional Options** to set a description and assign the resource to **Resource Groups** (e.g., `Databases`, `Web Servers`) for use in access policies.
+- **Access Control**: View, create, or manage access control policies for this resource before saving.
 
-Example resource `CRM` assigned to a group:
 <p>
-    <img src="/docs-static/img/manage/networks/index/resources-2.png" alt="resource-group" className="imagewrapper"/>
+    <img src="/docs-static/img/manage/networks/index/resources-2.png" alt="resource-modal" className="imagewrapper"/>
 </p>
 
 Access control policies define which peers can access which resources based on source groups, destination groups, and allowed traffic types (TCP, UDP, ICMP). When creating a policy:
@@ -110,6 +114,10 @@ Access control policies define which peers can access which resources based on s
   Unlike peers, resources are not automatically members of the built-in `All` group. To use `All` group rules with resources, you must explicitly add them to this group.
 </Note>
 
+<Note>
+  If you skip adding policies in the Access Control tab, a confirmation dialog will warn you that the resource will not be accessible by any peers without an access control policy.
+</Note>
+
 Example policy allowing the `Berlin Office` group to access the internal CRM system:
 
 <p>

src/pages/manage/networks/use-cases/by-resource-type/accessing-entire-domains-within-networks.mdx

@@ -74,23 +74,21 @@ In `Advanced Settings`:
 
 ### Add a wildcard domain resource
 
-Click `Add Resource` to create the wildcard domain resource.
+Click `Add Resource` to open the resource modal.
 
 ![Add Domain Resource](/docs-static/img/manage/networks/use-cases/by-resource-type/accessing-entire-domains-within-networks/06-domains-within-networks.png)
 
-Configure the resource:
+In the **Resource** tab, configure the resource:
 - **Name**: `Development Wildcard Domain`
 - **Address**: `*.dev.example.com`
-- **Assigned Groups**: Select or create a group (e.g., `Development Domain`)
-- Click `Add Resource`
+- Expand **Additional Options** and under **Resource Groups**, select or create a group (e.g., `Development Domain`)
+- Click **Continue** to proceed to the **Access Control** tab
 
 ![Add Development Wildcard Resource](/docs-static/img/manage/networks/use-cases/by-resource-type/accessing-entire-domains-within-networks/07-domains-within-networks.png)
 
 ### Create an access policy
 
-Click `Create Policy` to grant developers access to `*.dev.example.com`.
-
-![Add Policy](/docs-static/img/manage/networks/use-cases/by-resource-type/accessing-entire-domains-within-networks/08-domains-within-networks.png)
+In the **Access Control** tab, click **Add Policy** to grant developers access to `*.dev.example.com`.
 
 Configure the policy:
 - **Protocol**: `ALL`
@@ -103,6 +101,8 @@ Click `Continue` to optionally add posture checks, then `Continue` again. Enter
 
 ![Developers Policy Name](/docs-static/img/manage/networks/use-cases/by-resource-type/accessing-entire-domains-within-networks/10-domains-within-networks.png)
 
+Click **Add Resource** to save the resource with its policy.
+
 ### Add the base domain resource
 
 Wildcard domains (`*.dev.example.com`) only match subdomains, not the base domain itself. To also allow access to `dev.example.com`, add it as a separate resource.
@@ -111,11 +111,11 @@ Wildcard domains (`*.dev.example.com`) only match subdomains, not the base domai
 
 ![Development Network](/docs-static/img/manage/networks/use-cases/by-resource-type/accessing-entire-domains-within-networks/11-domains-within-networks.png)
 
-2. Configure the resource:
+2. In the **Resource** tab, configure the resource:
    - **Name**: `Development Regular Domain`
    - **Address**: `dev.example.com`
-   - **Assigned Groups**: `Development Domain` (same group as the wildcard)
-   - Click `Add Resource`
+   - Expand **Additional Options** and under **Resource Groups**, select `Development Domain` (same group as the wildcard)
+   - Click **Continue** to proceed to the **Access Control** tab, then click **Add Resource**
 
 ![Regular Domain Resource](/docs-static/img/manage/networks/use-cases/by-resource-type/accessing-entire-domains-within-networks/12-domains-within-networks.png)
 
@@ -153,15 +153,15 @@ Add routing peers (single or group for high availability):
 
 ![AI Routing Peers](/docs-static/img/manage/networks/use-cases/by-resource-type/accessing-entire-domains-within-networks/15-domains-within-networks.png)
 
-Add the wildcard domain resource for `*.ai.example.com`:
+Add the wildcard domain resource for `*.ai.example.com`. In the **Resource** tab, enter the name and address, then expand **Additional Options** to assign a resource group (e.g., `AI Domain`). Click **Continue** to go to the **Access Control** tab:
 
 ![AI Wildcard Domain Resource](/docs-static/img/manage/networks/use-cases/by-resource-type/accessing-entire-domains-within-networks/16-domains-within-networks.png)
 
-Create an access policy for the `Data Scientists` group:
+In the **Access Control** tab, click **Add Policy** and create an access policy for the `Data Scientists` group:
 
 ![AI Team Access Policy](/docs-static/img/manage/networks/use-cases/by-resource-type/accessing-entire-domains-within-networks/17-domains-within-networks.png)
 
-Add the base domain `ai.example.com` as a separate resource. The completed network:
+Click **Add Resource** to save. Then add the base domain `ai.example.com` as a separate resource using the same resource group. The completed network:
 
 ![AI Network](/docs-static/img/manage/networks/use-cases/by-resource-type/accessing-entire-domains-within-networks/18-domains-within-networks.png)
 
@@ -169,7 +169,7 @@ Add the base domain `ai.example.com` as a separate resource. The completed netwo
 
 You can add individual subdomain resources for more granular access control. For example, to add a specific AI model subdomain:
 
-Click `Add Resource`, enter the subdomain name and address, and assign it to the appropriate group:
+Click `Add Resource`, enter the subdomain name and address in the **Resource** tab, expand **Additional Options** to assign it to the appropriate resource group, then click **Continue** and **Add Resource**:
 
 ![New AI Model Resource](/docs-static/img/manage/networks/use-cases/by-resource-type/accessing-entire-domains-within-networks/19-domains-within-networks.png)
 

src/pages/manage/networks/use-cases/by-resource-type/accessing-restricted-domain-resources.mdx

@@ -47,23 +47,21 @@ In `Advanced Settings`:
 
 ### Add the accounting subdomain resource
 
-Click `Add Resource` to add the accounting website.
+Click `Add Resource` to open the resource modal.
 
 ![Add Network Resource](/docs-static/img/manage/networks/use-cases/by-resource-type/accessing-restricted-domain-resources/05-restricted-domain.png)
 
-Configure the resource:
+In the **Resource** tab, configure the resource:
 - **Name**: `Accounting restricted subdomain`
 - **Address**: `accounting.example.com`
-- **Assigned Groups**: Select or create a group (e.g., `Accounting Subdomain`)
-- Click `Add Resource`
+- Expand **Additional Options** and under **Resource Groups**, select or create a group (e.g., `Accounting Subdomain`)
+- Click **Continue** to proceed to the **Access Control** tab
 
 ![Add Accounting Website Resource](/docs-static/img/manage/networks/use-cases/by-resource-type/accessing-restricted-domain-resources/06-restricted-domain.png)
 
 ### Create an access policy for the finance team
 
-Click `Create Policy` to define access for the finance team.
-
-![Add Policy](/docs-static/img/manage/networks/use-cases/by-resource-type/accessing-restricted-domain-resources/07-restricted-domain.png)
+In the **Access Control** tab, click **Add Policy** to define access for the finance team.
 
 Configure the policy:
 - **Protocol**: `TCP`
@@ -77,37 +75,41 @@ Click `Continue` to optionally add posture checks, then `Continue` again. Enter
 
 ![Finance Policy Name](/docs-static/img/manage/networks/use-cases/by-resource-type/accessing-restricted-domain-resources/09-restricted-domain.png)
 
+Click **Add Resource** to save the resource with its policy.
+
 ### Add the top-level domain resource for support
 
 The support team needs SSH access to the backend at `example.com`. Add a new resource:
 
 1. In the `AWS EU Network` screen, click `Add Resource`
-2. Configure:
+2. In the **Resource** tab, configure:
    - **Name**: `Restricted Website TLD`
    - **Address**: `example.com`
-   - **Assigned Groups**: Select or create a group (e.g., `Webserver`)
+   - Expand **Additional Options** and under **Resource Groups**, select or create a group (e.g., `Webserver`)
+3. Click **Continue** to proceed to the **Access Control** tab
 
 ![Add TLD Resource](/docs-static/img/manage/networks/use-cases/by-resource-type/accessing-restricted-domain-resources/10-restricted-domain.png)
 
 ### Create an access policy for the support team
 
-Create a policy for SSH access:
+In the **Access Control** tab, click **Add Policy** to create a policy for SSH access:
 
-1. Click `Add Policy` next to the `Restricted Website TLD` resource
-2. Configure:
+1. Configure:
    - **Protocol**: `TCP`
    - **Source**: `Support`
    - **Destination**: `Webserver`
    - **Ports**: `22`
-3. Click `Continue`
+2. Click `Continue`
 
 ![Add Support Team Policy](/docs-static/img/manage/networks/use-cases/by-resource-type/accessing-restricted-domain-resources/11-restricted-domain.png)
 
-4. Optionally add posture checks, then click `Continue`
-5. Enter a policy name (e.g., `Restricted Website TLD Policy`)
+3. Optionally add posture checks, then click `Continue`
+4. Enter a policy name (e.g., `Restricted Website TLD Policy`) and click `Add Policy`
 
 ![Name Support Team Policy](/docs-static/img/manage/networks/use-cases/by-resource-type/accessing-restricted-domain-resources/12-restricted-domain.png)
 
+Click **Add Resource** to save the resource with its policy.
+
 ## Verify the configuration
 
 The completed network shows both resources with their access policies:

src/pages/manage/networks/use-cases/by-resource-type/routing-traffic-to-multiple-resources.mdx

@@ -40,19 +40,21 @@ Click `Continue`, then accept the defaults and click `Add Routing Peer`:
 
 ### Add the network resource
 
-Click `Add Resource` and enter `Office network` as the name with IP range `172.16.0.0/15` as the address:
+Click `Add Resource` to open the resource modal. In the **Resource** tab:
+1. Enter `Office network` as the name
+2. Enter `172.16.0.0/15` as the address
+3. Expand **Additional Options** and assign the resource group `office-network` — this group will be used in the access policy for the DevOps team
+4. Click **Continue** to proceed to the **Access Control** tab
 
 <p>
     <img src="/docs-static/img/manage/networks/use-cases/by-resource-type/routing-traffic-to-multiple-resources/add-example-resource-1.png" alt="new-example-resource-1" className="imagewrapper"/>
 </p>
 
-Assign the group `office-network` to this resource. This group will be used in the access policy for the DevOps team.
-
 ### Create an access policy for the network resource
 
-Create a policy that grants the `DevOps` group full access to the `office-network` resource group.
+In the **Access Control** tab, click **Add Policy** to create a policy that grants the `DevOps` group full access to the `office-network` resource group.
 
-Click `Create Policy` and configure the fields as shown:
+Configure the policy fields as shown:
 
 <p>
     <img src="/docs-static/img/manage/networks/use-cases/by-resource-type/routing-traffic-to-multiple-resources/add-example-resource-acl-1.png" alt="new-resource-acl-1" className="imagewrapper-big"/>
@@ -64,17 +66,21 @@ Click `Continue` twice, then click `Add Policy`:
     <img src="/docs-static/img/manage/networks/use-cases/by-resource-type/routing-traffic-to-multiple-resources/add-example-resource-acl-2.png" alt="new-resource-acl-2" className="imagewrapper-big"/>
 </p>
 
+Click **Add Resource** to save the resource with its policy.
+
 ### Add the DNS server resources
 
-Add the first DNS server as a resource. Click `Add Resource` and enter the IP address:
+Add the first DNS server as a resource. Click `Add Resource` and in the **Resource** tab:
+1. Enter the DNS server name and IP address `172.16.30.2`
+2. Expand **Additional Options** and assign the resource group `office-dns-servers`
+3. Click **Continue** to proceed to the **Access Control** tab
+4. Skip adding a policy for now — click **Add Resource** to save without a policy (you will create a shared policy after adding both DNS servers)
 
 <p>
     <img src="/docs-static/img/manage/networks/use-cases/by-resource-type/routing-traffic-to-multiple-resources/add-example-resource-2.png" alt="new-example-resource-2" className="imagewrapper"/>
 </p>
 
-Assign the group `office-dns-servers` to this resource. When prompted to create a policy, click `Later` since you will add another DNS server first.
-
-Add the second DNS server resource:
+Repeat the same steps for the second DNS server at `172.17.100.2`, assigning it to the same `office-dns-servers` group:
 
 <p>
     <img src="/docs-static/img/manage/networks/use-cases/by-resource-type/routing-traffic-to-multiple-resources/add-example-resource-3.png" alt="new-example-resource-3" className="imagewrapper"/>
@@ -82,9 +88,9 @@ Add the second DNS server resource:
 
 ### Create an access policy for DNS servers
 
-Create a policy that grants the `All users` group access to the `office-dns-servers` resource group on UDP port 53 only.
+Now that both DNS servers share the `office-dns-servers` resource group, create a single policy for both. From the network view, click **Add Policy** next to one of the DNS server resources.
 
-Click `Create Policy` and configure the fields:
+Create a policy that grants the `All users` group access to the `office-dns-servers` resource group on UDP port 53 only:
 
 <p>
     <img src="/docs-static/img/manage/networks/use-cases/by-resource-type/routing-traffic-to-multiple-resources/add-example-resource-acl-3.png" alt="new-resource-acl-3" className="imagewrapper-big"/>

src/pages/manage/networks/use-cases/by-scenario/access-home-devices.mdx

@@ -66,10 +66,10 @@ Look for your local subnet, typically something like `192.168.1.0/24` or `192.16
 ## Step 5: Add Your Home Subnet as a Resource
 
 1. In your new network, click **Add Resource**
-2. Enter a name like "Home Subnet"
+2. In the **Resource** tab, enter a name like "Home Subnet"
 3. Enter your home subnet (e.g., `192.168.1.0/24`)
-4. Create a group called `home-lan` for the destination
-5. Click **Add Resource**
+4. Expand **Additional Options** and under **Resource Groups**, create a group called `home-lan`
+5. Click **Continue** to proceed to the **Access Control** tab
 
 <p>
     <img src="/docs-static/img/manage/networks/use-cases/by-scenario/access-home-devices/add-resource-home-network.png" alt="Add resource" className="imagewrapper"/>
@@ -81,11 +81,12 @@ For more granular access, add specific device IPs instead of the entire subnet.
 
 ## Step 6: Create an Access Policy
 
-1. After adding your resource, click **Create Policy**
+1. In the **Access Control** tab, click **Add Policy**
 2. Set **Source** to "Home Users"
 3. Set **Destination** to `home-lan`
 4. Set **Protocol** to All
 5. Name it "Home LAN Access" and click **Add Policy**
+6. Click **Add Resource** to save the resource with its policy
 
 <p>
     <img src="/docs-static/img/manage/networks/use-cases/by-scenario/access-home-devices/add-policy-home-lan.png" alt="Add policy" className="imagewrapper"/>

src/pages/manage/networks/use-cases/by-scenario/cloud-to-on-premise.mdx

@@ -45,10 +45,10 @@ Look for your local subnet, typically something like `10.100.0.0/24`.
 ## Step 3: Add Your Database as a Resource
 
 1. In your new network, click **Add Resource**
-2. Enter a name like "Database Servers"
+2. In the **Resource** tab, enter a name like "Database Servers"
 3. Enter your database subnet or specific IP (e.g., `10.100.0.0/24` or `10.100.0.50/32`)
-4. Create a group called `on-prem-databases` for the destination
-5. Click **Add Resource**
+4. Expand **Additional Options** and under **Resource Groups**, create a group called `on-prem-databases`
+5. Click **Continue** to proceed to the **Access Control** tab
 
 <p>
     <img src="/docs-static/img/manage/networks/use-cases/by-scenario/cloud-to-on-prem/add-resource-database-servers.png" alt="Add resource" className="imagewrapper"/>
@@ -60,12 +60,13 @@ For more granular access, add specific database IPs instead of the entire subnet
 
 ## Step 4: Create an Access Policy
 
-1. After adding your resource, click **Create Policy**
+1. In the **Access Control** tab, click **Add Policy**
 2. Set **Source** to "`cloud-workloads`" (you'll create this group in the next step)
 3. Set **Destination** to `on-prem-databases`
 4. Set **Protocol** to TCP
 5. Set **Ports** to the database ports (e.g., `5432` for PostgreSQL, `3306` for MySQL)
 6. Name it "Cloud to Database Access" and click **Add Policy**
+7. Click **Add Resource** to save the resource with its policy
 
 <p>
     <img src="/docs-static/img/manage/networks/use-cases/by-scenario/cloud-to-on-prem/add-policy-on-prem-databases.png" alt="Add policy" className="imagewrapper"/>

src/pages/manage/networks/use-cases/by-scenario/remote-worker-access.mdx

@@ -66,10 +66,10 @@ Look for your local subnet, typically something like `10.0.0.0/24` or `192.168.1
 ## Step 5: Add Your Office Subnet as a Resource
 
 1. In your new network, click **Add Resource**
-2. Enter a name like "Office Subnet"
+2. In the **Resource** tab, enter a name like "Office Subnet"
 3. Enter your office subnet (e.g., `10.0.0.0/24`)
-4. Create a group called `office-lan` for the destination
-5. Click **Add Resource**
+4. Expand **Additional Options** and under **Resource Groups**, create a group called `office-lan`
+5. Click **Continue** to proceed to the **Access Control** tab
 
 <p>
     <img src="/docs-static/img/manage/networks/use-cases/by-scenario/remote-worker-access/add-resource-office-subnet.png" alt="Add resource" className="imagewrapper"/>
@@ -81,11 +81,12 @@ For more granular access, add specific server IPs instead of the entire subnet.
 
 ## Step 6: Create an Access Policy
 
-1. After adding your resource, click **Create Policy**
+1. In the **Access Control** tab, click **Add Policy**
 2. Set **Source** to "`remote-workers`"
 3. Set **Destination** to `office-lan`
 4. Set **Protocol** based on needs (TCP for most apps, All for full access)
 5. Name it "Remote Worker Office Access" and click **Add Policy**
+6. Click **Add Resource** to save the resource with its policy
 
 <p>
     <img src="/docs-static/img/manage/networks/use-cases/by-scenario/remote-worker-access/add-policy-remote-worker-office-access.png" alt="Create policy for remote worker office access" className="imagewrapper"/>