From 04abf4f5160af6637814b969a258eb419f7a9144 Mon Sep 17 00:00:00 2001
From: Steven Le <s@blinkk.com>
Date: Mon, 6 May 2024 11:20:31 -0700
Subject: [PATCH] feat: add "preview" button to data sources (#316)

---
 .changeset/khaki-turkeys-laugh.md             |  5 +++
 examples/blog/root-cms.d.ts                   |  2 +-
 .../DataSourceForm/DataSourceForm.tsx         | 10 +++++
 .../pages/DataSourcePage/DataSourcePage.css   |  6 +++
 .../pages/DataSourcePage/DataSourcePage.tsx   | 43 ++++++++++++-------
 packages/root-cms/ui/utils/data-source.ts     |  1 +
 6 files changed, 51 insertions(+), 16 deletions(-)
 create mode 100644 .changeset/khaki-turkeys-laugh.md

diff --git a/.changeset/khaki-turkeys-laugh.md b/.changeset/khaki-turkeys-laugh.md
new file mode 100644
index 00000000..fcc1cb6f
--- /dev/null
+++ b/.changeset/khaki-turkeys-laugh.md
@@ -0,0 +1,5 @@
+---
+'@blinkk/root-cms': patch
+---
+
+feat: add "preview" button to data sources
diff --git a/examples/blog/root-cms.d.ts b/examples/blog/root-cms.d.ts
index dd4c7d89..ea0a4371 100644
--- a/examples/blog/root-cms.d.ts
+++ b/examples/blog/root-cms.d.ts
@@ -9,7 +9,7 @@ export interface RootCMSImage {
 
 export type RootCMSOneOf<T = any> = T & {
   _type: string;
-}
+};
 
 export interface RootCMSRichTextBlock {
   type: string;
diff --git a/packages/root-cms/ui/components/DataSourceForm/DataSourceForm.tsx b/packages/root-cms/ui/components/DataSourceForm/DataSourceForm.tsx
index 47a71dbd..e63964e8 100644
--- a/packages/root-cms/ui/components/DataSourceForm/DataSourceForm.tsx
+++ b/packages/root-cms/ui/components/DataSourceForm/DataSourceForm.tsx
@@ -104,6 +104,7 @@ export function DataSourceForm(props: DataSourceFormProps) {
       description: getValue('description'),
       type: dataSourceType,
       url: url,
+      previewUrl: getValue('previewUrl'),
     };
 
     if (dataSourceType === 'http') {
@@ -297,6 +298,15 @@ export function DataSourceForm(props: DataSourceFormProps) {
           )}
         </div>
       )}
+      <TextInput
+        className="DataSourceForm__input"
+        name="previewUrl"
+        label="Preview URL"
+        description="URL where users can preview the data source."
+        size="xs"
+        radius={0}
+        value={dataSource?.previewUrl}
+      />
       <Button
         className="DataSourceForm__submit"
         color="blue"
diff --git a/packages/root-cms/ui/pages/DataSourcePage/DataSourcePage.css b/packages/root-cms/ui/pages/DataSourcePage/DataSourcePage.css
index 6fcd01ef..5654a3fa 100644
--- a/packages/root-cms/ui/pages/DataSourcePage/DataSourcePage.css
+++ b/packages/root-cms/ui/pages/DataSourcePage/DataSourcePage.css
@@ -64,6 +64,12 @@
   gap: 12px;
 }
 
+.DataSourcePage__DataSection__header__actions {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+}
+
 .DataSourcePage__DataTable__table td {
   max-width: 400px;
   overflow: hidden;
diff --git a/packages/root-cms/ui/pages/DataSourcePage/DataSourcePage.tsx b/packages/root-cms/ui/pages/DataSourcePage/DataSourcePage.tsx
index 62667a00..fc03c51c 100644
--- a/packages/root-cms/ui/pages/DataSourcePage/DataSourcePage.tsx
+++ b/packages/root-cms/ui/pages/DataSourcePage/DataSourcePage.tsx
@@ -1,6 +1,7 @@
 import {
   ActionIcon,
   Breadcrumbs,
+  Button,
   JsonInput,
   Loader,
   Table,
@@ -136,7 +137,8 @@ DataSourcePage.DataSection = (props: {
   dataSource: DataSource;
   data: DataSourceData;
 }) => {
-  const {data, dataSource} = props.data || {};
+  const {data} = props.data || {};
+  const dataSource = props.dataSource;
 
   if (!data) {
     return null;
@@ -191,21 +193,32 @@ DataSourcePage.DataSectionWrap = (props: {
     <div className="DataSourcePage__DataSection">
       <div className="DataSourcePage__DataSection__header">
         <Heading size="h2">Data</Heading>
-        {props.dataSource.url?.startsWith(
-          'https://docs.google.com/spreadsheets/'
-        ) && (
-          <Tooltip label="Open spreadsheet">
-            <ActionIcon<'a'>
-              component="a"
-              href={props.dataSource.url}
-              target="_blank"
-              variant="filled"
-              color="green"
+        <div className="DataSourcePage__DataSection__header__actions">
+          {props.dataSource.url?.startsWith(
+            'https://docs.google.com/spreadsheets/'
+          ) && (
+            <Tooltip label="Open spreadsheet">
+              <ActionIcon<'a'>
+                component="a"
+                href={props.dataSource.url}
+                target="_blank"
+                variant="filled"
+                color="green"
+              >
+                <IconTable size={16} stroke="2.25" />
+              </ActionIcon>
+            </Tooltip>
+          )}
+          {props.dataSource.previewUrl && (
+            <Button
+              variant="default"
+              size="xs"
+              href={props.dataSource.previewUrl}
             >
-              <IconTable size={16} stroke="2.25" />
-            </ActionIcon>
-          </Tooltip>
-        )}
+              Preview
+            </Button>
+          )}
+        </div>
       </div>
       {props.children}
     </div>
diff --git a/packages/root-cms/ui/utils/data-source.ts b/packages/root-cms/ui/utils/data-source.ts
index ee055bc2..e7e9ee0c 100644
--- a/packages/root-cms/ui/utils/data-source.ts
+++ b/packages/root-cms/ui/utils/data-source.ts
@@ -36,6 +36,7 @@ export interface DataSource {
     headers?: Record<string, string>;
     body?: string;
   };
+  previewUrl?: string;
   createdAt: Timestamp;
   createdBy: string;
   syncedAt?: Timestamp;