From 810d2eba02ef03f1839d348385dbc3b3fb2d4681 Mon Sep 17 00:00:00 2001
From: jingsam <jing-sam@qq.com>
Date: Tue, 10 Sep 2024 17:52:09 +0800
Subject: [PATCH] feat: add gis features

---
 .../Database/ProtectedSchemaWarning.tsx       |   4 +-
 .../interfaces/GIS/Features/FeatureList.tsx   | 115 ++++++++++++++++
 .../interfaces/GIS/Features/FeaturesList.tsx  | 124 ++++++++++++++++++
 .../interfaces/GIS/Tiles/TileList.tsx         |  13 +-
 .../interfaces/GIS/Tiles/TilesList.tsx        |  21 ++-
 .../studio/components/interfaces/GIS/index.ts |   3 +-
 .../TableEditorLayout/TableEditorMenu.tsx     |   2 +-
 apps/studio/data/gis/gis-features-query.ts    |  43 ++++++
 ...gis-tiles-query.tsx => gis-tiles-query.ts} |   0
 apps/studio/data/gis/keys.ts                  |   2 +
 apps/studio/pages/api/gis/[ref]/features.ts   |  33 +++++
 .../pages/project/[ref]/gis/features.tsx      |   2 +
 12 files changed, 346 insertions(+), 16 deletions(-)
 create mode 100644 apps/studio/components/interfaces/GIS/Features/FeatureList.tsx
 create mode 100644 apps/studio/components/interfaces/GIS/Features/FeaturesList.tsx
 create mode 100644 apps/studio/data/gis/gis-features-query.ts
 rename apps/studio/data/gis/{gis-tiles-query.tsx => gis-tiles-query.ts} (100%)
 create mode 100644 apps/studio/pages/api/gis/[ref]/features.ts

