feat(datasets): add dataset edit UI and dataset metadata on create #4005

Parker-Stafford · 2024-07-25T00:27:54Z

resolves #3938

adds the ability to edit a datasets name, description, and metadata
adds metadata column to datasets table
adds ability to set metadata on dataset create
fixes datasets table so it refetches after a new dataset is created

Screen.Recording.2024-07-24.at.5.22.36.PM.mov

…ing a new dataset

Parker-Stafford · 2024-07-25T00:33:13Z

app/src/components/dataset/EditDatasetForm.tsx

+      >
+        <Flex direction="row" justifyContent="end">
+          <Button
+            disabled={!isDirty}


isDisabled prop doesn't actually disable button - only allow for clicking save when fields have changed, invalid will be caught by useForm rules

Yeah I noticed that too the other day. We should fix in the component lib

yeah both arize and phoenix are all over the place isDisabled / disable

Parker-Stafford · 2024-07-25T00:33:46Z

app/src/components/dataset/styles.tsx

+import { css } from "@emotion/react";
+
+export const metadataFieldWrapperCSS = css`
+  .ac-field__field {


makes the json editor full width

Parker-Stafford · 2024-07-25T00:34:20Z

app/src/pages/datasets/DatasetsPage.tsx

@@ -41,10 +41,10 @@ export function DatasetsPageContent() {
    {},
    {
      fetchKey: fetchKey,
+      fetchPolicy: "store-and-network",


makes table below refetch

Parker-Stafford · 2024-07-25T00:35:48Z

app/src/pages/datasets/DeleteDatasetDialog.tsx

@@ -0,0 +1,73 @@
+import React, { startTransition, useCallback } from "react";
+import { useMutation } from "react-relay";


just moved out of DatasetActionMenu

mikeldking · 2024-07-25T00:45:25Z

app/src/components/dataset/EditDatasetForm.tsx

+
+type PatchDatasetParams = Omit<EditDatasetFormMutation$variables, "datasetId">;
+
+export function EditDatasetForm({


Very minor nit and can be done as a follow-up but I think if organized well we can make a non relay connected form called DatasetForm and then have Edit and Create variants just be wrappers that have relay stuff and we can put that on pages. It might be worth doing just so we start down this pattern. LMK

yup i like it, i was thinking the same when i was making this form, will put it as a follow up if it seems big

I think it's probably worth just doing to we can de-couple form logic from relay logic. It seems like the right time to keep things DRY

pretty easy refactor so doing it in this pr

mikeldking · 2024-07-25T00:49:37Z

app/src/pages/datasets/DatasetsTable.tsx

+                  title: "Dataset updated",
+                  message: `${row.original.name} has been successfully updated.`,
+                });
+                refetch({}, { fetchPolicy: "store-and-network" });


this totally works. But might make sense to just switch this stuff to relay refetching of fragments. makes things a bit more encapsulated.

yeah i wanted to spread the fragment. Actually is this possible without changing mutations server side since datasets are queryable top level? i didn't consider that, i was thinking i needed the parent on the return of the Created / Edited dataset, not sure how flexible relay is with that... will give it a shot

I think you might have to. Let's file a follow-up and do it. Best to make things more efficient as we go.

yeah i'll file a follow up can't query datasets off the return

mikeldking

Nice one! I'll pull down tomorrow and approve

mikeldking · 2024-07-25T15:33:32Z

I think we need to wrap the JSON editor field for the purposes of forms. It feels naked and doesn't have a border or a focus ring. LMK if you wanna pair on this.

Parker-Stafford · 2024-07-25T15:39:13Z

I think we need to wrap the JSON editor field for the purposes of forms. It feels naked and doesn't have a border or a focus ring. LMK if you wanna pair on this.

Oh yeah was thinking this as well, i can wrap it!

…e editor components

Parker-Stafford · 2024-07-25T17:48:11Z

updated code block in form

Screen.Recording.2024-07-25.at.10.46.59.AM.mov

Parker-Stafford · 2024-07-25T17:55:54Z