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: readme page #4145

Merged
merged 40 commits into from
Jan 28, 2025
Merged

feat: readme page #4145

merged 40 commits into from
Jan 28, 2025

Conversation

jamdelion
Copy link
Contributor

@jamdelion jamdelion commented Jan 13, 2025

🎟️ Trello ticket

In this PR:

  • Created 'ReadMe' page linked from the flow nav bar.
  • Deleted existing description input from Settings page - moved to ReadMe page
  • Added columns for flowSummary and flowLimitations in flows table
  • Use existing flowStatus attribute to populate the flowTag.
  • ReadMe page sets flowDescription, flowSummary and flowLimitations for now.
  • Route is viewable by all roles, but not editable by teamViewers

NB:

  • ⚠️ Relies on this PR in planx-core: feat: add new flow methods for ReadMePage work planx-core#624 - once this is in then this PR needs to point to main.
  • Wasn't sure on the reset button refreshing the page, but this was the quickest way to eliminate a bug that Silvia encountered without adding in another API call (since the latest data is fetched when the route loads).
  • The HTML sanitising process was already implemented on the flows table for most user roles. I noticed that it wasn't enabled for demo users though, so I added it there. 🧼
  • Possible styling issue: discrepancy between how RichTextInput is displayed when disabled vs a normal textInput. The latter goes grey and prevents typing, whereas the former remains usable at the moment.

Still to do (coming up in next PR):

  • Quality control checks dropdown (maybe)
  • Display external portals
  • Tests

Screenshot

Copy link

github-actions bot commented Jan 13, 2025

Removed vultr server and associated DNS entries

Copy link

github-actions bot commented Jan 16, 2025

🤖 Hasura Change Summary compared a subset of table metadata including permissions:

Updated Tables (2)

  • public.flows permissions:

    insert select update delete
    api / / /
    demoUser / / /
    platformAdmin / / /
    teamEditor / / /
    24 added column permissions
    insert select update
    api ➕ limitations
    ➕ summary
    ➕ limitations
    ➕ summary
    ➕ limitations
    ➕ summary
    demoUser
    platformAdmin
    teamEditor
  • public.published_flows

@jamdelion jamdelion force-pushed the jh/experimental-readme-page branch from a339586 to 59f6dc1 Compare January 16, 2025 18:32
@jamdelion jamdelion marked this pull request as ready for review January 21, 2025 22:10
@jamdelion jamdelion requested a review from a team January 21, 2025 22:10
Copy link
Contributor Author

Choose a reason for hiding this comment

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

Copied from Ian's branch: #4120

Copy link
Contributor

@DafyddLlyr DafyddLlyr left a comment

Choose a reason for hiding this comment

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

A few comments on code - no show stoppers.

Everything was super clear and easy to review - a pleasure! Apologies again it took me so long to get to this one.

One thing to note on a design level is that this doesn't match other similar setting pages, with a card per grouped input, e.g. Design or Settings.

Settings page Readme page
image image

These are constructed with the SettingsForm component which may help keep things standardised and consistent, both visually and in terms of user experience.

editor.planx.uk/src/ui/shared/CharacterCounter.tsx Outdated Show resolved Hide resolved
hasura.planx.uk/metadata/tables.yaml Show resolved Hide resolved
editor.planx.uk/src/pages/FlowEditor/utils.ts Outdated Show resolved Hide resolved
Save
</Button>
<Button
onClick={() => window.location.reload()}
Copy link
Contributor

Choose a reason for hiding this comment

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

Is there a less drastic option like resetting the form we could go for here? I guess a simple formik.resetForm() won't work as there are multiple fields, some of which may have updated.

Maybe for each unupdated (dirty) field, we can revert to the initial value.

Please see comment in main review - maybe reaching to SettingsForm could help us out 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.

Thanks Daf - the problem here was that because the latest data is fetched when the route loads, we get unexpected behaviour if the reset button reverts to the initial value after a user has saved their changes. I.e. it reverts back to before their saved changes instead of accounting for them, even though they have been updated in the background correctly.
Perhaps a solution would be to refetch the data before calling formik.resetForm once the reset button is clicked 🤔

Copy link
Contributor

Choose a reason for hiding this comment

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

Yeah we're bumping into the awkward data caching / fetching issue we talked about that tanstack query would resolve.

We probably could reset values for formik.initialValues on success but this is a little janky!

This solution works well for now for sure - I think the reset is a bit of an edge case - and lets make a proper plan for how we could integrate tanstack query 👍

<>What does this service not include?</>
</SettingsDescription>
<InputRow>
<RichTextInput
Copy link
Contributor

Choose a reason for hiding this comment

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

There's a multiline prop for this component which we should use for both of these RichTextInput fields.

It's recently come up as a usability issue when we allow rich text but only provide a small one line input.

Copy link
Contributor Author

@jamdelion jamdelion Jan 27, 2025

Choose a reason for hiding this comment

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

Thanks I was wondering about this - with the multiline prop the default text area of the input doesn't change, and I've checked instances where the prop is added to other RichTextInputs - e.g. the editor for upload and label and those also still have a single line input. Whether the prop is there or not, the input expands when lots of text is added though.

I do think I'd expect this text box to be large by default though - we probably need to add something so that RichTextInput changes style when the multiline prop is present - will add to Trello

(I've added the prop here in any case).

Copy link
Contributor

Choose a reason for hiding this comment

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

Copy link
Contributor Author

Choose a reason for hiding this comment

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

Ah great, thanks!

Copy link
Contributor Author

Choose a reason for hiding this comment

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

Although it still doesn't make the text area larger by default 🤔 Will keep digging!

Copy link
Contributor Author

Choose a reason for hiding this comment

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

E.g. the globalSettings line corresponds to this in the UI - i.e. still appears as a single line input

Screenshot 2025-01-27 at 17 26 33

Copy link
Contributor

Choose a reason for hiding this comment

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

Yep very good spot! There's a bug / issue here where the MUI input props (rows, multiline) are not getting correctly transposed onto their tiptap equivalents in the RichTextInput component.

It would be nice to come back and address this but it's outside the scope of this PR and currently behaves exactly as the rest of the Editor does 👍

@jamdelion
Copy link
Contributor Author

jamdelion commented Jan 28, 2025

One thing to note on a design level is that this doesn't match other similar setting pages, with a card per grouped input, e.g. Design or Settings.

Thanks Daf - I have compared my form and the SettingsForm and they were very similar apart from the background prop to get the grey background colour. I have not used the SettingsForm component as my use case is a little different - we have the explainer before each question and only want one Save/Reset button group for all the questions currently displayed. I tried using the SettingsForm but the styling/spacing wasn't quite right - looks like it's not designed for questions that have their own bolder headings.

Copy link
Contributor

@DafyddLlyr DafyddLlyr left a comment

Choose a reason for hiding this comment

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

Fantastic - changes all look great! 👍

@jamdelion jamdelion merged commit b05d6b4 into main Jan 28, 2025
13 checks passed
@jamdelion jamdelion deleted the jh/experimental-readme-page branch January 28, 2025 18:40
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