#29 Add links to front page

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

@@ -2,20 +2,25 @@ import React from 'react';
 import {
   HomePageToolkit,
   HomePageCompanyLogo,
-  TemplateBackstageLogoIcon,
   HomePageTopVisited,
   HomePageRecentlyVisited,
 } from '@backstage/plugin-home';
 import { Content, Page } from '@backstage/core-components';
 import { HomePageSearchBar } from '@backstage/plugin-search';
-import {
-  SearchContextProvider,
-} from '@backstage/plugin-search-react';
+import { SearchContextProvider } from '@backstage/plugin-search-react';
 import { Grid, makeStyles } from '@material-ui/core';
-import { StatusCard } from "@internal/plugin-instatus";
+import { StatusCard } from '@internal/plugin-instatus';
 import { XkcdComicCard } from 'backstage-plugin-xkcd';
 import { useTheme } from '@material-ui/core/styles';
 import LogoFull from '../Root/LogoFull';
+import grafanaLogo from './logos/Grafana.png';
+import argoLogo from './logos/Argo.png';
+import googleCloudLogo from './logos/GoogleCloud.png';
+import googleLogo from './logos/Google.png';
+import databricksLogo from './logos/Databricks.png';
+import githubLogo from './logos/Github.png';
+import daskLogo from './logos/DASK.png';
+import skipLogo from './logos/SKIP.png';
 
 const useStyles = makeStyles(theme => ({
   searchBarInput: {
@@ -26,8 +31,8 @@ const useStyles = makeStyles(theme => ({
     boxShadow: theme.shadows[1],
   },
   searchBarOutline: {
-    borderStyle: 'none'
-  }
+    borderStyle: 'none',
+  },
 }));
 
 const useLogoStyles = makeStyles(theme => ({
@@ -60,9 +65,14 @@ export const HomePage = () => {
               className={container}
               logo={<LogoFull type={mode} className={`${svg} ${path}`} />}
             />
-            <Grid container item xs={12} justifyContent='center'>
+            <Grid container item xs={12} justifyContent="center">
               <HomePageSearchBar
-                InputProps={{ classes: { root: classes.searchBarInput, notchedOutline: classes.searchBarOutline } }}
+                InputProps={{
+                  classes: {
+                    root: classes.searchBarInput,
+                    notchedOutline: classes.searchBarOutline,
+                  },
+                }}
                 placeholder="Search"
               />
             </Grid>
@@ -76,23 +86,75 @@ export const HomePage = () => {
             </Grid>
             <Grid item xs={12}>
               <HomePageToolkit
-                tools={[{
-                  url: 'https://monitoring.kartverket.dev',
-                  label: 'Grafana',
-                  icon: <TemplateBackstageLogoIcon />,
-                }, {
-                  url: 'https://console.cloud.google.com',
-                  label: 'Google Cloud',
-                  icon: <TemplateBackstageLogoIcon />,
-                }, {
-                  url: 'https://github.com/kartverket',
-                  label: 'GitHub',
-                  icon: <TemplateBackstageLogoIcon />,
-                }]}
+                tools={[
+                  {
+                    url: 'https://monitoring.kartverket.dev',
+                    label: 'Grafana',
+                    icon: (
+                      <img src={grafanaLogo} alt="Logo of Grafana" width={35} />
+                    ),
+                  },
+                  {
+                    url: 'https://argo.kartverket.dev',
+                    label: 'Argo CD',
+                    icon: (
+                      <img src={argoLogo} alt="Logo of Argo CD" width={45} />
+                    ),
+                  },
+                  {
+                    url: 'https://accounts.gcp.databricks.com',
+                    label: 'Databricks',
+                    icon: (
+                      <img
+                        src={databricksLogo}
+                        alt="Logo of Databricks"
+                        width={35}
+                      />
+                    ),
+                  },
+                  {
+                    url: 'https://console.cloud.google.com',
+                    label: 'Google Cloud',
+                    icon: (
+                      <img
+                        src={googleCloudLogo}
+                        alt="Logo of Google"
+                        width={35}
+                      />
+                    ),
+                  },
+                  {
+                    url: 'https://github.com/kartverket',
+                    label: 'GitHub',
+                    icon: (
+                      <img src={githubLogo} alt="Logo of GitHub" width={35} />
+                    ),
+                  },
+                  {
+                    url: 'https://jit.skip.kartverket.no',
+                    label: 'JIT',
+                    icon: (
+                      <img src={googleLogo} alt="Logo of Google" width={35} />
+                    ),
+                  },
+                  {
+                    url: 'https://kartverket.atlassian.net/wiki/spaces/DAT/overview?homepageId=490045441',
+                    label: 'DASK Docs',
+                    icon: <img src={daskLogo} alt="Logo of DASK" width={35} />,
+                  },
+                  {
+                    url: 'https://kartverket.atlassian.net/wiki/spaces/SKIPDOK/overview',
+                    label: 'SKIP Docs',
+                    icon: <img src={skipLogo} alt="Logo of SKIP" width={35} />,
+                  },
+                ]}
               />
             </Grid>
             <Grid item xs={12} md={4}>
-              <StatusCard pageId='skip' reportUrl="https://kartverketgroup.slack.com/archives/C028ZEED280" />
+              <StatusCard
+                pageId="skip"
+                reportUrl="https://kartverketgroup.slack.com/archives/C028ZEED280"
+              />
             </Grid>
             <Grid item xs={12} md={4}>
               <XkcdComicCard />
@@ -104,11 +166,11 @@ export const HomePage = () => {
                 sandbox="allow-top-navigation allow-scripts"
                 src="https://fedifeed.com/api/v1/feed?user=kv_plattform&instance=https%3A%2F%2Fmastodon.social&instance_type=&theme=auto-dark&size=100&header=true&replies=true&boosts=true"
                 style={{
-                  "border": '0px',
-                  "overflow": 'hidden',
-                  "width": '100%',
-                  "height": '100%',
-                  "minHeight": '400px',
+                  border: '0px',
+                  overflow: 'hidden',
+                  width: '100%',
+                  height: '100%',
+                  minHeight: '400px',
                 }}
               />
               {/*<iframe

yarn.lock

@@ -9867,7 +9867,7 @@
   resolved "https://registry.yarnpkg.com/@types/range-parser/-/range-parser-1.2.7.tgz#50ae4353eaaddc04044279812f52c8c65857dbcb"
   integrity sha512-hKormJbkJqzQGhziax5PItDUTMAM9uE2XXQmM37dyd4hVM+5aVl7oVxMVUiVQn2oCQFN/LKCZdvSM0pFRqbSmQ==
 
-"@types/react-dom@*", "@types/react-dom@<18.0.0":
+"@types/react-dom@*", "@types/react-dom@<18.0.0", "@types/react-dom@^17":
   version "17.0.25"
   resolved "https://registry.yarnpkg.com/@types/react-dom/-/react-dom-17.0.25.tgz#e0e5b3571e1069625b3a3da2b279379aa33a0cb5"
   integrity sha512-urx7A7UxkZQmThYA4So0NelOVjx3V4rNFVJwp0WZlbIK5eM4rNJDiN3R/E9ix0MBh6kAEojk/9YL+Te6D9zHNA==
@@ -10796,6 +10796,7 @@ anymatch@^3.0.3, anymatch@~3.1.2:
     "@backstage/plugin-user-settings" "^0.8.0"
     "@backstage/theme" "^0.5.0"
     "@internal/plugin-instatus" "^0.1.0"
+    "@k-phoen/backstage-plugin-grafana" "^0.1.22"
     "@material-ui/core" "^4.12.2"
     "@material-ui/icons" "^4.9.1"
     backstage-plugin-xkcd "^1.0.9"