Skip to content

feat -- configurable homepage widgets #2047

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

Merged
merged 26 commits into from
Dec 21, 2022
Merged

feat -- configurable homepage widgets #2047

merged 26 commits into from
Dec 21, 2022

Conversation

B-T-D
Copy link
Contributor

@B-T-D B-T-D commented Dec 7, 2022

Summary of Changes

Refactors existing features on the home page to be widgets, and adds ability for Amundsen instances to customize their widgets.

Tests

Modified some home page tests to reflect refactor.

Documentation

CheckList

Make sure you have checked all steps below to ensure a timely review.

  • PR title addresses the issue accurately and concisely. Example: "Updates the version of Flask to v1.0.2"
  • PR includes a summary of changes.
  • PR adds unit tests, updates existing unit tests, OR documents why no test additions or modifications are needed.
  • In case of new functionality, my PR adds documentation that describes how to use it.
    • All the public functions and the classes in the PR contain docstrings that explain what it does

B-T-D added 15 commits November 29, 2022 15:23
Signed-off-by: Ben Dye <[email protected]>
Signed-off-by: Ben Dye <[email protected]>

Updates for linter

Signed-off-by: Ben Dye <[email protected]>

Changes caused by linter issues. Didn't need the lifecycle methods because the component will re-render automatically when setState is called to update the searchTerm. Removed the corresponding test.

Signed-off-by: Ben Dye <[email protected]>

Linter fixes for eslint / betterer

Signed-off-by: Ben Dye <[email protected]>
Signed-off-by: Ben Dye <[email protected]>
Signed-off-by: Ben Dye <[email protected]>
# This is the 1st commit message:

Cleanups, eslint fixes, and update directory structure

Signed-off-by: Ben Dye <[email protected]>

# This is the commit message #2:

Update directory structure

Signed-off-by: Ben Dye <[email protected]>
Signed-off-by: Ben Dye <[email protected]>
@boring-cyborg boring-cyborg bot added area:frontend From the Frontend folder category:ui labels Dec 7, 2022
Comment on lines 55 to 61
<div className="filter-breadcrumb pull-right">
<Breadcrumb
direction="right"
path="/search"
text={SEARCH_BREADCRUMB_TEXT}
/>
</div>,
Copy link
Member

Choose a reason for hiding this comment

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

We probably want this bundled inside the SearchWidget

Copy link
Contributor Author

Choose a reason for hiding this comment

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

I agree conceptually but would like to leave that change until a little later if you don't mind--it'll require some tweaking beyond just moving the Breadcrumb to be inside a different render, since elsewhere in the UI we render the search bar without the "Advanced Search" Breadcrumb, for example on the advanced search page itself ('/search' URL):

Screenshot 2022-12-08 at 7 27 18 PM

(screenshot from our prod)

<div className="home-element-container">
<PopularTables />
</div>
{this.homePageWidgets}
Copy link
Member

Choose a reason for hiding this comment

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

There are several approaches to this, you can see 'generateHomepageWidgets()' functions around, and also having new components rendered:
I favor the last one, but the former is common in Amundsen's codebase too.

Copy link
Contributor Author

Choose a reason for hiding this comment

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

What do you mean by having new components rendered? A new HomePageWidgetContainer (or whatever name) component that holds all the widgets that the user wants on their homepage? That seems logical to me.

Copy link
Contributor Author

Choose a reason for hiding this comment

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

So it could be something like:

  render() {
    /* TODO, just display either popular or curated tags,
    do we want the title to change based on which
    implementation is being used? probably not */
    return (
      <main className="container home-page">
        <div className="row">
          <div
            className={`col-xs-12 ${
              announcementsEnabled() ? 'col-md-8' : 'col-md-offset-1 col-md-10'
            }`}
          >
            <h1 className="sr-only">{HOMEPAGE_TITLE}</h1>
            ****<HomePageWidgets
               getHomePageWidgets={getHomePageWidgets} 
             />****
          </div>
          {announcementsEnabled() && (
            <div className="col-xs-12 col-md-offset-1 col-md-3">
              <Announcements />
            </div>
          )}
        </div>
      </main>
    );
  }
}

Copy link
Member

Choose a reason for hiding this comment

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

Yes, but you don't need to extract it into a different file for the moment, you can write it above line 40 as a functional component.

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, will do!

Signed-off-by: Ben Dye <[email protected]>
@B-T-D B-T-D changed the title Refactor - Update homepage to use getHomePageWidgets feat -- configurable homepage widgets Dec 16, 2022
* Messy experimentation on dynamic imports issue

Signed-off-by: Ben Dye <[email protected]>

* Refactor BadgesWidget and SearchBarWidget

Signed-off-by: Ben Dye <[email protected]>

* Fix className for Breadcrumb

Signed-off-by: Ben Dye <[email protected]>

* Refactor Tags

Signed-off-by: Ben Dye <[email protected]>

* Refactor MyBookmarks and PopularResources

Signed-off-by: Ben Dye <[email protected]>

