feat: cname in row (#22329)

* feat: cname in row * code snippet * polish
PostHog · May 16, 2024 · 7446568 · 7446568
1 parent 236891c
commit 7446568
Show file tree

Hide file tree

Showing 3 changed files with 51 additions and 15 deletions.
diff --git a/frontend/src/scenes/settings/project/Proxy.tsx b/frontend/src/scenes/settings/project/Proxy.tsx
@@ -6,6 +6,7 @@ import {
     LemonMenu,
     LemonTable,
     LemonTableColumns,
+    LemonTabs,
     Spinner,
     Tooltip,
 } from '@posthog/lemon-ui'
@@ -20,7 +21,7 @@ import { proxyLogic, ProxyRecord } from './proxyLogic'
 
 export function Proxy(): JSX.Element {
     const { isCloudOrDev } = useValues(preflightLogic)
-    const { formState, proxyRecords } = useValues(proxyLogic)
+    const { formState, proxyRecords, proxyRecordsLoading } = useValues(proxyLogic)
     const { showForm, deleteRecord } = useActions(proxyLogic)
 
     if (!isCloudOrDev) {
@@ -63,7 +64,9 @@ export function Proxy(): JSX.Element {
             },
         },
         {
-            title: 'Actions',
+            title: <span className="h-5" />,
+            width: 20,
+            className: 'flex justify-center',
             render: function Render(_, { id, status }) {
                 return (
                     status != 'deleting' && (
@@ -76,7 +79,7 @@ export function Proxy(): JSX.Element {
                                 },
                             ]}
                         >
-                            <LemonButton size="xsmall" icon={<IconEllipsis />} />
+                            <LemonButton size="small" icon={<IconEllipsis className="text-muted" />} />
                         </LemonMenu>
                     )
                 )
@@ -86,7 +89,14 @@ export function Proxy(): JSX.Element {
 
     return (
         <div className="space-y-2">
-            <LemonTable columns={columns} dataSource={proxyRecords} />
+            <LemonTable
+                loading={proxyRecords.length === 0 && proxyRecordsLoading}
+                columns={columns}
+                dataSource={proxyRecords}
+                expandable={{
+                    expandedRowRender: (record) => <ExpandedRow record={record} />,
+                }}
+            />
             {formState === 'collapsed' ? (
                 <LemonButton onClick={showForm} type="secondary" icon={<IconPlus />}>
                     Add domain
@@ -98,14 +108,36 @@ export function Proxy(): JSX.Element {
     )
 }
 
+const ExpandedRow = ({ record }: { record: ProxyRecord }): JSX.Element => {
+    return (
+        <div className="pb-4 pr-4">
+            <LemonTabs
+                size="small"
+                activeKey="cname"
+                tabs={[
+                    {
+                        label: 'CNAME',
+                        key: 'cname',
+                        content: (
+                            <CodeSnippet key={record.id} language={Language.HTTP}>
+                                {record.target_cname}
+                            </CodeSnippet>
+                        ),
+                    },
+                ]}
+            />
+        </div>
+    )
+}
+
 function CreateRecordForm(): JSX.Element {
     const { formState, proxyRecordsLoading, proxyRecords } = useValues(proxyLogic)
     const { collapseForm } = useActions(proxyLogic)
 
     const waitingRecords = proxyRecords.filter((r) => r.status === 'waiting')
 
     return (
-        <div className="bg-bg-light rounded border p-2 space-y-2">
+        <div className="bg-bg-light rounded border px-5 py-4 space-y-2">
             {formState == 'active' ? (
                 <Form logic={proxyLogic} formKey="createRecord" enableFormOnSubmit className="w-full space-y-2">
                     <LemonField name="domain">
@@ -140,9 +172,12 @@ function CreateRecordForm(): JSX.Element {
                         You need to set the following <b>CNAME</b> records in your DNS provider:
                     </div>
                     {waitingRecords.map((r) => (
-                        <CodeSnippet key={r.id} language={Language.HTTP}>
-                            {r.domain + ' -> ' + r.target_cname}
-                        </CodeSnippet>
+                        <div key={r.id} className="space-y-1">
+                            <span className="font-semibold">{r.domain}</span>
+                            <CodeSnippet key={r.id} language={Language.HTTP}>
+                                {r.target_cname}
+                            </CodeSnippet>
+                        </div>
                     ))}
                     <div className="flex justify-end">
                         <LemonButton onClick={collapseForm} type="primary">

diff --git a/frontend/src/scenes/settings/project/proxyLogic.ts b/frontend/src/scenes/settings/project/proxyLogic.ts
@@ -46,10 +46,12 @@ export const proxyLogic = kea<proxyLogicType>([
                 return response
             },
             deleteRecord: async (id: ProxyRecord['id']) => {
-                const response = await api.delete(
-                    `api/organizations/${values.currentOrganization?.id}/proxy_records/${id}`
-                )
-                return response
+                void api.delete(`api/organizations/${values.currentOrganization?.id}/proxy_records/${id}`)
+                const newRecords = [...values.proxyRecords].map((r) => ({
+                    ...r,
+                    status: r.id === id ? 'deleting' : r.status,
+                }))
+                return newRecords
             },
         },
     })),

diff --git a/posthog/api/proxy_record.py b/posthog/api/proxy_record.py
@@ -55,14 +55,13 @@ def create(self, request, *args, **kwargs):
         return Response(serializer.data)
 
     def destroy(self, request, *args, pk=None, **kwargs):
-        queryset = self.organization.proxy_records.order_by("-created_at")
-        record = queryset.get(id=pk)
+        record = self.organization.proxy_records.get(id=pk)
 
         if record and record.status in (ProxyRecord.Status.WAITING, ProxyRecord.Status.ERRORING):
             record.delete()
         elif record:
             record.status = ProxyRecord.Status.DELETING
             record.save()
 
-        serializer = self.get_serializer(queryset, many=True)
+        serializer = self.get_serializer(record)
         return Response(serializer.data)