Skip to content

Commit

Permalink
[front] fix: fixed datasource link, improved ui (#7241)
Browse files Browse the repository at this point in the history
  • Loading branch information
@tdraier
tdraier authored Sep 10, 2024
1 parent 63791b1 commit f076991
Show file tree
Hide file tree
Showing 5 changed files with 82 additions and 100 deletions.
1 change: 1 addition & 0 deletions front/components/app/blocks/Database.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -114,6 +114,7 @@ export default function Database({
<div className="mr-2 flex flex-initial flex-row items-center space-x-1 text-sm font-medium leading-8 text-gray-700">
<TablePicker
owner={owner}
vault={app.vault}
dataSource={{
workspace_id: block.config.tables?.[0].workspace_id,
data_source_id: block.config.tables?.[0].data_source_id,
Expand Down
1 change: 1 addition & 0 deletions front/components/app/blocks/DatabaseSchema.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -108,6 +108,7 @@ export default function DatabaseSchema({
<div className="mr-2 flex flex-initial flex-row items-center space-x-1 text-sm font-medium leading-8 text-gray-700">
<TablePicker
owner={owner}
vault={app.vault}
dataSource={{
workspace_id: block.config.tables?.[0].workspace_id,
data_source_id: block.config.tables?.[0].data_source_id,
Expand Down
89 changes: 37 additions & 52 deletions front/components/data_source/DataSourcePicker.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,10 +1,9 @@
import { Input } from "@dust-tt/sparkle";
import { DropdownMenu, Input } from "@dust-tt/sparkle";
import type {
DataSourceViewType,
VaultType,
WorkspaceType,
} from "@dust-tt/types";
import { Menu } from "@headlessui/react";
import { ChevronDownIcon } from "@heroicons/react/20/solid";
import Link from "next/link";
import { useEffect, useState } from "react";
Expand Down Expand Up @@ -50,6 +49,7 @@ export default function DataSourcePicker({
const [filteredDataSourceViews, setFilteredDataSourceViews] =
useState(vaultDataSourceViews);

// Look for the selected data source view in the list - data_source_id can contain either dsv sId or dataSource name, try to find a match
const selectedDataSourceView = hasDataSourceView
? vaultDataSourceViews.find(
(dsv) =>
Expand All @@ -66,11 +66,12 @@ export default function DataSourcePicker({
hasDataSourceView
) {
if (!selectedDataSourceView) {
// If the selected data source view is not found in the list, reset the config
onDataSourcesUpdate([]);
} else if (
selectedDataSourceView.sId !== currentDataSources[0].data_source_id
) {
// Update config with data_source_view id instead of data_source name
// If the selected data source view is found in the list, but the id is not the dsv sId (so dataSource name), update the config
onDataSourcesUpdate([
{
workspace_id: owner.sId,
Expand All @@ -91,7 +92,7 @@ export default function DataSourcePicker({

const getEditLink = (dsv: DataSourceViewType) => {
return owner.flags.includes("data_vaults_feature")
? `/w/${owner.sId}/data-sources/vaults/${dsv.vaultId}/categories/${dsv.category}/data_source_views/${dsv.sId}`
? `/w/${owner.sId}/vaults/${dsv.vaultId}/categories/${dsv.category}/data_source_views/${dsv.sId}`
: `/w/${owner.sId}/builder/data-sources/${dsv.dataSource.name}`;
};

Expand All @@ -110,17 +111,17 @@ export default function DataSourcePicker({
{readOnly ? (
selectedDataSourceView ? (
<Link href={getEditLink(selectedDataSourceView)}>
<div className="text-sm font-bold text-action-500">
<div className="max-w-20 mr-1 truncate text-sm font-bold text-action-500">
{selectedDataSourceView.dataSource.name}
</div>
</Link>
) : (
"No DataSource"
)
) : (
<Menu as="div" className="relative inline-block text-left">
<DropdownMenu>
<div>
<Menu.Button
<DropdownMenu.Button
className={classNames(
"inline-flex items-center rounded-md py-1 text-sm font-normal text-gray-700",
selectedDataSourceView ? "px-0" : "border px-3",
Expand All @@ -133,7 +134,7 @@ export default function DataSourcePicker({
{selectedDataSourceView ? (
<>
<Link href={getEditLink(selectedDataSourceView)}>
<div className="mr-1 text-sm font-bold text-action-500">
<div className="mr-1 max-w-xs truncate text-sm font-bold text-action-500">
{selectedDataSourceView.dataSource.name}
</div>
</Link>
Expand All @@ -153,60 +154,44 @@ export default function DataSourcePicker({
Create DataSource
</Link>
)}
</Menu.Button>
</DropdownMenu.Button>
</div>

{(vaultDataSourceViews || []).length > 0 ? (
<Menu.Items
className={classNames(
"absolute z-10 mt-1 w-max origin-top-left rounded-md bg-white shadow-sm ring-1 ring-black ring-opacity-5 focus:outline-none",
selectedDataSourceView ? "-left-4" : "left-1"
)}
>
<DropdownMenu.Items width={300}>
<Input
name="search"
placeholder="Search"
value={searchFilter}
onChange={(value) => setSearchFilter(value)}
className="w-48"
className="mt-4 w-full"
/>
<div className="py-1">
{(filteredDataSourceViews || []).map((dsv) => {
return (
<Menu.Item key={dsv.sId}>
{({ active }) => (
<span
className={classNames(
active
? "bg-gray-50 text-gray-900"
: "text-gray-700",
"block cursor-pointer px-4 py-2 text-sm"
)}
onClick={() => {
onDataSourcesUpdate([
{
workspace_id: owner.sId,
data_source_id: dsv.sId,
},
]);
setSearchFilter("");
}}
>
{dsv.dataSource.name}
</span>
)}
</Menu.Item>
);
})}
{filteredDataSourceViews.length === 0 && (
<span className="block px-4 py-2 text-sm text-gray-700">
No datasources found
</span>
)}
</div>
</Menu.Items>
{(filteredDataSourceViews || []).map((dsv) => {
return (
<DropdownMenu.Item
key={dsv.sId}
label={dsv.dataSource.name}
onClick={() => {
onDataSourcesUpdate([
{
workspace_id: owner.sId,
data_source_id: dsv.sId,
},
]);
setSearchFilter("");
}}
/>
);
})}
{filteredDataSourceViews.length === 0 && (
<span className="block px-4 py-2 text-sm text-gray-700">
No datasources found
</span>
)}
{/* </div> */}
</DropdownMenu.Items>
) : null}
</Menu>
</DropdownMenu>
)}
</div>
</div>
Expand Down
89 changes: 42 additions & 47 deletions front/components/tables/TablePicker.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,18 +1,18 @@
import { Input } from "@dust-tt/sparkle";
import type { WorkspaceType } from "@dust-tt/types";
import type { CoreAPITable } from "@dust-tt/types";
import { Menu } from "@headlessui/react";
import { DropdownMenu, Input } from "@dust-tt/sparkle";
import type { CoreAPITable, VaultType, WorkspaceType } from "@dust-tt/types";
import { ChevronDownIcon } from "@heroicons/react/20/solid";
import { useEffect, useState } from "react";

import { useDataSourceTables } from "@app/lib/swr/data_sources";
import { useVaultDataSourceViews } from "@app/lib/swr/vaults";
import { classNames } from "@app/lib/utils";

export default function TablePicker({
owner,
dataSource,
currentTableId,
readOnly,
vault,
onTableUpdate,
}: {
owner: WorkspaceType;
Expand All @@ -22,15 +22,27 @@ export default function TablePicker({
};
currentTableId?: string;
readOnly: boolean;
vault: VaultType;
onTableUpdate: (table: CoreAPITable) => void;
}) {
void owner;
void dataSource;

// TODO(GROUPS_INFRA): Use data source views to get tables.
const { vaultDataSourceViews } = useVaultDataSourceViews({
vaultId: vault.sId,
workspaceId: owner.sId,
});

// Look for the selected data source view in the list - data_source_id can contain either dsv sId or dataSource name, try to find a match
const selectedDataSourceView = vaultDataSourceViews.find(
(dsv) =>
dsv.sId === dataSource.data_source_id ||
dsv.dataSource.name === dataSource.data_source_id
);

const { tables } = useDataSourceTables({
workspaceId: dataSource.workspace_id,
dataSourceName: dataSource.data_source_id,
dataSourceName: selectedDataSourceView?.dataSource.name,
});

const currentTable = currentTableId
Expand Down Expand Up @@ -61,9 +73,9 @@ export default function TablePicker({
"No Table"
)
) : (
<Menu as="div" className="relative inline-block text-left">
<DropdownMenu>
<div>
<Menu.Button
<DropdownMenu.Button
className={classNames(
"inline-flex items-center rounded-md py-1 text-sm font-normal text-gray-700",
currentTable ? "px-0" : "border px-3",
Expand All @@ -85,55 +97,38 @@ export default function TablePicker({
) : (
"No Tables"
)}
</Menu.Button>
</DropdownMenu.Button>
</div>

{(tables || []).length > 0 ? (
<Menu.Items
className={classNames(
"absolute z-10 mt-1 w-max origin-top-left rounded-md bg-white shadow-sm ring-1 ring-black ring-opacity-5 focus:outline-none",
currentTable ? "-left-4" : "left-1"
)}
>
<DropdownMenu.Items width={300}>
<Input
name="search"
placeholder="Search"
value={searchFilter}
onChange={(value) => setSearchFilter(value)}
className="w-48"
className="mt-4 w-full"
/>
<div className="py-1">
{(filteredTables || []).map((t) => {
return (
<Menu.Item key={t.table_id}>
{({ active }) => (
<span
className={classNames(
active
? "bg-gray-50 text-gray-900"
: "text-gray-700",
"block cursor-pointer px-4 py-2 text-sm"
)}
onClick={() => {
onTableUpdate(t);
setSearchFilter("");
}}
>
{t.name}
</span>
)}
</Menu.Item>
);
})}
{filteredTables.length === 0 && (
<span className="block px-4 py-2 text-sm text-gray-700">
No tables found
</span>
)}
</div>
</Menu.Items>
{(filteredTables || []).map((t) => {
return (
<DropdownMenu.Item
key={t.table_id}
label={t.name}
onClick={() => {
onTableUpdate(t);
setSearchFilter("");
}}
/>
);
})}
{filteredTables.length === 0 && (
<span className="block px-4 py-2 text-sm text-gray-700">
No tables found
</span>
)}
</DropdownMenu.Items>
) : null}
</Menu>
</DropdownMenu>
)}
</div>
</div>
Expand Down
2 changes: 1 addition & 1 deletion front/lib/swr/data_sources.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -84,7 +84,7 @@ export function useDataSourceTables({
dataSourceName,
}: {
workspaceId: string;
dataSourceName: string;
dataSourceName: string | undefined;
}) {
const tablesFetcher: Fetcher<ListTablesResponseBody> = fetcher;

Expand Down

0 comments on commit f076991

Please sign in to comment.