feat(homepage): add support to incl. the user displayName in the header title and to add a local and world clock to the header

[christoph-jerolimov]

Hey, I just made a Pull Request!

This PR includes improvements to address https://issues.redhat.com/browse/RHIDP-5601. It ...

• Adds support to show also the the username (displayName from the user catalog entity) in the header title.
• Adds additional options to show the local time and a worldclock to the header.
• Adds a new WorldClock card based on the Home plugin HeaderWorldClock component to show additional clocks/timezones also in the home page content area.

It also includes additional documentation and unit tests for some components.

For the reviewers

The expectation is that the default configuration looks like before. Neigther the default title is changed, not any new clocks or cards are shown by default.

You can read the updated techdocs via techdocs or here:

• https://github.com/christoph-jerolimov/rhdh-plugins/blob/homepage-improve-header/workspaces/homepage/docs/header.md
• https://github.com/christoph-jerolimov/rhdh-plugins/blob/homepage-improve-header/workspaces/homepage/docs/worldclock.md

I used this command to install the plugin into my local rhdh:

cd rhdh-plugins/workspaces/homepage/plugins/dynamic-home-page
npx --yes @janus-idp/cli package export-dynamic-plugin --dynamic-plugins-root ~/git/redhat-developer/rhdh/dynamic-plugins-root --dev --clean

And this configuration in my app-config.local.yaml:

dynamicPlugins:
  frontend:

    red-hat-developer-hub.backstage-plugin-dynamic-home-page:
      dynamicRoutes:
        - path: /
          importName: DynamicHomePage
          config:
            props:
              # title: Welcome back!
              # subtitle: Welcome back {{displayName}}
              # pageTitle: RHDH

              localClock:
              #   label: Local
              #   format: time

              # worldClocks:
              #   - label: Raleigh
              #     timeZone: EST
              #   - label: London
              #     timeZone: GMT
              #   - label: Brno
              #     timeZone: CET
              #   - label: Bangalore
              #     timeZone: IST

      mountPoints:
        # New
        - mountPoint: home.page/cards
          importName: WorldClock
          config:
            layouts:
              xl: { w: 12, h: 1 }
              lg: { w: 12, h: 1 }
              md: { w: 12, h: 1 }
              sm: { w: 12, h: 1 }
              xs: { w: 12, h: 1 }
              xxs: { w: 12, h: 1 }
            props:
              worldClocks:
                - label: Raleigh
                  timeZone: EST
                - label: London
                  timeZone: GMT
                - label: Brno
                  timeZone: CET
                - label: Bangalore
                  timeZone: IST
              timeFormat:
                day: 2-digit
                month: 2-digit
                hour: 2-digit
                minute: 2-digit

        - mountPoint: home.page/cards
          importName: SearchBar
          config:
            layouts:
              xl: { w: 10, h: 1, x: 1 }
              lg: { w: 10, h: 1, x: 1 }
              md: { w: 10, h: 1, x: 1 }
              sm: { w: 10, h: 1, x: 1 }
              xs: { w: 12, h: 1 }
              xxs: { w: 12, h: 1 }
        - mountPoint: home.page/cards
          importName: QuickAccessCard
          config:
            layouts:
              xl: { w: 7, h: 8 }
              lg: { w: 7, h: 8 }
              md: { w: 7, h: 8 }
              sm: { w: 12, h: 8 }
              xs: { w: 12, h: 8 }
              xxs: { w: 12, h: 8 }
        - mountPoint: home.page/cards
          importName: CatalogStarredEntitiesCard
          config:
            layouts:
              xl: { w: 5, h: 4, x: 7 }
              lg: { w: 5, h: 4, x: 7 }
              md: { w: 5, h: 4, x: 7 }
              sm: { w: 12, h: 4 }
              xs: { w: 12, h: 4 }
              xxs: { w: 12, h: 4 }

✔️ Checklist

• A changeset describing the change and affected packages. (more info)
• Added or Updated documentation
• Tests for new functionality and regression tests for bug fixes
• Screenshots attached (for UI changes)

[rhdh-gh-app]

Important

This PR includes changes that affect public-facing API. Please ensure you are adding/updating documentation for new features or behavior.

Changed Packages

Package Name	Package Path	Changeset Bump	Current Version
app	workspaces/homepage/packages/app	none	v0.0.0
backend	workspaces/homepage/packages/backend	none	v0.0.0
@red-hat-developer-hub/backstage-plugin-dynamic-home-page	workspaces/homepage/plugins/dynamic-home-page	minor	v1.0.3

[sonarqubecloud]

Quality Gate passed

Issues
2 New issues
0 Accepted issues

Measures
0 Security Hotspots
0.0% Coverage on New Code
1.4% Duplication on New Code

See analysis details on SonarQube Cloud

[debsmita1]

/lgtm