feat: add "preview" button to data sources (#316)

blinkk · May 6, 2024 · 04abf4f · 04abf4f
1 parent 6aa2fc4
commit 04abf4f
Show file tree

Hide file tree

Showing 6 changed files with 51 additions and 16 deletions.
diff --git a/.changeset/khaki-turkeys-laugh.md 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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -36,6 +36,7 @@ export interface DataSource {
     headers?: Record<string, string>;
     body?: string;
   };
+  previewUrl?: string;
   createdAt: Timestamp;
   createdBy: string;
   syncedAt?: Timestamp;