fix: Metadata UI improvements #4327

novakzaballa · 2024-07-11T16:35:32Z

Thanks for submitting a PR! Please check the boxes below:

I have run pre-commit to check linting
I have added information to docs/ if required so people know about the feature!
I have filled in the "Changes" section below?
I have filled in the "How did you test this code" section below?
I have used a Conventional Commit title for this Pull Request

Changes

Add error messages and validations in the features and environments settings.
Improve multiline type metadata.
Change URL validation type.
Only enterprise Orgs can use custom fields/metadata

How did you test this code?

Use an enterprise organization to be able to use custom fields/metadata.
Changes were applied to multiline metadata in the feature settings.
Try to cause an error to see error toasts. For example, enter an incorrect metadata value and try to save.

vercel · 2024-07-11T16:35:35Z

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name	Status	Preview	Comments	Updated (UTC)
flagsmith-frontend-preview	✅ Ready (Inspect)	Visit Preview	💬 Add feedback	Jul 29, 2024 3:37pm
flagsmith-frontend-staging	✅ Ready (Inspect)	Visit Preview	💬 Add feedback	Jul 29, 2024 3:37pm

1 Skipped Deployment

Name	Status	Preview	Comments	Updated (UTC)
docs	⬜️ Ignored (Inspect)	Visit Preview		Jul 29, 2024 3:37pm

github-actions · 2024-07-11T16:40:36Z

Uffizzi Preview deployment-54106 was deleted.

github-actions · 2024-07-11T18:40:21Z

flagsmith-frontend image build and security scan finished ✨

Image	Build Status	Security report
`ghcr.io/flagsmith/flagsmith-frontend:pr-4327`	Finished ✅	Results ✅

github-actions · 2024-07-11T18:40:22Z

flagsmith-api image build and security scan finished ✨

Image	Build Status	Security report
`ghcr.io/flagsmith/flagsmith-api:pr-4327`	Finished ✅	Results ✅

github-actions · 2024-07-11T18:40:23Z

flagsmith-private-cloud image build and security scan finished ✨

Image	Build Status	Security report
`ghcr.io/flagsmith/flagsmith-private-cloud:pr-4327`	Finished ✅	Results ✅

github-actions · 2024-07-11T18:40:24Z

flagsmith image build and security scan finished ✨

Image	Build Status	Security report
`ghcr.io/flagsmith/flagsmith:pr-4327`	Finished ✅	Results ✅

github-actions · 2024-07-11T18:40:25Z

flagsmith-e2e image build finished ✨

Image	Build Status	Security report
`ghcr.io/flagsmith/flagsmith-e2e:pr-4327`	Finished ✅	Skipped

kyle-ssg · 2024-07-12T11:17:22Z

frontend/common/stores/project-store.js

