[dashboard] long living caching of icons/images

README.md

@@ -1,6 +1,6 @@
 <p align="center">
   <a href="https://www.gitpod.io">
-    <img src="https://raw.githubusercontent.com/gitpod-io/gitpod/master/components/dashboard/public/gitpod.svg" height="60">
+    <img src="https://raw.githubusercontent.com/gitpod-io/gitpod/master/components/dashboard/src/icons/gitpod.svg" height="60">
     <h3 align="center">Gitpod</h3>
   </a>
   <p align="center">Always ready-to-code.</p>

components/dashboard/src/Login.tsx

@@ -4,6 +4,7 @@
  * See License-AGPL.txt in the project root for license information.
  */
 
+import * as images from './images';
 import { AuthProviderInfo } from "@gitpod/gitpod-protocol";
 import { useContext, useEffect, useState } from "react";
 import { UserContext } from "./user-context";
@@ -51,7 +52,7 @@ export function Login() {
             <div id="feature-section-column" className="flex max-w-2xl h-full ml-auto pt-6">
                 <div className="flex flex-col space-y-12 pl-6 pr-24 m-auto">
                     <div>
-                        <img src="/images/gitpod.svg" className="h-8" />
+                        <img src={images.gitpod} className="h-8" />
                     </div>
                     <div>
                         <h1 className="xl:text-7xl text-5xl">Save Time<br /> with Prebuilds</h1>
@@ -60,7 +61,7 @@ export function Login() {
                         Gitpod continuously builds your git branches like a CI server. This means no more waiting for dependencies to be downloaded and builds to finish. <a className="underline underline-thickness-thin underline-offset-small hover:text-gray-600" href="https://www.gitpod.io/docs/prebuilds/" target="gitpod-docs">Learn more about Prebuilds</a>
                     </div>
                     <div>
-                        <img src="/images/terminal.svg" className="h-64 -ml-8" />
+                        <img src={images.terminal} className="h-64 -ml-8" />
                     </div>
                 </div>
             </div>
@@ -70,7 +71,7 @@ export function Login() {
                 <div className="flex-grow h-100 flex flex-row items-center justify-center" >
                     <div className="rounded-xl px-10 py-10 mx-auto">
                         <div className="mx-auto pb-8">
-                            <img src="/gitpod.svg" className="h-16 mx-auto" />
+                            <img src={images.gitpodIcon} className="h-16 mx-auto" />
                         </div>
                         <div className="mx-auto text-center pb-8 space-y-2">
                             <h1 className="text-3xl">Log in to Gitpod</h1>

components/dashboard/src/components/Menu.tsx

@@ -10,7 +10,7 @@ import { Link } from "react-router-dom";
 import { gitpodHostUrl } from "../service/service";
 import { UserContext } from "../user-context";
 import ContextMenu from "./ContextMenu";
-
+import * as images from '../images';
 interface Entry {
     title: string, link: string
 }
@@ -46,7 +46,7 @@ function Menu(props: { left: Entry[], right: Entry[] }) {
                 `}} />
             <div className="flex justify-between items-center pr-3">
                 <Link to="/">
-                    <img src="/gitpod.svg" className="h-6" />
+                    <img src={images.gitpodIcon} className="h-6" />
                 </Link>
             </div>
             <div className="lg:hidden flex-grow" />

components/dashboard/src/images.ts

@@ -0,0 +1,25 @@
+/**
+ * Copyright (c) 2021 Gitpod GmbH. All rights reserved.
+ * Licensed under the GNU Affero General Public License (AGPL).
+ * See License-AGPL.txt in the project root for license information.
+ */
+
+import github from './images/github.svg';
+import gitlab from './images/gitlab.svg';
+import bitbucket from './images/bitbucket.svg';
+import terminal from './images/terminal.svg';
+import gitpod from './images/gitpod.svg';
+import gitpodIcon from './icons/gitpod.svg';
+import theia from './images/theia-gray.svg';
+import vscode from './images/vscode.svg';
+
+export {
+    github,
+    gitlab,
+    bitbucket,
+    terminal,
+    gitpod,
+    gitpodIcon,
+    theia,
+    vscode
+}

components/dashboard/src/provider-utils.tsx

@@ -4,15 +4,16 @@
  * See License-AGPL.txt in the project root for license information.
  */
 
+import * as images from './images';
 
 function iconForAuthProvider(type: string) {
     switch (type) {
         case "GitHub":
-            return "/images/github.svg"
+            return images.github
         case "GitLab":
-            return "/images/gitlab.svg"
+            return images.gitlab
         case "BitBucket":
-            return "/images/bitbucket.svg"
+            return images.bitbucket
         default:
             break;
     }

components/dashboard/src/settings/Preferences.tsx

@@ -9,6 +9,7 @@ import { getGitpodService } from "../service/service";
 import SelectableCard from "../components/SelectableCard";
 import { UserContext } from "../user-context";
 import { SettingsPage } from "./SettingsPage";
+import * as images from '../images';
 
 export default function Preferences() {
     const { user } = useContext(UserContext);
@@ -33,12 +34,12 @@ export default function Preferences() {
             <div className="mt-4 space-x-4 flex">
                 <SelectableCard className="w-36 h-40" title="VS Code" selected={defaultIde === 'code'} onClick={() => actuallySetDefaultIde('code')}>
                     <div className="flex-grow flex justify-center align-center">
-                        <img className="w-16 filter-grayscale" src="/images/vscode.svg"/>
+                        <img className="w-16 filter-grayscale" src={images.vscode}/>
                     </div>
                 </SelectableCard>
                 <SelectableCard className="w-36 h-40" title="Theia" selected={defaultIde === 'theia'} onClick={() => actuallySetDefaultIde('theia')}>
                     <div className="flex-grow flex justify-center align-center">
-                        <img className="w-16" src="/images/theia-gray.svg"/>
+                        <img className="w-16" src={images.theia}/>
                     </div>
                 </SelectableCard>
             </div>

components/dashboard/src/start/StartPage.tsx

@@ -4,6 +4,8 @@
  * See License-AGPL.txt in the project root for license information.
  */
 
+import * as images from '../images';
+
 export enum StartPhase {
   Checking = 0,
   Preparing = 1,
@@ -76,7 +78,7 @@ export function StartPage(props: StartPageProps) {
   return <div className="w-screen h-screen bg-white align-middle">
     <div className="flex flex-col mx-auto items-center h-screen">
       <div className="h-1/3"></div>
-      <img src="/gitpod.svg" className={`h-16 flex-shrink-0 ${(error || phase === StartPhase.Stopped) ? '' : 'animate-bounce'}`} />
+      <img src={images.gitpodIcon} className={`h-16 flex-shrink-0 ${(error || phase === StartPhase.Stopped) ? '' : 'animate-bounce'}`} />
       <h3 className="mt-8 text-xl">{title}</h3>
       {(phase < StartPhase.Stopping) && <ProgressBar phase={phase} error={!!error} />}
       {props.children}