konnossaved.tsx75 lines · main
| 1 | import { useParams } from 'common' |
| 2 | import { Save } from 'lucide-react' |
| 3 | import Link from 'next/link' |
| 4 | import { Loading } from 'ui' |
| 5 | |
| 6 | import LogsSavedQueriesItem from '@/components/interfaces/Settings/Logs/Logs.SavedQueriesItem' |
| 7 | import DefaultLayout from '@/components/layouts/DefaultLayout' |
| 8 | import LogsLayout from '@/components/layouts/LogsLayout/LogsLayout' |
| 9 | import Table from '@/components/to-be-cleaned/Table' |
| 10 | import LogsExplorerHeader from '@/components/ui/Logs/LogsExplorerHeader' |
| 11 | import { useContentQuery } from '@/data/content/content-query' |
| 12 | import type { NextPageWithLayout } from '@/types' |
| 13 | |
| 14 | // [Joshen] This page looks like its not longer in use from a UI POV - double checking and deprecate + add redirects |
| 15 | export const LogsSavedPage: NextPageWithLayout = () => { |
| 16 | const { ref } = useParams() |
| 17 | const { data, isPending: isLoading } = useContentQuery({ |
| 18 | projectRef: ref, |
| 19 | type: 'log_sql', |
| 20 | }) |
| 21 | |
| 22 | if (isLoading) { |
| 23 | return <Loading active={true}>{null}</Loading> |
| 24 | } |
| 25 | |
| 26 | const saved = [...(data?.content ?? [])] |
| 27 | .filter((c) => c.type === 'log_sql') |
| 28 | .sort((a, b) => a.name.localeCompare(b.name)) |
| 29 | |
| 30 | return ( |
| 31 | <div className="mx-auto w-full px-5 py-6 h-full"> |
| 32 | <LogsExplorerHeader subtitle="Saved Queries" /> |
| 33 | {saved.length > 0 && ( |
| 34 | <div className="flex flex-col gap-3 py-6"> |
| 35 | <Table |
| 36 | headTrClasses="expandable-tr" |
| 37 | head={ |
| 38 | <> |
| 39 | <Table.th>Name</Table.th> |
| 40 | <Table.th>Description</Table.th> |
| 41 | <Table.th>Created</Table.th> |
| 42 | <Table.th>Last updated</Table.th> |
| 43 | <Table.th></Table.th> |
| 44 | </> |
| 45 | } |
| 46 | body={saved.map((item) => ( |
| 47 | <LogsSavedQueriesItem key={item.id} item={item} /> |
| 48 | ))} |
| 49 | /> |
| 50 | </div> |
| 51 | )} |
| 52 | {saved.length === 0 && ( |
| 53 | <div className="my-auto flex h-full grow flex-col items-center justify-center gap-1"> |
| 54 | <Save className="animate-bounce" /> |
| 55 | <h3 className="text-lg text-foreground">No Saved Queries Yet</h3> |
| 56 | <p className="text-sm text-foreground-lighter"> |
| 57 | Saved queries will appear here. Queries can be saved from the{' '} |
| 58 | <Link href={`/project/${ref}/logs/explorer`}> |
| 59 | <span className="cursor-pointer font-bold underline">Query</span> |
| 60 | </Link>{' '} |
| 61 | tab. |
| 62 | </p> |
| 63 | </div> |
| 64 | )} |
| 65 | </div> |
| 66 | ) |
| 67 | } |
| 68 | |
| 69 | LogsSavedPage.getLayout = (page) => ( |
| 70 | <DefaultLayout> |
| 71 | <LogsLayout title="Saved">{page}</LogsLayout> |
| 72 | </DefaultLayout> |
| 73 | ) |
| 74 | |
| 75 | export default LogsSavedPage |