Move Getting Started above experiments list and make collapsible#20691
Move Getting Started above experiments list and make collapsible#20691B-Step62 merged 5 commits intomlflow:masterfrom
Conversation
🛠 DevTools 🛠
Install mlflow from this PRFor Databricks, use the following command: |
b9a7d67 to
147d8bd
Compare
|
Documentation preview for 7d729d9 is available at: More info
|
…lapsible Move the Getting Started / features section above the experiment list on the home page so new users see it first. Add a collapsible accordion with state persisted in localStorage, allowing users to collapse the section while maintaining visibility. Co-Authored-By: Claude <noreply@anthropic.com> Signed-off-by: B-Step62 <yuki.watanabe@databricks.com>
Signed-off-by: B-Step62 <yuki.watanabe@databricks.com>
The "Explore Features" subtitle was removed from the Getting Started section, so its i18n entry is no longer needed. Co-Authored-By: Claude <noreply@anthropic.com> Signed-off-by: B-Step62 <yuki.watanabe@databricks.com>
462c0a9 to
f3d4743
Compare
mlflow/server/js/src/home/components/features/FeaturesSection.tsx
Outdated
Show resolved
Hide resolved
| [theme], | ||
| ); | ||
|
|
||
| const accordionStyles = useMemo(() => { |
There was a problem hiding this comment.
hmm what's the main purpose for all these custom styles? if we just want the arrow to be easier to see, can we just use <Accordion chevronAlignment="left">? otherwise we can just use a simple div that is easier to style than overridding all these styles from design system accordion
There was a problem hiding this comment.
Yeah I have tried that, but having the chevron on left side is a bit strange since it adds an indent to "Getting Started" section only, while other headings like "Welcome to MLflow" and "Recent Experiments" are left aligned.
Using simple div makes sense tho.
daniellok-db
left a comment
There was a problem hiding this comment.
lgtm once comments addressed
Address PR review comments: - Use useLocalStorage hook instead of raw localStorage for collapse state persistence - Replace design system Accordion with a simple button + conditional render to avoid complex style overrides Co-Authored-By: Claude <noreply@anthropic.com> Signed-off-by: B-Step62 <yuki.watanabe@databricks.com>
008d94c to
b807d64
Compare
Signed-off-by: Yuki Watanabe <31463517+B-Step62@users.noreply.github.com>
…low#20691) Signed-off-by: B-Step62 <yuki.watanabe@databricks.com> Signed-off-by: Yuki Watanabe <31463517+B-Step62@users.noreply.github.com> Co-authored-by: Claude <noreply@anthropic.com>
Related Issues/PRs
What changes are proposed in this pull request?
Default:

Collapsed:

How is this PR tested?
Manual testing steps:
>vDoes this PR require documentation update?
Does this PR require updating the MLflow Skills repository?
Release Notes
Is this a user-facing change?
Move the "Getting Started" section above the experiment list on the home page and make it collapsible with state persisted in localStorage.
What component(s), interfaces, languages, and integrations does this PR affect?
Components
area/uiux: Front-end, user experience, plotting, JavaScript, JavaScript dev serverHow should the PR be classified in the release notes? Choose one:
rn/feature- A new user-facing feature worth mentioning in the release notesShould this PR be included in the next patch release?