Move HomepageTimer and use props over config (#7533)

packages/app/src/components/home/HomePage.tsx

@@ -15,26 +15,42 @@
  */
 
 import {
-  Content,
-  Header,
-  HomepageTimer,
-  Page,
-} from '@backstage/core-components';
-import {
-  ComponentAccordion,
-  ComponentTab,
-  ComponentTabs,
   HomePageRandomJoke,
+  ComponentAccordion,
+  ComponentTabs,
+  ComponentTab,
   WelcomeTitle,
+  HeaderWorldClock,
+  ClockConfig,
 } from '@backstage/plugin-home';
+import { Content, Header, Page } from '@backstage/core-components';
 import { HomePageSearchBar } from '@backstage/plugin-search';
 import Grid from '@material-ui/core/Grid';
 import React from 'react';
 
+const clockConfigs: ClockConfig[] = [
+  {
+    label: 'NYC',
+    timeZone: 'America/New_York',
+  },
+  {
+    label: 'UTC',
+    timeZone: 'UTC',
+  },
+  {
+    label: 'STO',
+    timeZone: 'Europe/Stockholm',
+  },
+  {
+    label: 'TYO',
+    timeZone: 'Asia/Tokyo',
+  },
+];
+
 export const HomePage = () => (
   <Page themeId="home">
     <Header title={<WelcomeTitle />} pageTitleOverride="Home">
-      <HomepageTimer />
+      <HeaderWorldClock clockConfigs={clockConfigs} />
     </Header>
     <Content>
       <Grid container spacing={3}>

packages/core-components/api-report.md

@@ -569,7 +569,7 @@ export function HelpIcon(props: IconComponentProps): JSX.Element;
 
 // Warning: (ae-missing-release-tag) "HomepageTimer" is exported by the package, but it is missing a release tag (@alpha, @beta, @public, or @internal)
 //
-// @public (undocumented)
+// @public @deprecated
 export function HomepageTimer(_props: {}): JSX.Element | null;
 
 // Warning: (ae-forgotten-export) The symbol "Props" needs to be exported by the entry point index.d.ts

packages/core-components/src/layout/HomepageTimer/HomepageTimer.tsx

@@ -67,6 +67,10 @@ function getTimes(configApi: ConfigApi) {
   return clocks;
 }
 
+/**
+ * Please use the HeaderWorldClock in the home plugin
+ * @deprecated in favor of the HeaderWorldClock which is found in the to home plugin
+ */
 export function HomepageTimer(_props: {}) {
   const configApi = useApi(configApiRef);