Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

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

Merged
merged 13 commits into from
Jul 26, 2024

Conversation

Parker-Stafford
Copy link
Contributor

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

@dosubot dosubot bot added the size:XL This PR changes 500-999 lines, ignoring generated files. label Jul 25, 2024
>
<Flex direction="row" justifyContent="end">
<Button
disabled={!isDirty}
Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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

import { css } from "@emotion/react";

export const metadataFieldWrapperCSS = css`
.ac-field__field {
Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

makes the json editor full width

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

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

makes table below refetch

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

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

just moved out of DatasetActionMenu


type PatchDatasetParams = Omit<EditDatasetFormMutation$variables, "datasetId">;

export function EditDatasetForm({
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

pretty easy refactor so doing it in this pr

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

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Copy link
Contributor

@mikeldking mikeldking left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Nice one! I'll pull down tomorrow and approve

@mikeldking
Copy link
Contributor

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.
Screenshot 2024-07-25 at 9 31 52 AM

@Parker-Stafford
Copy link
Contributor Author

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. Screenshot 2024-07-25 at 9 31 52 AM

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

@dosubot dosubot bot added size:XXL This PR changes 1000+ lines, ignoring generated files. and removed size:XL This PR changes 500-999 lines, ignoring generated files. labels Jul 25, 2024
@Parker-Stafford
Copy link
Contributor Author

updated code block in form

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

const [isHovered, setIsHovered] = useState(false);
const isInvalid = validationState === "invalid";
return (
<Field {...fieldProps}>
Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

went back and forth on adding this in here or making it outside of this component, let me know what you think @mikeldking

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I think it belongs here yeah

/**
* Wrapper for code editor components (e.g. JSONEditor) that provides hover, focus, and validation state styles
*/
export function CodeEditorFormWrapper({
Copy link
Contributor Author

@Parker-Stafford Parker-Stafford Jul 25, 2024

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

went with children here and generic CodeEditorFormWrapper (instead of specifically wrapping the json editor. Since in theory this can and should be applied to any code editor in a form (may or may not always be json editor).

@dosubot dosubot bot added size:XL This PR changes 500-999 lines, ignoring generated files. and removed size:XXL This PR changes 1000+ lines, ignoring generated files. labels Jul 25, 2024
Copy link
Contributor

@mikeldking mikeldking left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Thank you!

/**
* Wrapper for code editor components (e.g. JSONEditor) that provides hover, focus, and validation state styles
*/
export function CodeEditorFormWrapper({
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Suggested change
export function CodeEditorFormWrapper({
export function CodeEditorFieldWrapper({

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Since it's really wrapping the Field, not the form

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

makes sense

const [isHovered, setIsHovered] = useState(false);
const isInvalid = validationState === "invalid";
return (
<Field {...fieldProps}>
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I think it belongs here yeah

app/src/components/code/CodeEditorFormWrapper.tsx Outdated Show resolved Hide resolved
@Parker-Stafford Parker-Stafford merged commit d80c438 into main Jul 26, 2024
6 checks passed
@Parker-Stafford Parker-Stafford deleted the parker/3938-edit-dataset-ui branch July 26, 2024 00:38
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
size:XL This PR changes 500-999 lines, ignoring generated files.
Projects
None yet
Development

Successfully merging this pull request may close these issues.

[datasets][ui] edit dataset UI
2 participants