[dashboard] Don't load all images from one module

Fixes #3550 (comment)

Author: jankeromnes

components/dashboard/src/Login.tsx

@@ -4,12 +4,13 @@
  * See License-AGPL.txt in the project root for license information.
  */
 
-import { gitpod, gitpodIcon } from './images';
 import { AuthProviderInfo } from "@gitpod/gitpod-protocol";
 import { useContext, useEffect, useState } from "react";
 import { UserContext } from "./user-context";
 import { getGitpodService, gitpodHostUrl, reconnectGitpodService } from "./service/service";
 import { iconForAuthProvider, simplifyProviderName } from "./provider-utils";
+import gitpod from './images/gitpod.svg';
+import gitpodIcon from './icons/gitpod.svg';
 import automate from "./images/welcome/automate.svg";
 import code from "./images/welcome/code.svg";
 import collaborate from "./images/welcome/collaborate.svg";

components/dashboard/src/components/Menu.tsx

@@ -7,10 +7,10 @@
 import { User } from "@gitpod/gitpod-protocol";
 import { useContext } from "react";
 import { Link } from "react-router-dom";
+import gitpodIcon from '../icons/gitpod.svg';
 import { gitpodHostUrl } from "../service/service";
 import { UserContext } from "../user-context";
 import ContextMenu from "./ContextMenu";
-import * as images from '../images';
 import { useLocation } from "react-router";
 interface Entry {
     title: string, link: string, alternatives?: string[]
@@ -44,7 +44,7 @@ function Menu(props: { left: Entry[], right: Entry[] }) {
         <header className="lg:px-28 px-10 bg-white flex flex-wrap items-center py-4">
             <div className="flex justify-between items-center pr-3">
                 <Link to="/">
-                    <img src={images.gitpodIcon} className="h-6" />
+                    <img src={gitpodIcon} className="h-6" />
                 </Link>
             </div>
             <div className="flex flex-1 items-center w-auto w-full" id="menu">

components/dashboard/src/images.ts

@@ -4,7 +4,9 @@
  * See License-AGPL.txt in the project root for license information.
  */
 
-import {github, gitlab, bitbucket} from './images';
+import bitbucket from './images/bitbucket.svg';
+import github from './images/github.svg';
+import gitlab from './images/gitlab.svg';
 import { gitpodHostUrl } from "./service/service";
 
 

components/dashboard/src/provider-utils.tsx

@@ -4,13 +4,14 @@
  * See License-AGPL.txt in the project root for license information.
  */
 
-import { copy, exclamation } from '../images';
 import { AuthProviderEntry, AuthProviderInfo } from "@gitpod/gitpod-protocol";
 import React, { useContext, useEffect, useState } from "react";
 import ContextMenu, { ContextMenuEntry } from "../components/ContextMenu";
 import { SettingsPage } from "./SettingsPage";
 import { getGitpodService, gitpodHostUrl } from "../service/service";
 import { UserContext } from "../user-context";
+import copy from '../images/copy.svg';
+import exclamation from '../images/exclamation.svg';
 import ThreeDots from '../icons/ThreeDots.svg';
 import Modal from "../components/Modal";
 import { openAuthorizeWindow } from "../provider-utils";

components/dashboard/src/settings/Integrations.tsx

@@ -9,7 +9,8 @@ import { getGitpodService } from "../service/service";
 import SelectableCard from "../components/SelectableCard";
 import { UserContext } from "../user-context";
 import { SettingsPage } from "./SettingsPage";
-import * as images from '../images';
+import theia from '../images/theia-gray.svg';
+import vscode from '../images/vscode.svg';
 
 export default function Preferences() {
     const { user } = useContext(UserContext);
@@ -34,12 +35,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}/>
+                        <img className="w-16 filter-grayscale" src={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}/>
+                        <img className="w-16" src={theia}/>
                     </div>
                 </SelectableCard>
             </div>

components/dashboard/src/settings/Preferences.tsx

@@ -4,7 +4,7 @@
  * See License-AGPL.txt in the project root for license information.
  */
 
-import * as images from '../images';
+import gitpodIcon from '../icons/gitpod.svg';
 
 export enum StartPhase {
   Checking = 0,
@@ -73,7 +73,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={images.gitpodIcon} className={`h-16 flex-shrink-0 ${(error || phase === StartPhase.Stopped) ? '' : 'animate-bounce'}`} />
+      <img src={gitpodIcon} className={`h-16 flex-shrink-0 ${(error || phase === StartPhase.Stopped) ? '' : 'animate-bounce'}`} />
       <h3 className="mt-8 text-xl">{title}</h3>
       {typeof(phase) === 'number' && phase < StartPhase.Stopping && <ProgressBar phase={phase} error={!!error} />}
       {props.children}