Add "Code" badge to code-configured data sources (#264)

* Add "Code" badge to code-configured data sources * Add tooltip
Automattic · Dec 27, 2024 · 534f12f · 534f12f
1 parent 5e9a8e2
commit 534f12f
Show file tree

Hide file tree

Showing 3 changed files with 87 additions and 41 deletions.
diff --git a/src/data-sources/DataSourceList.scss b/src/data-sources/DataSourceList.scss
@@ -51,7 +51,6 @@ table.data-source-list {
 	}
 }
 
-
 .data-source-actions {
 
 	button.components-button {
@@ -67,3 +66,12 @@ table.data-source-list {
 	}
 }
 
+.data-source-badge {
+	background-color: rgba(56, 88, 233, 0.04);
+	border-radius: 4px;
+	display: inline-block;
+	font-weight: 500;
+	margin: 0 8px 0 -8px;
+	padding: 4px 8px;
+	vertical-align: baseline;
+}
diff --git a/src/data-sources/DataSourceList.tsx b/src/data-sources/DataSourceList.tsx
@@ -13,10 +13,11 @@ import {
 } from '@wordpress/dataviews/wp';
 import { useState } from '@wordpress/element';
 import { __, sprintf } from '@wordpress/i18n';
-import { chevronRightSmall, info } from '@wordpress/icons';
+import { info } from '@wordpress/icons';
 import { store as noticesStore, NoticeStoreActions, WPNotice } from '@wordpress/notices';
 
 import { SUPPORTED_SERVICES, SUPPORTED_SERVICES_LABELS } from './constants';
+import DataSourceMetaTags from '@/data-sources/DataSourceMetaTags';
 import { useDataSources } from '@/data-sources/hooks/useDataSources';
 import { DataSourceConfig } from '@/data-sources/types';
 import { useSettingsContext } from '@/settings/hooks/useSettingsNav';
@@ -55,44 +56,6 @@ const DataSourceList = () => {
 		await fetchDataSources().catch( () => null );
 	};
 
-	const renderDataSourceMeta = ( source: DataSourceConfig ) => {
-		const tags: { key: string; primaryValue: string; secondaryValue?: string }[] = [];
-		switch ( source.service ) {
-			case 'airtable':
-				tags.push( {
-					key: 'base',
-					primaryValue: source.service_config.base?.name,
-					secondaryValue: source.service_config.tables?.[ 0 ]?.name,
-				} );
-				break;
-			case 'shopify':
-				tags.push( { key: 'store', primaryValue: source.service_config.store_name } );
-				break;
-			case 'google-sheets':
-				tags.push( {
-					key: 'spreadsheet',
-					primaryValue: source.service_config.spreadsheet.name ?? 'Google Sheet',
-					secondaryValue: source.service_config.sheets[ 0 ]?.name,
-				} );
-				break;
-		}
-
-		return tags.filter( Boolean ).map( tag => (
-			<span key={ tag.key } className="data-source-meta">
-				{ tag.primaryValue }
-				{ tag.secondaryValue && (
-					<>
-						<Icon
-							icon={ chevronRightSmall }
-							style={ { fill: '#949494', verticalAlign: 'middle' } }
-						/>
-						{ tag.secondaryValue }
-					</>
-				) }
-			</span>
-		) );
-	};
-
 	const getServiceLabel = ( service: ( typeof SUPPORTED_SERVICES )[ number ] ) => {
 		// eslint-disable-next-line security/detect-object-injection
 		return SUPPORTED_SERVICES_LABELS[ service ] ?? 'HTTP';
@@ -168,7 +131,7 @@ const DataSourceList = () => {
 			id: 'meta',
 			label: __( 'Meta', 'remote-data-blocks' ),
 			enableGlobalSearch: true,
-			render: ( { item }: { item: DataSourceConfig } ) => renderDataSourceMeta( item ),
+			render: ( { item }: { item: DataSourceConfig } ) => <DataSourceMetaTags source={ item } />,
 		},
 	];
 

diff --git a/src/data-sources/DataSourceMetaTags.tsx b/src/data-sources/DataSourceMetaTags.tsx
@@ -0,0 +1,75 @@
+import { Icon, Tooltip } from '@wordpress/components';
+import { __ } from '@wordpress/i18n';
+import { chevronRightSmall } from '@wordpress/icons';
+
+import { DataSourceConfig } from '@/data-sources/types';
+import './DataSourceList.scss';
+
+interface DataSourceMetaTagsProps {
+	source: DataSourceConfig;
+}
+
+interface DataSourceMetaTag {
+	key: string;
+	primaryValue: string;
+	secondaryValue?: string;
+}
+
+const DataSourceDescriptor = ( props: DataSourceMetaTagsProps ) => {
+	let tag: DataSourceMetaTag | undefined;
+
+	switch ( props.source.service ) {
+		case 'airtable':
+			tag = {
+				key: 'base',
+				primaryValue: props.source.service_config.base?.name,
+				secondaryValue: props.source.service_config.tables?.[ 0 ]?.name,
+			};
+			break;
+		case 'shopify':
+			tag = { key: 'store', primaryValue: props.source.service_config.store_name };
+			break;
+		case 'google-sheets':
+			tag = {
+				key: 'spreadsheet',
+				primaryValue: props.source.service_config.spreadsheet.name ?? 'Google Sheet',
+				secondaryValue: props.source.service_config.sheets[ 0 ]?.name,
+			};
+			break;
+	}
+
+	if ( ! tag ) {
+		return null;
+	}
+
+	return (
+		<span key={ tag.key } className="data-source-meta">
+			{ tag.primaryValue }
+			{ tag.secondaryValue && (
+				<>
+					<Icon icon={ chevronRightSmall } style={ { fill: '#949494', verticalAlign: 'middle' } } />
+					{ tag.secondaryValue }
+				</>
+			) }
+		</span>
+	);
+};
+
+const CodeBadge = () => {
+	return (
+		<Tooltip text={ __( 'This data source is configured in code.', 'remote-data-blocks' ) }>
+			<span className="data-source-badge">Code</span>
+		</Tooltip>
+	);
+};
+
+const DataSourceMetaTags = ( props: DataSourceMetaTagsProps ) => {
+	return (
+		<>
+			{ ! props.source.uuid && <CodeBadge /> }
+			<DataSourceDescriptor source={ props.source } />
+		</>
+	);
+};
+
+export default DataSourceMetaTags;