diff --git a/apps/studio/components/interfaces/Database/ProtectedSchemaWarning.tsx b/apps/studio/components/interfaces/Database/ProtectedSchemaWarning.tsx
index a8c16d4a416b2..610c3612f2ab7 100644
--- a/apps/studio/components/interfaces/Database/ProtectedSchemaWarning.tsx
+++ b/apps/studio/components/interfaces/Database/ProtectedSchemaWarning.tsx
@@ -33,7 +33,7 @@ export const ProtectedSchemaModal = ({
     >
       <Modal.Content className="space-y-2">
         <p className="text-sm">
-          以下模式由系统管理，当前被设置为只读，无法通过表编辑器进行编辑。
+          以下模式由系统管理，当前被设置为只读，无法通过本界面进行编辑。
         </p>
         <div className="flex flex-wrap gap-1">
           {EXCLUDED_SCHEMAS.map((schema) => (
@@ -63,7 +63,7 @@ const ProtectedSchemaWarning = ({ schema, entity }: { schema: string; entity: st
         <AlertTitle_Shadcn_>当前正在一个受保护的模式下查看{entity}</AlertTitle_Shadcn_>
         <AlertDescription_Shadcn_>
           <p className="mb-2">
-            模式 <code className="text-xs">{schema}</code> 是由系统管理的，当前被设置为只读，无法通过表编辑器进行编辑。
+            模式 <code className="text-xs">{schema}</code> 是由系统管理的，当前被设置为只读，无法通过本界面进行编辑。
           </p>
           <Button type="default" size="tiny" onClick={() => setShowModal(true)}>
             了解更多
diff --git a/apps/studio/components/interfaces/GIS/Features/FeatureList.tsx b/apps/studio/components/interfaces/GIS/Features/FeatureList.tsx
new file mode 100644
index 0000000000000..b5393d773fd26
--- /dev/null
+++ b/apps/studio/components/interfaces/GIS/Features/FeatureList.tsx
@@ -0,0 +1,115 @@
+import { includes, sortBy } from 'lodash'
+import { useRouter } from 'next/router'
+import Link from 'next/link'
+
+import { useProjectContext } from 'components/layouts/ProjectLayout/ProjectContext'
+import Table from 'components/to-be-cleaned/Table'
+import { useProjectApiQuery } from 'data/config/project-api-query'
+import { useGISFeaturesQuery } from 'data/gis/gis-features-query'
+import { ArrowUpRight } from 'lucide-react'
+import { Button } from 'ui'
+
+interface FeatureListProps {
+  schema: string
+  filterString: string
+}
+
+const FeatureList = ({
+  schema,
+  filterString,
+}: FeatureListProps) => {
+  const router = useRouter()
+  const { project: selectedProject } = useProjectContext()
+
+  const { data: features } = useGISFeaturesQuery({
+    projectRef: selectedProject?.ref
+  })
+
+  const filteredFeatures = (features ?? []).filter((x) =>
+    includes(x.id.toLowerCase(), filterString.toLowerCase())
+  )
+  const _features = sortBy(
+    filteredFeatures.filter((x) => x.id.startsWith(schema)),
+    (feature) => feature.id.toLocaleLowerCase()
+  )
+
+  const { data, error } = useProjectApiQuery({ projectRef: selectedProject?.ref })
+  const { protocol, endpoint } = data?.autoApiService ?? {}
+  const apiUrl = endpoint ? `${protocol ?? 'http'}://${endpoint}` : undefined
+
+  if (error) {
+    return (
+      <div className="p-6 mx-auto text-center sm:w-full md:w-3/4">
+        <p className="text-foreground-light">
+          <p>连接到 API 出错</p>
+          <p>{`${error}`}</p>
+        </p>
+      </div>
+    )
+  }
+
+  if (_features.length === 0 && filterString.length === 0) {
+    return (
+      <Table.tr key={schema}>
+        <Table.td colSpan={3}>
+          <p className="text-sm text-foreground">未找到要素服务</p>
+          <p className="text-sm text-foreground-light">
+            在模式 "{schema}" 中未找到要素服务
+          </p>
+        </Table.td>
+      </Table.tr>
+    )
+  }
+
+  if (_features.length === 0 && filterString.length > 0) {
+    return (
+      <Table.tr key={schema}>
+        <Table.td colSpan={3}>
+          <p className="text-sm text-foreground">未找到结果</p>
+          <p className="text-sm text-foreground-light">
+            您搜索的 "{filterString}" 没有返回任何结果
+          </p>
+        </Table.td>
+      </Table.tr>
+    )
+  }
+
+  return (
+    <>
+      {_features.map((x) => {
+        return (
+          <Table.tr key={x.id}>
+            <Table.td className="truncate">
+              <p title={x.id}>{x.id}</p>
+            </Table.td>
+            <Table.td className="hidden md:table-cell md:overflow-auto">
+              {x.description ? (
+                <span className="lg:max-w-48 truncate inline-block" title={x.description}>
+                  {x.description}
+                </span>
+              ) : (
+                <p className="text-border-stronger">无描述信息</p>
+              )}
+            </Table.td>
+            <Table.td className="w-1/5">
+              <div className="flex justify-end items-center space-x-2">
+                <Button asChild type="default" iconRight={<ArrowUpRight strokeWidth={1} />}>
+                  <Link href={`${apiUrl}/pg_featureserv/collections/${x.id}.json`} target="_blank">
+                    元数据
+                  </Link>
+                </Button>
+                <Button asChild type="default" iconRight={<ArrowUpRight strokeWidth={1} />}>
+                  <Link href={`${apiUrl}/pg_featureserv/collections/${x.id}/items.html`} target="_blank">
+                    查看
+                  </Link>
+                </Button>
+              </div>
+            </Table.td>
+          </Table.tr>
+        )
+      })}
+    </>
+  )
+}
+
+export default FeatureList
diff --git a/apps/studio/components/interfaces/GIS/Features/FeaturesList.tsx b/apps/studio/components/interfaces/GIS/Features/FeaturesList.tsx
new file mode 100644
index 0000000000000..cbff20fd02922
--- /dev/null
+++ b/apps/studio/components/interfaces/GIS/Features/FeaturesList.tsx
@@ -0,0 +1,124 @@
+import { Search } from 'lucide-react'
+import { partition } from 'lodash'
+import { useRouter } from 'next/router'
+
+import { useParams } from 'common'
+import { useProjectContext } from 'components/layouts/ProjectLayout/ProjectContext'
+import ProductEmptyState from 'components/to-be-cleaned/ProductEmptyState'
+import Table from 'components/to-be-cleaned/Table'
+import AlertError from 'components/ui/AlertError'
+import SchemaSelector from 'components/ui/SchemaSelector'
+import { GenericSkeletonLoader } from 'components/ui/ShimmeringLoader'
+import { useGISFeaturesQuery } from 'data/gis/gis-features-query'
+import { useSchemasQuery } from 'data/database/schemas-query'
+import { useQuerySchemaState } from 'hooks/misc/useSchemaQueryState'
+import { EXCLUDED_SCHEMAS } from 'lib/constants/schemas'
+import { Input } from 'ui'
+import ProtectedSchemaWarning from 'components/interfaces/Database/ProtectedSchemaWarning'
+import FeatureList from './FeatureList'
+
+const FeaturesList = () => {
+  const { project } = useProjectContext()
+  const router = useRouter()
+  const { search } = useParams()
+  const { selectedSchema, setSelectedSchema } = useQuerySchemaState()
+  const filterString = search ?? ''
+
+  const setFilterString = (str: string) => {
+    const url = new URL(document.URL)
+    if (str === '') {
+      url.searchParams.delete('search')
+    } else {
+      url.searchParams.set('search', str)
+    }
+    router.push(url)
+  }
+
+  const { data: schemas } = useSchemasQuery({
+    projectRef: project?.ref,
+    connectionString: project?.connectionString,
+  })
+  const [protectedSchemas] = partition(schemas ?? [], (schema) =>
+    EXCLUDED_SCHEMAS.includes(schema?.name ?? '')
+  )
+  const foundSchema = schemas?.find((schema) => schema.name === selectedSchema)
+  const isLocked = protectedSchemas.some((s) => s.id === foundSchema?.id)
+
+  const {
+    data: features,
+    error,
+    isLoading,
+    isError,
+  } = useGISFeaturesQuery({
+    projectRef: project?.ref,
+  })
+
+  if (isLoading) return <GenericSkeletonLoader />
+  if (isError) return <AlertError error={error} subject="获取要素服务列表失败" />
+
+  return (
+    <>
+      {(features ?? []).length == 0 ? (
+        <div className="flex h-full w-full items-center justify-center">
+          <ProductEmptyState
+            title="要素服务"
+          >
+            <p className="text-sm text-foreground-light">
+              要素服务是基于数据库的矢量数据服务，用户可以查询和获取空间要素。
+            </p>
+          </ProductEmptyState>
+        </div>
+      ) : (
+        <div className="w-full space-y-4">
+          <div className="flex items-center justify-between">
+            <div className="flex items-center space-x-4">
+              <SchemaSelector
+                className="w-[260px]"
+                size="small"
+                showError={false}
+                selectedSchemaName={selectedSchema}
+                onSelectSchema={(schema) => {
+                  const url = new URL(document.URL)
+                  url.searchParams.delete('search')
+                  router.push(url)
+                  setSelectedSchema(schema)
+                }}
+              />
+              <Input
+                placeholder="查找要素服务"
+                size="small"
+                icon={<Search size={14} />}
+                value={filterString}
+                className="w-64"
+                onChange={(e) => setFilterString(e.target.value)}
+              />
+            </div>
+          </div>
+
+          {isLocked && <ProtectedSchemaWarning schema={selectedSchema} entity="要素服务" />}
+
+          <Table
+            className="table-fixed"
+            head={
+              <>
+                <Table.th key="id">服务 ID</Table.th>
+                <Table.th key="description" className="hidden md:table-cell">
+                  服务描述
+                </Table.th>
+                <Table.th key="buttons" className="w-1/5"></Table.th>
+              </>
+            }
+            body={
+              <FeatureList
+                schema={selectedSchema}
+                filterString={filterString}
+              />
+            }
+          />
+        </div>
+      )}
+    </>
+  )
+}
+
+export default FeaturesList
diff --git a/apps/studio/components/interfaces/GIS/Tiles/TileList.tsx b/apps/studio/components/interfaces/GIS/Tiles/TileList.tsx
index 637ae0106ffdb..8f8e0bc6fa23d 100644
--- a/apps/studio/components/interfaces/GIS/Tiles/TileList.tsx
+++ b/apps/studio/components/interfaces/GIS/Tiles/TileList.tsx
@@ -30,7 +30,7 @@ const TileList = ({
   )
   const _tiles = sortBy(
     filteredTiles.filter((x) => x.schema == schema),
-    (func) => func.name.toLocaleLowerCase()
+    (tile) => tile.name.toLocaleLowerCase()
   )
 
   const { data, error } = useProjectApiQuery({ projectRef: selectedProject?.ref })
@@ -51,7 +51,7 @@ const TileList = ({
   if (_tiles.length === 0 && filterString.length === 0) {
     return (
       <Table.tr key={schema}>
-        <Table.td colSpan={5}>
+        <Table.td colSpan={3}>
           <p className="text-sm text-foreground">未找到瓦片服务</p>
           <p className="text-sm text-foreground-light">
             在模式 "{schema}" 中未找到瓦片服务
@@ -64,7 +64,7 @@ const TileList = ({
   if (_tiles.length === 0 && filterString.length > 0) {
     return (
       <Table.tr key={schema}>
-        <Table.td colSpan={5}>
+        <Table.td colSpan={3}>
           <p className="text-sm text-foreground">未找到结果</p>
           <p className="text-sm text-foreground-light">
             您搜索的 "{filterString}" 没有返回任何结果
@@ -91,19 +91,16 @@ const TileList = ({
                 <p className="text-border-stronger">无描述信息</p>
               )}
             </Table.td>
-            <Table.td className="hidden lg:table-cell w-[120px]">
-              <p title={x.type}>{x.type}</p>
-            </Table.td>
             <Table.td className="w-1/5">
               <div className="flex justify-end items-center space-x-2">
                 <Button asChild type="default" iconRight={<ArrowUpRight strokeWidth={1} />}>
                   <Link href={`${apiUrl}/pg_tileserv/${x.id}.json`} target="_blank">
-                    详情
+                    元数据
                   </Link>
                 </Button>
                 <Button asChild type="default" iconRight={<ArrowUpRight strokeWidth={1} />}>
                   <Link href={`${apiUrl}/pg_tileserv/${x.id}.html`} target="_blank">
-                    预览
+                    查看
                   </Link>
                 </Button>
               </div>
diff --git a/apps/studio/components/interfaces/GIS/Tiles/TilesList.tsx b/apps/studio/components/interfaces/GIS/Tiles/TilesList.tsx
index 0de914d9d8b5d..9a3c0e240c464 100644
--- a/apps/studio/components/interfaces/GIS/Tiles/TilesList.tsx
+++ b/apps/studio/components/interfaces/GIS/Tiles/TilesList.tsx
@@ -1,4 +1,5 @@
 import { Search } from 'lucide-react'
+import { partition } from 'lodash'
 import { useRouter } from 'next/router'
 
 import { useParams } from 'common'
@@ -9,8 +10,11 @@ import AlertError from 'components/ui/AlertError'
 import SchemaSelector from 'components/ui/SchemaSelector'
 import { GenericSkeletonLoader } from 'components/ui/ShimmeringLoader'
 import { useGISTilesQuery } from 'data/gis/gis-tiles-query'
+import { useSchemasQuery } from 'data/database/schemas-query'
 import { useQuerySchemaState } from 'hooks/misc/useSchemaQueryState'
+import { EXCLUDED_SCHEMAS } from 'lib/constants/schemas'
 import { Input } from 'ui'
+import ProtectedSchemaWarning from 'components/interfaces/Database/ProtectedSchemaWarning'
 import TileList from './TileList'
 
 const TilesList = () => {
@@ -30,6 +34,16 @@ const TilesList = () => {
     router.push(url)
   }
 
+  const { data: schemas } = useSchemasQuery({
+    projectRef: project?.ref,
+    connectionString: project?.connectionString,
+  })
+  const [protectedSchemas] = partition(schemas ?? [], (schema) =>
+    EXCLUDED_SCHEMAS.includes(schema?.name ?? '')
+  )
+  const foundSchema = schemas?.find((schema) => schema.name === selectedSchema)
+  const isLocked = protectedSchemas.some((s) => s.id === foundSchema?.id)
+
   const {
     data: tiles,
     error,
@@ -81,17 +95,16 @@ const TilesList = () => {
             </div>
           </div>
 
+          {isLocked && <ProtectedSchemaWarning schema={selectedSchema} entity="瓦片服务" />}
+
           <Table
             className="table-fixed"
             head={
               <>
-                <Table.th key="id">服务名称</Table.th>
+                <Table.th key="id">服务 ID</Table.th>
                 <Table.th key="description" className="hidden md:table-cell">
                   服务描述
                 </Table.th>
-                <Table.th key="type" className="hidden lg:table-cell w-[120px]">
-                  数据源类型
-                </Table.th>
                 <Table.th key="buttons" className="w-1/5"></Table.th>
               </>
             }
diff --git a/apps/studio/components/interfaces/GIS/index.ts b/apps/studio/components/interfaces/GIS/index.ts
index 92871071cd8d2..7dab982b2db8c 100644
--- a/apps/studio/components/interfaces/GIS/index.ts
+++ b/apps/studio/components/interfaces/GIS/index.ts
@@ -1 +1,2 @@
-export { default as TilesList } from './Tiles/TilesList'
\ No newline at end of file
+export { default as TilesList } from './Tiles/TilesList'
+export { default as FeaturesList } from './Features/FeaturesList'
\ No newline at end of file
diff --git a/apps/studio/components/layouts/TableEditorLayout/TableEditorMenu.tsx b/apps/studio/components/layouts/TableEditorLayout/TableEditorMenu.tsx
index f90023185471d..18f236678a011 100644
--- a/apps/studio/components/layouts/TableEditorLayout/TableEditorMenu.tsx
+++ b/apps/studio/components/layouts/TableEditorLayout/TableEditorMenu.tsx
@@ -157,7 +157,7 @@ const TableEditorMenu = () => {
                 </AlertTitle_Shadcn_>
                 <AlertDescription_Shadcn_ className="text-xs">
                   <p className="mb-2">
-                    此模式是系统模式，在表编辑器中只读
+                    此模式是系统模式，在本界面中执行只读操作
                   </p>
                   <Button type="default" size="tiny" onClick={() => setShowModal(true)}>
                     了解更多
diff --git a/apps/studio/data/gis/gis-features-query.ts b/apps/studio/data/gis/gis-features-query.ts
new file mode 100644
index 0000000000000..3f4e154dbd28e
--- /dev/null
+++ b/apps/studio/data/gis/gis-features-query.ts
@@ -0,0 +1,43 @@
+import { UseQueryOptions, useQuery } from '@tanstack/react-query'
+import { get } from 'lib/common/fetch'
+import { handleError } from 'data/fetchers'
+import type { ResponseError } from 'types'
+import { GISKeys } from './keys'
+
+export type GISFeaturesVariables = { projectRef?: string }
+
+export type Feature = {
+  id: string
+  title: string
+  description: string
+  extent: object
+  links: Array<object>
+}
+
+export async function getGISFeatures({ projectRef }: GISFeaturesVariables, signal?: AbortSignal) {
+  if (!projectRef) throw new Error('projectRef is required')
+
+  const response = await get(`/api/gis/${projectRef}/features`, {
+    signal,
+  })
+
+  if (response.error) handleError(response.error)
+
+  return response.collections as Feature[]
+}
+
+export type GISFeaturesData = Awaited<ReturnType<typeof getGISFeatures>>
+export type GISFeaturesError = ResponseError
+
+export const useGISFeaturesQuery = <TData = GISFeaturesData,>(
+  { projectRef }: GISFeaturesVariables,
+  { enabled = true, ...options }: UseQueryOptions<GISFeaturesData, GISFeaturesError, TData> = {}
+) =>
+  useQuery<GISFeaturesData, GISFeaturesError, TData>(
+    GISKeys.listFeatures(projectRef),
+    ({ signal }) => getGISFeatures({ projectRef }, signal),
+    {
+      enabled: enabled && typeof projectRef !== 'undefined',
+      ...options,
+    }
+  )
diff --git a/apps/studio/data/gis/gis-tiles-query.tsx b/apps/studio/data/gis/gis-tiles-query.ts
similarity index 100%
rename from apps/studio/data/gis/gis-tiles-query.tsx
rename to apps/studio/data/gis/gis-tiles-query.ts
diff --git a/apps/studio/data/gis/keys.ts b/apps/studio/data/gis/keys.ts
index a11aef663207c..983dedbf5589e 100644
--- a/apps/studio/data/gis/keys.ts
+++ b/apps/studio/data/gis/keys.ts
@@ -1,4 +1,6 @@
 export const GISKeys = {
   listTiles: (projectRef: string | undefined) =>
     ['projects', projectRef, 'gis-tiles'] as const,
+  listFeatures: (projectRef: string | undefined) =>
+    ['projects', projectRef, 'gis-features'] as const,
 }
diff --git a/apps/studio/pages/api/gis/[ref]/features.ts b/apps/studio/pages/api/gis/[ref]/features.ts
new file mode 100644
index 0000000000000..ecb679a495528
--- /dev/null
+++ b/apps/studio/pages/api/gis/[ref]/features.ts
@@ -0,0 +1,33 @@
+import { NextApiRequest, NextApiResponse } from 'next'
+
+import apiWrapper from 'lib/api/apiWrapper'
+import { get } from 'lib/common/fetch'
+import { constructHeaders } from 'lib/api/apiHelpers'
+
+const SUPABASE_URL = process.env.SUPABASE_URL
+
+export default (req: NextApiRequest, res: NextApiResponse) =>
+  apiWrapper(req, res, handler, { withAuth: false })
+
+async function handler(req: NextApiRequest, res: NextApiResponse) {
+  const { method } = req
+
+  switch (method) {
+    case 'GET':
+      return handleGetAll(req, res)
+    default:
+      res.setHeader('Allow', ['GET'])
+      res.status(405).json({ error: { message: `Method ${method} Not Allowed` } })
+  }
+}
+
+const handleGetAll = async (req: NextApiRequest, res: NextApiResponse) => {
+  const headers = constructHeaders(req.headers)
+  let response = await get(`${SUPABASE_URL}/pg_featureserv/collections.json`, {
+    headers,
+  })
+  if (response.error) {
+    return res.status(400).json(response.error)
+  }
+  return res.status(200).json(response)
+}
diff --git a/apps/studio/pages/project/[ref]/gis/features.tsx b/apps/studio/pages/project/[ref]/gis/features.tsx
index cff1cd46bcf89..001dfac493c6b 100644
--- a/apps/studio/pages/project/[ref]/gis/features.tsx
+++ b/apps/studio/pages/project/[ref]/gis/features.tsx
@@ -4,6 +4,7 @@ import GISLayout from 'components/layouts/GISLayout/GISLayout'
 import { FormHeader } from 'components/ui/Forms/FormHeader'
 import { ScaffoldContainer, ScaffoldSection } from 'components/layouts/Scaffold'
 import type { NextPageWithLayout } from 'types'
+import { FeaturesList } from 'components/interfaces/GIS'
 
 const FeaturesPage: NextPageWithLayout = () => {
 
@@ -12,6 +13,7 @@ const FeaturesPage: NextPageWithLayout = () => {
       <ScaffoldSection>
         <div className="col-span-12">
           <FormHeader title="要素服务" />
+          <FeaturesList />
         </div>
       </ScaffoldSection>
     </ScaffoldContainer>