+      })
+      .catch((e) => {
+        e.json().then((result) => {
+          toast(result.metadata[0], 'danger')


This assumes result.metadata isn't undefined.

kyle-ssg · 2024-07-12T11:18:16Z

frontend/web/components/metadata/AddMetadataToEntity.tsx

+      ) : metadata?.type === 'multiline_str' ? (
+        <Flex className='flex-row' style={{ minWidth: '300px' }}>
+          <InputGroup
+            textarea


The component under this is the exact same except it has a textarea prop, why not just do the following?

textarea={metadata?.type === 'multiline_str'}

kyle-ssg · 2024-07-12T11:19:21Z

frontend/web/components/modals/CreateFlag.js

-            }`,
-          )
+        ({ changeRequest, createdFlag, error, isCreate } = {}) => {
+          if (error?.data?.metadata) {


error could be defined but not error?.data?.metadata. With this code any other error will show a success message.

kyle-ssg · 2024-07-16T15:48:47Z

frontend/common/utils/utils.tsx

@@ -382,6 +382,10 @@ const Utils = Object.assign({}, require('./base/_utils'), {
        valid = isEnterprise
        break
      }
+      case 'METADATA': {


Note to self: this affects #4281

kyle-ssg · 2024-07-16T16:09:37Z

frontend/common/stores/project-store.js

+      .catch((e) => {
+        e.json()
+          .then((result) => {
+            if (result.metadata && result.metadata[0]) {


This is better syntax and also checks that result.metadata isn't null (maybe not necessary but still good)

(result: Environment) => { // Types Environment if(result?.metadata?.[0]) }

kyle-ssg · 2024-07-16T16:13:03Z

frontend/common/utils/utils.tsx

@@ -396,6 +400,8 @@ const Utils = Object.assign({}, require('./base/_utils'), {
        : null
      : AccountStore.getPlans()

+    console.log('DEBUG: plans:', plans)


kyle-ssg · 2024-07-29T14:25:46Z

As discussed, raised an overall issue here. For now there's a few things to tidy up + default custom fields to expanded

novakzaballa · 2024-07-29T15:53:02Z

As discussed, raised an overall issue here. For now there's a few things to tidy up + default custom fields to expanded

@kyle-ssg, I adjusted the Vertical alignment, removed the placeholder, and custom fields expanded by default.
I added a screenshot with the UI changes bellow.

kyle-ssg · 2024-07-30T15:23:34Z

So much better

novakzaballa added 4 commits July 10, 2024 16:45

fix: metadata UI improvements

5afb4a7

Add textArea for multiline metadata type

d49bb9e

Add error toast in the environment settings

2db3272

Update url type validation

6c18b75

github-actions bot added the front-end Issue related to the React Front End Dashboard label Jul 11, 2024

vercel bot deployed to Preview – flagsmith-frontend-preview July 11, 2024 16:35 View deployment

vercel bot deployed to Preview – flagsmith-frontend-staging July 11, 2024 16:36 View deployment

novakzaballa changed the title ~~Fix/metadata UI improvements~~ fix: Metadata UI improvements Jul 11, 2024

novakzaballa removed a link to an issue Jul 11, 2024

Collapsing Metadata section when creating or features deletes all unsaved changes #4305

Open

4 tasks

novakzaballa marked this pull request as ready for review July 11, 2024 18:39

novakzaballa requested a review from a team as a code owner July 11, 2024 18:39

novakzaballa requested review from kyle-ssg and removed request for a team July 11, 2024 18:39

github-actions bot added the fix label Jul 11, 2024

kyle-ssg reviewed Jul 12, 2024

View reviewed changes

Add error toasts, update input components

6a9759e

vercel bot deployed to Preview – flagsmith-frontend-preview July 15, 2024 20:46 View deployment

Only entterprise org can use custom fields/metadata

9049a65

github-actions bot added fix and removed fix labels Jul 16, 2024

vercel bot deployed to Preview – flagsmith-frontend-preview July 16, 2024 13:42 View deployment

vercel bot deployed to Preview – flagsmith-frontend-staging July 16, 2024 13:42 View deployment

novakzaballa requested a review from kyle-ssg July 16, 2024 13:46

kyle-ssg reviewed Jul 16, 2024

View reviewed changes

Improve code

6c6d355

github-actions bot added fix and removed fix labels Jul 16, 2024

vercel bot deployed to Preview – flagsmith-frontend-staging July 16, 2024 18:02 View deployment

vercel bot deployed to Preview – flagsmith-frontend-preview July 16, 2024 18:02 View deployment

novakzaballa requested a review from kyle-ssg July 16, 2024 18:05

Improve UI

bfb8616

github-actions bot added fix and removed fix labels Jul 29, 2024

vercel bot deployed to Preview – flagsmith-frontend-preview July 29, 2024 15:37 View deployment

vercel bot deployed to Preview – flagsmith-frontend-staging July 29, 2024 15:37 View deployment

kyle-ssg approved these changes Jul 30, 2024

View reviewed changes

novakzaballa added this pull request to the merge queue Jul 30, 2024

Merged via the queue into main with commit d4006c0 Jul 30, 2024
30 checks passed

novakzaballa deleted the fix/metadata-ui-improvements branch July 30, 2024 15:53

flagsmithdev mentioned this pull request Jul 30, 2024

chore(main): release 2.134.0 #4429

Merged

rolodato mentioned this pull request Jul 31, 2024

Errors when saving feature metadata fields are silently ignored #4295

Open

4 tasks

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

fix: Metadata UI improvements #4327

fix: Metadata UI improvements #4327

novakzaballa commented Jul 11, 2024 •

edited

Loading

vercel bot commented Jul 11, 2024 •

edited

Loading

github-actions bot commented Jul 11, 2024 •

edited

Loading

github-actions bot commented Jul 11, 2024 •

edited

Loading

github-actions bot commented Jul 11, 2024 •

edited

Loading

github-actions bot commented Jul 11, 2024 •

edited

Loading

github-actions bot commented Jul 11, 2024 •

edited

Loading

github-actions bot commented Jul 11, 2024 •

edited

Loading

kyle-ssg Jul 12, 2024 •

edited

Loading

novakzaballa Jul 16, 2024

kyle-ssg Jul 12, 2024 •

edited

Loading

novakzaballa Jul 16, 2024

kyle-ssg Jul 12, 2024 •

edited

Loading

novakzaballa Jul 16, 2024

kyle-ssg Jul 16, 2024

kyle-ssg Jul 16, 2024 •

edited

Loading

novakzaballa Jul 29, 2024

kyle-ssg Jul 16, 2024

novakzaballa Jul 29, 2024

kyle-ssg commented Jul 29, 2024

novakzaballa commented Jul 29, 2024

kyle-ssg commented Jul 30, 2024

fix: Metadata UI improvements #4327

fix: Metadata UI improvements #4327

Conversation

novakzaballa commented Jul 11, 2024 • edited Loading

Changes

How did you test this code?

vercel bot commented Jul 11, 2024 • edited Loading

github-actions bot commented Jul 11, 2024 • edited Loading

github-actions bot commented Jul 11, 2024 • edited Loading

github-actions bot commented Jul 11, 2024 • edited Loading

github-actions bot commented Jul 11, 2024 • edited Loading

github-actions bot commented Jul 11, 2024 • edited Loading

github-actions bot commented Jul 11, 2024 • edited Loading

kyle-ssg Jul 12, 2024 • edited Loading

Choose a reason for hiding this comment

novakzaballa Jul 16, 2024

Choose a reason for hiding this comment

kyle-ssg Jul 12, 2024 • edited Loading

Choose a reason for hiding this comment

novakzaballa Jul 16, 2024

Choose a reason for hiding this comment

kyle-ssg Jul 12, 2024 • edited Loading

Choose a reason for hiding this comment

novakzaballa Jul 16, 2024

Choose a reason for hiding this comment

kyle-ssg Jul 16, 2024

Choose a reason for hiding this comment

kyle-ssg Jul 16, 2024 • edited Loading

Choose a reason for hiding this comment

novakzaballa Jul 29, 2024

Choose a reason for hiding this comment

kyle-ssg Jul 16, 2024

Choose a reason for hiding this comment

novakzaballa Jul 29, 2024

Choose a reason for hiding this comment

kyle-ssg commented Jul 29, 2024

novakzaballa commented Jul 29, 2024

kyle-ssg commented Jul 30, 2024

novakzaballa commented Jul 11, 2024 •

edited

Loading

vercel bot commented Jul 11, 2024 •

edited

Loading

github-actions bot commented Jul 11, 2024 •

edited

Loading

github-actions bot commented Jul 11, 2024 •

edited

Loading

github-actions bot commented Jul 11, 2024 •

edited

Loading

github-actions bot commented Jul 11, 2024 •

edited

Loading

github-actions bot commented Jul 11, 2024 •

edited

Loading

github-actions bot commented Jul 11, 2024 •

edited

Loading

kyle-ssg Jul 12, 2024 •

edited

Loading

kyle-ssg Jul 12, 2024 •

edited

Loading

kyle-ssg Jul 12, 2024 •

edited

Loading

kyle-ssg Jul 16, 2024 •

edited

Loading