add toggle resource visibility closes #442

src/app/[orgId]/settings/resources/ResourcesTable.tsx

@@ -30,6 +30,9 @@ import { toast } from "@app/hooks/useToast";
 import { createApiClient } from "@app/lib/api";
 import { useEnvContext } from "@app/hooks/useEnvContext";
 import CopyToClipboard from "@app/components/CopyToClipboard";
+import { Switch } from "@app/components/ui/switch";
+import { AxiosResponse } from "axios";
+import { UpdateResourceResponse } from "@server/routers/resource";
 
 export type ResourceRow = {
     id: number;
@@ -42,6 +45,7 @@ export type ResourceRow = {
     http: boolean;
     protocol: string;
     proxyPort: number | null;
+    enabled: boolean;
 };
 
 type ResourcesTableProps = {
@@ -75,6 +79,26 @@ export default function SitesTable({ resources, orgId }: ResourcesTableProps) {
             });
     };
 
+    async function toggleResourceEnabled(val: boolean, resourceId: number) {
+        const res = await api
+            .post<AxiosResponse<UpdateResourceResponse>>(
+                `resource/${resourceId}`,
+                {
+                    enabled: val
+                }
+            )
+            .catch((e) => {
+                toast({
+                    variant: "destructive",
+                    title: "Failed to toggle resource",
+                    description: formatAxiosError(
+                        e,
+                        "An error occurred while updating the resource"
+                    )
+                });
+            });
+    }
+
     const columns: ColumnDef<ResourceRow>[] = [
         {
             accessorKey: "dots",
@@ -224,6 +248,18 @@ export default function SitesTable({ resources, orgId }: ResourcesTableProps) {
                 );
             }
         },
+        {
+            accessorKey: "enabled",
+            header: "Enabled",
+            cell: ({ row }) => (
+                <Switch
+                    defaultChecked={row.original.enabled}
+                    onCheckedChange={(val) =>
+                        toggleResourceEnabled(val, row.original.id)
+                    }
+                />
+            )
+        },
         {
             id: "actions",
             cell: ({ row }) => {

src/app/[orgId]/settings/resources/[resourceId]/ResourceInfoBox.tsx

@@ -12,6 +12,7 @@ import {
     InfoSectionTitle
 } from "@app/components/InfoSection";
 import Link from "next/link";
+import { Switch } from "@app/components/ui/switch";
 
 type ResourceInfoBoxType = {};
 
@@ -27,7 +28,7 @@ export default function ResourceInfoBox({}: ResourceInfoBoxType) {
                 Resource Information
             </AlertTitle>
             <AlertDescription className="mt-4">
-                <InfoSections cols={3}>
+                <InfoSections cols={4}>
                     {resource.http ? (
                         <>
                             <InfoSection>
@@ -88,6 +89,12 @@ export default function ResourceInfoBox({}: ResourceInfoBoxType) {
                             </InfoSection>
                         </>
                     )}
+                    <InfoSection>
+                        <InfoSectionTitle>Visibilty</InfoSectionTitle>
+                        <InfoSectionContent>
+                            <span>{resource.enabled ? "Enabled" : "Disabled"}</span>
+                        </InfoSectionContent>
+                    </InfoSection>
                 </InfoSections>
             </AlertDescription>
         </Alert>

src/app/[orgId]/settings/resources/[resourceId]/general/page.tsx

@@ -60,7 +60,11 @@ import {
     SelectTrigger,
     SelectValue
 } from "@app/components/ui/select";
-import { UpdateResourceResponse } from "@server/routers/resource";
+import {
+    UpdateResourceResponse,
+    updateResourceRule
+} from "@server/routers/resource";
+import { SwitchInput } from "@app/components/SwitchInput";
 
 const GeneralFormSchema = z
     .object({
@@ -275,9 +279,52 @@ export default function GeneralForm() {
         setTransferLoading(false);
     }
 
+    async function toggleResourceEnabled(val: boolean) {
+        const res = await api
+            .post<AxiosResponse<UpdateResourceResponse>>(
+                `resource/${resource.resourceId}`,
+                {
+                    enabled: val
+                }
+            )
+            .catch((e) => {
+                toast({
+                    variant: "destructive",
+                    title: "Failed to toggle resource",
+                    description: formatAxiosError(
+                        e,
+                        "An error occurred while updating the resource"
+                    )
+                });
+            });
+
+        updateResource({
+            enabled: val
+        });
+    }
+
     return (
         !loadingPage && (
             <SettingsContainer>
+                <SettingsSection>
+                    <SettingsSectionHeader>
+                        <SettingsSectionTitle>Visibility</SettingsSectionTitle>
+                        <SettingsSectionDescription>
+                            Completely enable or disable resource visibility
+                        </SettingsSectionDescription>
+                    </SettingsSectionHeader>
+                    <SettingsSectionBody>
+                        <SwitchInput
+                            id="enable-resource"
+                            label="Enable Resource"
+                            defaultChecked={resource.enabled}
+                            onCheckedChange={async (val) => {
+                                await toggleResourceEnabled(val);
+                            }}
+                        />
+                    </SettingsSectionBody>
+                </SettingsSection>
+
                 <SettingsSection>
                     <SettingsSectionHeader>
                         <SettingsSectionTitle>

src/app/[orgId]/settings/resources/page.tsx

@@ -63,7 +63,8 @@ export default async function ResourcesPage(props: ResourcesPageProps) {
                     resource.pincodeId !== null ||
                     resource.whitelist
                   ? "protected"
-                  : "not_protected"
+                  : "not_protected",
+            enabled: resource.enabled
         };
     });