* Messy MVP config

Signed-off-by: Ben Dye <[email protected]>

* Updates to configs files

Signed-off-by: Ben Dye <[email protected]>

* Widgets interface

Signed-off-by: Ben Dye <[email protected]>

* Refactor Widget versions of components

Signed-off-by: Ben Dye <[email protected]>

* Updates to homepage and browse page

Signed-off-by: Ben Dye <[email protected]>

* Cleanups

Signed-off-by: Ben Dye <[email protected]>

Signed-off-by: Ben Dye <[email protected]>
Signed-off-by: Ben Dye <[email protected]>
@B-T-D B-T-D marked this pull request as ready for review December 21, 2022 00:42
Copy link
Member

@Golodhros Golodhros left a comment

Choose a reason for hiding this comment

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

LGTM

@Golodhros Golodhros merged commit b818400 into amundsen-io:main Dec 21, 2022
jsnb-devoted pushed a commit to jsnb-devoted/amundsen that referenced this pull request Jan 5, 2023
* Hard code test user name temporarily

Signed-off-by: Ben Dye <[email protected]>

* Group SearchBar with other home page widget components, and move home page widgets to new folder

Signed-off-by: Ben Dye <[email protected]>

* remove hardcoded username

Signed-off-by: Ben Dye <[email protected]>

* run lint:fix

Signed-off-by: Ben Dye <[email protected]>

* Updates required by eslint

Signed-off-by: Ben Dye <[email protected]>

Updates for linter

Signed-off-by: Ben Dye <[email protected]>

Changes caused by linter issues. Didn't need the lifecycle methods because the component will re-render automatically when setState is called to update the searchTerm. Removed the corresponding test.

Signed-off-by: Ben Dye <[email protected]>

Linter fixes for eslint / betterer

Signed-off-by: Ben Dye <[email protected]>

* More linter fixes

Signed-off-by: Ben Dye <[email protected]>

* tab index numbering and period char

Signed-off-by: Ben Dye <[email protected]>

* typo

Signed-off-by: Ben Dye <[email protected]>

* nit in stylesheet; go back to previous syntax for retrieving callback from props

Signed-off-by: Ben Dye <[email protected]>

* Use destructuring for callbacks in props

Signed-off-by: Ben Dye <[email protected]>

* # This is a combination of 2 commits.
# This is the 1st commit message:

Cleanups, eslint fixes, and update directory structure

Signed-off-by: Ben Dye <[email protected]>

# This is the commit message amundsen-io#2:

Update directory structure

Signed-off-by: Ben Dye <[email protected]>

* WIP on getHomePageWidgets

Signed-off-by: Ben Dye <[email protected]>

* WIP squashable

Signed-off-by: Ben Dye <[email protected]>

* Static refactor to use non-dynamic getHomePageWidgets

Signed-off-by: Ben Dye <[email protected]>

* Rename components to 'Widget' and change Widget to an interface

Signed-off-by: Ben Dye <[email protected]>

* Get default widgets via the function

Signed-off-by: Ben Dye <[email protected]>

* Widgets interface

Signed-off-by: Ben Dye <[email protected]>

* Cleanups

Signed-off-by: Ben Dye <[email protected]>

* comment cleanup

Signed-off-by: Ben Dye <[email protected]>

* Update documentation

Signed-off-by: Ben Dye <[email protected]>

* Btd wip homepage widgets (amundsen-io#3)

* Messy experimentation on dynamic imports issue

Signed-off-by: Ben Dye <[email protected]>

* Refactor BadgesWidget and SearchBarWidget

Signed-off-by: Ben Dye <[email protected]>

* Fix className for Breadcrumb

Signed-off-by: Ben Dye <[email protected]>

* Refactor Tags

Signed-off-by: Ben Dye <[email protected]>

* Refactor MyBookmarks and PopularResources

Signed-off-by: Ben Dye <[email protected]>

* Messy MVP config

Signed-off-by: Ben Dye <[email protected]>

* Updates to configs files

Signed-off-by: Ben Dye <[email protected]>

* Widgets interface

Signed-off-by: Ben Dye <[email protected]>

* Refactor Widget versions of components

Signed-off-by: Ben Dye <[email protected]>

* Updates to homepage and browse page

Signed-off-by: Ben Dye <[email protected]>

* Cleanups

Signed-off-by: Ben Dye <[email protected]>

Signed-off-by: Ben Dye <[email protected]>

* Remove unneccessary divs

Signed-off-by: Ben Dye <[email protected]>

* Cleanups

Signed-off-by: Ben Dye <[email protected]>

* Use array.map() in getHomePageWidgetComponents

Signed-off-by: Ben Dye <[email protected]>

* Add test for new config-utils method

Signed-off-by: Ben Dye <[email protected]>

Signed-off-by: Ben Dye <[email protected]>
Signed-off-by: Jason Brownstein <[email protected]>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
area:docs area:frontend From the Frontend folder
Projects
None yet
Development

Successfully merging this pull request may close these issues.

2 participants