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

[Large] Create UI for metadata editing workflow #338

Conversation

aswallace
Copy link
Contributor

@aswallace aswallace commented Nov 19, 2024

This PR creates the main part of the UI for editing file metadata from BFF based on the Figma designs. Does not include any backend logic.

Temporarily deployed to staging

Part of #96

Reviewing

Lots of changes with a slightly complicated file structure, so here's suggested review order:

There's also a brand new 'ComboBox' component (dropdown selector with search), which is a styled wrapper for the FluentUI combo box

To Dos (UI only)

Screenshots

Existing annotation pathway:

Screenshot 2024-11-19 at 4 42 56 PM Screenshot 2024-11-19 at 4 43 10 PM Screenshot 2024-11-19 at 4 43 33 PM

New annotation pathway:

Screenshot 2024-11-19 at 4 43 51 PM Screenshot 2024-11-19 at 4 44 09 PM Screenshot 2024-11-19 at 4 44 16 PM

@aswallace aswallace requested review from SeanLeRoy, BrianWhitneyAI, kmitcham, pgarrison and lynwilhelm and removed request for SeanLeRoy November 20, 2024 00:01
@aswallace aswallace self-assigned this Nov 20, 2024

import styles from "./EditMetadata.module.css";

enum EditMetadataPathway {
Copy link
Contributor

Choose a reason for hiding this comment

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

Maybe const enum here

Copy link
Contributor Author

Choose a reason for hiding this comment

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

is there a particular reason const enum would be needed for this one?

packages/core/components/EditMetadata/index.tsx Outdated Show resolved Hide resolved
@aswallace
Copy link
Contributor Author

aswallace commented Nov 22, 2024

UX bugs from @lynwilhelm :

  • Remove REPLACE from first step
  • Table shouldn't be focusable (Fluent bug, may not be able to fix)
  • Fix spacing for "Existing" header
  • Fix table header spacing & font size
  • Add tooltips on radio options (new/existing)
  • Add overlay to menu overflow & increase height slightly
  • ComboBox interaction bugs #342 (converted to separate issue bc these have been frustrating and take more time)

Global issues not specific to this ticket:

Copy link
Contributor

@SeanLeRoy SeanLeRoy left a comment

Choose a reason for hiding this comment

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

Anya! You nailed this 💯

@@ -135,6 +136,24 @@ export default (filters?: FileFilter[], onDismiss?: () => void) => {
],
},
},
...(isQueryingAicsFms
Copy link
Contributor

Choose a reason for hiding this comment

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

Did you create a ticket for adding this capability for non-aics data sources? I think it wouldn't be very difficult to do via SQL like:

UPDATE ${datasourceName}
SET ${columnToUpdate} = ${valueToReplaceWith}
WHERE ${here either select by row number or the internally made BFF ID} = ${list of row numbers or bff ids}

Copy link
Contributor Author

@aswallace aswallace Nov 22, 2024

Choose a reason for hiding this comment

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

honestly I forgot we were planning to allow editing on non-aics data sources. Made ticket: #347

const fileSelection = useSelector(selection.selectors.getFileSelection);
const fileCount = fileSelection.count();
// Don't allow users to edit top level annotations (e.g., File Name)
const annotationOptions = useSelector(metadata.selectors.getSortedAnnotations)
Copy link
Contributor

Choose a reason for hiding this comment

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

Unsure why I have never attached JS array functions onto the selector like this... looks clean!

@aswallace aswallace merged commit 29ed3ff into feature/metadata-editing/develop Nov 23, 2024
7 checks passed
@aswallace aswallace deleted the feature/metadata-editing/modal-ui-setup branch November 23, 2024 01:02
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

4 participants