Merge pull request #257 from porter-dev/beta.3.fe-refactor

Beta.3.fe refactor

dashboard/package-lock.json

@@ -1160,14 +1160,6 @@
         "follow-redirects": "^1.10.0"
       }
     },
-    "axios-retry": {
-      "version": "3.1.9",
-      "resolved": "https://registry.npmjs.org/axios-retry/-/axios-retry-3.1.9.tgz",
-      "integrity": "sha512-NFCoNIHq8lYkJa6ku4m+V1837TP6lCa7n79Iuf8/AqATAHYB0ISaAS1eyIenDOfHOLtym34W65Sjke2xjg2fsA==",
-      "requires": {
-        "is-retry-allowed": "^1.1.0"
-      }
-    },
     "babel-plugin-styled-components": {
       "version": "1.12.0",
       "resolved": "https://registry.npmjs.org/babel-plugin-styled-components/-/babel-plugin-styled-components-1.12.0.tgz",
@@ -1620,11 +1612,6 @@
         }
       }
     },
-    "charenc": {
-      "version": "0.0.2",
-      "resolved": "https://registry.npmjs.org/charenc/-/charenc-0.0.2.tgz",
-      "integrity": "sha1-wKHS86cJLgN3S/qD8UwPxXkKhmc="
-    },
     "chokidar": {
       "version": "3.3.0",
       "resolved": "https://registry.npmjs.org/chokidar/-/chokidar-3.3.0.tgz",
@@ -1789,11 +1776,6 @@
       "integrity": "sha512-Rd3se6QB+sO1TwqZjscQrurpEPIfO0/yYnSin6Q/rD3mOutHvUrCAhJub3r90uNb+SESBuE0QYoB90YdfatsRg==",
       "dev": true
     },
-    "component-type": {
-      "version": "1.2.1",
-      "resolved": "https://registry.npmjs.org/component-type/-/component-type-1.2.1.tgz",
-      "integrity": "sha1-ikeQFwAjjk/DIml3EjAibyS0Fak="
-    },
     "compressible": {
       "version": "2.0.18",
       "resolved": "https://registry.npmjs.org/compressible/-/compressible-2.0.18.tgz",
@@ -2039,11 +2021,6 @@
         "which": "^1.2.9"
       }
     },
-    "crypt": {
-      "version": "0.0.2",
-      "resolved": "https://registry.npmjs.org/crypt/-/crypt-0.0.2.tgz",
-      "integrity": "sha1-iNf/fsDfuG9xPch7u0LQRNPmxBs="
-    },
     "crypto-browserify": {
       "version": "3.12.0",
       "resolved": "https://registry.npmjs.org/crypto-browserify/-/crypto-browserify-3.12.0.tgz",
@@ -2133,21 +2110,6 @@
       "integrity": "sha1-WW6WmP0MgOEgOMK4LW6xs1tiJNk=",
       "dev": true
     },
-    "debug": {
-      "version": "3.1.0",
-      "resolved": "https://registry.npmjs.org/debug/-/debug-3.1.0.tgz",
-      "integrity": "sha512-OX8XqP7/1a9cqkxYw2yXss15f26NKWBpDXQd0/uK/KPqdQhxbPa994hnzjcE2VqQpDslf55723cKPUOGSmMY3g==",
-      "requires": {
-        "ms": "2.0.0"
-      },
-      "dependencies": {
-        "ms": {
-          "version": "2.0.0",
-          "resolved": "https://registry.npmjs.org/ms/-/ms-2.0.0.tgz",
-          "integrity": "sha1-VgiurfwAvmwpAd9fmGF4jeDVl8g="
-        }
-      }
-    },
     "decamelize": {
       "version": "1.2.0",
       "resolved": "https://registry.npmjs.org/decamelize/-/decamelize-1.2.0.tgz",
@@ -4078,7 +4040,8 @@
     "is-buffer": {
       "version": "1.1.6",
       "resolved": "https://registry.npmjs.org/is-buffer/-/is-buffer-1.1.6.tgz",
-      "integrity": "sha512-NcdALwpXkTm5Zvvbk7owOUSvVvBKDgKP5/ewfXEznmQFfs4ZRmanOeKBTjRVjka3QFoN6XJ+9F3USqfHqTaU5w=="
+      "integrity": "sha512-NcdALwpXkTm5Zvvbk7owOUSvVvBKDgKP5/ewfXEznmQFfs4ZRmanOeKBTjRVjka3QFoN6XJ+9F3USqfHqTaU5w==",
+      "dev": true
     },
     "is-callable": {
       "version": "1.2.2",
@@ -4204,11 +4167,6 @@
         "has-symbols": "^1.0.1"
       }
     },
-    "is-retry-allowed": {
-      "version": "1.2.0",
-      "resolved": "https://registry.npmjs.org/is-retry-allowed/-/is-retry-allowed-1.2.0.tgz",
-      "integrity": "sha512-RUbUeKwvm3XG2VYamhJL1xFktgjvPzL0Hq8C+6yrWIswDy3BIXGqCxhxkc30N9jqK311gVU137K8Ei55/zVJRg=="
-    },
     "is-stream": {
       "version": "1.1.0",
       "resolved": "https://registry.npmjs.org/is-stream/-/is-stream-1.1.0.tgz",
@@ -4281,11 +4239,6 @@
         "pretty-format": "^24.9.0"
       }
     },
-    "join-component": {
-      "version": "1.1.0",
-      "resolved": "https://registry.npmjs.org/join-component/-/join-component-1.1.0.tgz",
-      "integrity": "sha1-uEF7dQZho5K+4sJTfGiyqdSXfNU="
-    },
     "js-base64": {
       "version": "3.6.0",
       "resolved": "https://registry.npmjs.org/js-base64/-/js-base64-3.6.0.tgz",
@@ -4460,16 +4413,6 @@
       "resolved": "https://registry.npmjs.org/markdown-to-jsx/-/markdown-to-jsx-7.1.0.tgz",
       "integrity": "sha512-f0LxzbmLfInOSmTC/BaMB44RVmPN2cQom9D4pQzp6c5pOmO0yjxWMDJs78JSSLmncn+bi0Qy0VlJjsRVk8AUpg=="
     },
-    "md5": {
-      "version": "2.3.0",
-      "resolved": "https://registry.npmjs.org/md5/-/md5-2.3.0.tgz",
-      "integrity": "sha512-T1GITYmFaKuO91vxyoQMFETst+O71VUPEU3ze5GNzDm0OWdP8v1ziTaAEPUr/3kLsY3Sftgz242A1SetQiDL7g==",
-      "requires": {
-        "charenc": "0.0.2",
-        "crypt": "0.0.2",
-        "is-buffer": "~1.1.6"
-      }
-    },
     "md5.js": {
       "version": "1.3.5",
       "resolved": "https://registry.npmjs.org/md5.js/-/md5.js-1.3.5.tgz",
@@ -4755,7 +4698,8 @@
     "ms": {
       "version": "2.1.3",
       "resolved": "https://registry.npmjs.org/ms/-/ms-2.1.3.tgz",
-      "integrity": "sha512-6FlzubTLZG3J2a/NVCAleEhjzq5oxgHyaCU9yYXvcLsvoVaHJq/s5xXI6/XXP6tz7R9xAOtHnSO/tXtF3WRTlA=="
+      "integrity": "sha512-6FlzubTLZG3J2a/NVCAleEhjzq5oxgHyaCU9yYXvcLsvoVaHJq/s5xXI6/XXP6tz7R9xAOtHnSO/tXtF3WRTlA==",
+      "dev": true
     },
     "multicast-dns": {
       "version": "6.2.3",
@@ -5369,39 +5313,6 @@
         "fflate": "^0.4.1"
       }
     },
-    "posthog-node": {
-      "version": "1.0.6",
-      "resolved": "https://registry.npmjs.org/posthog-node/-/posthog-node-1.0.6.tgz",
-      "integrity": "sha512-nlIg09L0kObrJQWx9kiNfcuqkVOxPLYnb1qb1ze7bT0sF/04gkRBDVqNmaN+bcGxUzASgkmw5QPJ3zrBuJLRBA==",
-      "requires": {
-        "axios": "^0.19.0",
-        "axios-retry": "^3.0.2",
-        "component-type": "^1.2.1",
-        "join-component": "^1.1.0",
-        "md5": "^2.2.1",
-        "ms": "^2.0.0",
-        "remove-trailing-slash": "^0.1.0",
-        "uuid": "^3.2.1"
-      },
-      "dependencies": {
-        "axios": {
-          "version": "0.19.2",
-          "resolved": "https://registry.npmjs.org/axios/-/axios-0.19.2.tgz",
-          "integrity": "sha512-fjgm5MvRHLhx+osE2xoekY70AhARk3a6hkN+3Io1jc00jtquGvxYlKlsFUhmUET0V5te6CcZI7lcv2Ym61mjHA==",
-          "requires": {
-            "follow-redirects": "1.5.10"
-          }
-        },
-        "follow-redirects": {
-          "version": "1.5.10",
-          "resolved": "https://registry.npmjs.org/follow-redirects/-/follow-redirects-1.5.10.tgz",
-          "integrity": "sha512-0V5l4Cizzvqt5D44aTXbFZz+FtyXV1vrDN6qrelxtfYQKW0KO0W2T/hkE8xvGa/540LkZlkaUjO4ailYTFtHVQ==",
-          "requires": {
-            "debug": "=3.1.0"
-          }
-        }
-      }
-    },
     "pretty-error": {
       "version": "2.1.2",
       "resolved": "https://registry.npmjs.org/pretty-error/-/pretty-error-2.1.2.tgz",
@@ -5806,11 +5717,6 @@
       "integrity": "sha1-wkvOKig62tW8P1jg1IJJuSN52O8=",
       "dev": true
     },
-    "remove-trailing-slash": {
-      "version": "0.1.1",
-      "resolved": "https://registry.npmjs.org/remove-trailing-slash/-/remove-trailing-slash-0.1.1.tgz",
-      "integrity": "sha512-o4S4Qh6L2jpnCy83ysZDau+VORNvnFw07CKSAymkd6ICNVEPisMyzlc00KlvvicsxKck94SEwhDnMNdICzO+tA=="
-    },
     "renderkid": {
       "version": "2.0.4",
       "resolved": "https://registry.npmjs.org/renderkid/-/renderkid-2.0.4.tgz",
@@ -7237,7 +7143,8 @@
     "uuid": {
       "version": "3.4.0",
       "resolved": "https://registry.npmjs.org/uuid/-/uuid-3.4.0.tgz",
-      "integrity": "sha512-HjSDRw6gZE5JMggctHBcjVak08+KEVhSIiDzFnT9S9aegmp85S/bReBVTb4QTFaRNptJ9kuYaNhnbNEOkbKb/A=="
+      "integrity": "sha512-HjSDRw6gZE5JMggctHBcjVak08+KEVhSIiDzFnT9S9aegmp85S/bReBVTb4QTFaRNptJ9kuYaNhnbNEOkbKb/A==",
+      "dev": true
     },
     "v8-compile-cache": {
       "version": "2.2.0",

dashboard/src/components/ExpandableResource.tsx

@@ -1,7 +1,7 @@
 import React, { Component } from 'react';
 import styled from 'styled-components';
-import api from '../shared/api';
-import { Context } from '../shared/Context';
+import api from 'shared/api';
+import { Context } from 'shared/Context';
 
 import ResourceTab from './ResourceTab';
 

dashboard/src/components/Loading.tsx

@@ -1,6 +1,6 @@
 import React, { Component } from 'react';
 import styled from 'styled-components';
-import loading from '../assets/loading.gif';
+import loading from 'assets/loading.gif';
 
 type PropsType = {
   offset?: string

dashboard/src/components/ResourceTab.tsx

@@ -1,7 +1,7 @@
 import React, { Component } from 'react';
 import styled from 'styled-components';
 
-import { kindToIcon } from '../shared/rosettaStone';
+import { kindToIcon } from 'shared/rosettaStone';
 
 type PropsType = {
   label: string,

dashboard/src/components/SaveButton.tsx

@@ -1,6 +1,6 @@
 import React, { Component } from 'react';
 import styled from 'styled-components';
-import loading from '../assets/loading.gif';
+import loading from 'assets/loading.gif';
 
 type PropsType = {
   text: string,

dashboard/src/components/StatusIndicator.tsx

@@ -1,6 +1,6 @@
 import React, { Component } from 'react';
 import styled from 'styled-components';
-import loading from '../assets/loading.gif';
+import loading from 'assets/loading.gif';
 
 type PropsType = {
     status: string,

dashboard/src/components/image-selector/ImageSelector.tsx

@@ -1,12 +1,12 @@
 import React, { Component } from 'react';
 import styled from 'styled-components';
-import info from '../../assets/info.svg';
-import edit from '../../assets/edit.svg';
+import info from 'assets/info.svg';
+import edit from 'assets/edit.svg';
 
-import api from '../../shared/api';
-import { integrationList } from '../../shared/common';
-import { Context } from '../../shared/Context';
-import { ImageType } from '../../shared/types';
+import api from 'shared/api';
+import { integrationList } from 'shared/common';
+import { Context } from 'shared/Context';
+import { ImageType } from 'shared/types';
 
 import Loading from '../Loading';
 import TagList from './TagList';

dashboard/src/components/image-selector/TagList.tsx

@@ -1,10 +1,10 @@
 import React, { Component } from 'react';
 import styled from 'styled-components';
-import tag_icon from '../../assets/tag.png';
-import info from '../../assets/info.svg';
+import tag_icon from 'assets/tag.png';
+import info from 'assets/info.svg';
 
-import api from '../../shared/api';
-import { Context } from '../../shared/Context';
+import api from 'shared/api';
+import { Context } from 'shared/Context';
 
 import Loading from '../Loading';
 

dashboard/src/components/repo-selector/BranchList.tsx

@@ -1,9 +1,9 @@
 import React, { Component } from 'react';
 import styled from 'styled-components';
-import branch_icon from '../../assets/branch.png';
+import branch_icon from 'assets/branch.png';
 
-import api from '../../shared/api';
-import { Context } from '../../shared/Context';
+import api from 'shared/api';
+import { Context } from 'shared/Context';
 
 import Loading from '../Loading';
 

dashboard/src/components/repo-selector/ContentsList.tsx

@@ -1,13 +1,13 @@
 import { stringify } from 'querystring';
 import React, { Component } from 'react';
 import styled from 'styled-components';
-import file from '../../assets/file.svg';
-import folder from '../../assets/folder.svg';
-import info from '../../assets/info.svg';
+import file from 'assets/file.svg';
+import folder from 'assets/folder.svg';
+import info from 'assets/info.svg';
 
-import api from '../../shared/api';
-import { Context } from '../../shared/Context';
-import { FileType } from '../../shared/types';
+import api from 'shared/api';
+import { Context } from 'shared/Context';
+import { FileType } from 'shared/types';
 
 import Loading from '../Loading';
 
@@ -152,7 +152,7 @@ export default class ContentsList extends Component<PropsType, StateType> {
         lastItem={false}
       >
         <img src={info} />
-        Select subfolder (optional)
+        Select subfolder (Optional)
       </FileItem>
     );
   }

dashboard/src/components/repo-selector/NewGHAction.tsx

@@ -1,10 +1,10 @@
 import React, { Component } from 'react';
 import styled from 'styled-components';
 
-import { ChartType } from '../../shared/types';
-import api from '../../shared/api';
-import { Context } from '../../shared/Context';
-import InputRow from '../../components/values-form/InputRow';
+import { ChartType } from 'shared/types';
+import api from 'shared/api';
+import { Context } from 'shared/Context';
+import InputRow from 'components/values-form/InputRow';
 
 import Loading from '../Loading';
 

dashboard/src/components/repo-selector/RepoSelector.tsx

@@ -1,13 +1,13 @@
 import React, { Component } from 'react';
 import styled from 'styled-components';
-import github from '../../assets/github.png';
-import info from '../../assets/info.svg';
+import github from 'assets/github.png';
+import info from 'assets/info.svg';
 
-import api from '../../shared/api';
-import { RepoType, ChartType } from '../../shared/types';
-import { Context } from '../../shared/Context';
+import api from 'shared/api';
+import { RepoType, ChartType } from 'shared/types';
+import { Context } from 'shared/Context';
 
-import Loading from '../../components/Loading';
+import Loading from 'components/Loading';
 import BranchList from './BranchList';
 import ContentsList from './ContentsList';
 import NewGHAction from './NewGHAction';

dashboard/src/components/values-form/ValuesForm.tsx

@@ -2,9 +2,9 @@ import React, { Component } from 'react';
 import styled from 'styled-components';
 import _ from 'lodash';
 
-import { Section, FormElement } from '../../shared/types';
-import { Context } from '../../shared/Context';
-import api from '../../shared/api';
+import { Section, FormElement } from 'shared/types';
+import { Context } from 'shared/Context';
+import api from 'shared/api';
 
 import CheckboxRow from './CheckboxRow';
 import InputRow from './InputRow';

dashboard/src/main/CurrentError.tsx

@@ -1,8 +1,8 @@
 import React, { Component } from 'react';
 import styled from 'styled-components';
-import close from '../assets/close.png';
+import close from 'assets/close.png';
 
-import { Context } from '../shared/Context';
+import { Context } from 'shared/Context';
 
 type PropsType = {
   currentError: string,

dashboard/src/main/Login.tsx

@@ -1,10 +1,10 @@
 import React, { ChangeEvent, Component } from 'react';
 import styled from 'styled-components';
-import logo from '../assets/logo.png';
+import logo from 'assets/logo.png';
 
-import api from '../shared/api';
-import { emailRegex } from '../shared/regex';
-import { Context } from '../shared/Context';
+import api from 'shared/api';
+import { emailRegex } from 'shared/regex';
+import { Context } from 'shared/Context';
 
 type PropsType = {
   authenticate: () => void

dashboard/src/main/Main.tsx

@@ -1,16 +1,16 @@
 import React, { Component } from 'react';
 import styled, { createGlobalStyle } from 'styled-components';
 import { BrowserRouter, Route, Redirect, Switch } from 'react-router-dom';
-import close from '../assets/close.png';
+import close from 'assets/close.png';
 
-import api from '../shared/api';
-import { Context } from '../shared/Context';
+import api from 'shared/api';
+import { Context } from 'shared/Context';
 
 import Login from './Login';
 import Register from './Register';
 import CurrentError from './CurrentError';
 import Home from './home/Home';
-import Loading from '../components/Loading';
+import Loading from 'components/Loading';
 
 type PropsType = {
 };

dashboard/src/main/Register.tsx

@@ -1,10 +1,10 @@
 import React, { ChangeEvent, Component, useContext } from 'react';
 import styled from 'styled-components';
-import logo from '../assets/logo.png';
+import logo from 'assets/logo.png';
 
-import api from '../shared/api';
-import { emailRegex } from '../shared/regex';
-import { Context } from '../shared/Context';
+import api from 'shared/api';
+import { emailRegex } from 'shared/regex';
+import { Context } from 'shared/Context';
 
 type PropsType = {
   authenticate: () => void

dashboard/src/main/home/Home.tsx

@@ -2,15 +2,15 @@ import React, { Component } from 'react';
 import posthog from 'posthog-js';
 import styled from 'styled-components';
 
-import { Context } from '../../shared/Context';
-import api from '../../shared/api';
-import { ClusterType, ProjectType } from '../../shared/types';
-import { includesCompletedInfraSet } from '../../shared/common';
+import { Context } from 'shared/Context';
+import api from 'shared/api';
+import { ClusterType, ProjectType } from 'shared/types';
+import { includesCompletedInfraSet } from 'shared/common';
 
 import Sidebar from './sidebar/Sidebar';
 import Dashboard from './dashboard/Dashboard';
 import ClusterDashboard from './cluster-dashboard/ClusterDashboard';
-import Loading from '../../components/Loading';
+import Loading from 'components/Loading';
 import Templates from './templates/Templates';
 import Integrations from "./integrations/Integrations";
 import UpdateClusterModal from './modals/UpdateClusterModal';
@@ -21,7 +21,7 @@ import NewProject from './new-project/NewProject';
 import Navbar from './navbar/Navbar';
 import ProvisionerStatus from './provisioner/ProvisionerStatus';
 import ProjectSettings from './project-settings/ProjectSettings';
-import ConfirmOverlay from '../../components/ConfirmOverlay';
+import ConfirmOverlay from 'components/ConfirmOverlay';
 import Modal from './modals/Modal';
 import * as FullStory from '@fullstory/browser';
 

dashboard/src/main/home/cluster-dashboard/ClusterDashboard.tsx

@@ -1,10 +1,10 @@
 import React, { Component } from 'react';
 import styled from 'styled-components';
-import gradient from '../../../assets/gradient.jpg';
+import gradient from 'assets/gradient.jpg';
 
-import { Context } from '../../../shared/Context';
-import { ChartType, StorageType, ClusterType } from '../../../shared/types';
-import api from '../../../shared/api';
+import { Context } from 'shared/Context';
+import { ChartType, StorageType, ClusterType } from 'shared/types';
+import api from 'shared/api';
 
 import ChartList from './chart/ChartList';
 import NamespaceSelector from './NamespaceSelector';

dashboard/src/main/home/cluster-dashboard/NamespaceSelector.tsx

@@ -1,10 +1,10 @@
 import React, { Component } from 'react';
 import styled from 'styled-components';
 
-import { Context } from '../../../shared/Context';
-import api from '../../../shared/api';
+import { Context } from 'shared/Context';
+import api from 'shared/api';
 
-import Selector from '../../../components/Selector';
+import Selector from 'components/Selector';
 
 type PropsType = {
   setNamespace: (x: string) => void,

dashboard/src/main/home/cluster-dashboard/SortSelector.tsx

@@ -1,9 +1,9 @@
 import React, { Component } from 'react';
 import styled from 'styled-components';
 
-import { Context } from '../../../shared/Context';
+import { Context } from 'shared/Context';
 
-import Selector from '../../../components/Selector';
+import Selector from 'components/Selector';
 
 type PropsType = {
   setSortType: (x: string) => void,

dashboard/src/main/home/cluster-dashboard/expanded-chart/ExpandedChart.tsx

@@ -1,25 +1,25 @@
 import React, { Component } from 'react';
 import styled from 'styled-components';
 import yaml from 'js-yaml';
-import close from '../../../../assets/close.png';
+import close from 'assets/close.png';
 import _ from 'lodash';
 
-import { ResourceType, ChartType, StorageType, ClusterType } from '../../../../shared/types';
-import { Context } from '../../../../shared/Context';
-import api from '../../../../shared/api';
+import { ResourceType, ChartType, StorageType, ClusterType } from 'shared/types';
+import { Context } from 'shared/Context';
+import api from 'shared/api';
 
-import TabRegion from '../../../../components/TabRegion';
-import StatusIndicator from '../../../../components/StatusIndicator';
+import ConfirmOverlay from 'components/ConfirmOverlay';
+import Loading from 'components/Loading';
+import StatusIndicator from 'components/StatusIndicator';
+import TabRegion from 'components/TabRegion';
+import ValuesWrapper from 'components/values-form/ValuesWrapper';
+import ValuesForm from 'components/values-form/ValuesForm';
 import RevisionSection from './RevisionSection';
 import ValuesYaml from './ValuesYaml';
 import GraphSection from './GraphSection';
 import ListSection from './ListSection';
 import StatusSection from './status/StatusSection';
-import ValuesWrapper from '../../../../components/values-form/ValuesWrapper';
-import ValuesForm from '../../../../components/values-form/ValuesForm';
 import SettingsSection from './SettingsSection';
-import ConfirmOverlay from '../../../../components/ConfirmOverlay';
-import Loading from '../../../../components/Loading';
 
 type PropsType = {
   namespace: string,

dashboard/src/main/home/cluster-dashboard/expanded-chart/GraphSection.tsx

@@ -1,11 +1,11 @@
 import React, { Component } from 'react';
 import styled from 'styled-components';
 
-import { Context } from '../../../../shared/Context';
-import { ResourceType, ChartType } from '../../../../shared/types';
+import { Context } from 'shared/Context';
+import { ResourceType, ChartType } from 'shared/types';
 
 import GraphDisplay from './graph/GraphDisplay';
-import Loading from '../../../../components/Loading';
+import Loading from 'components/Loading';
 
 type PropsType = {
   components: ResourceType[],

dashboard/src/main/home/cluster-dashboard/expanded-chart/ListSection.tsx

@@ -2,12 +2,12 @@ import React, { Component } from 'react';
 import styled from 'styled-components';
 import yaml from 'js-yaml';
 
-import { Context } from '../../../../shared/Context';
-import { ResourceType, ChartType } from '../../../../shared/types';
+import { Context } from 'shared/Context';
+import { ResourceType, ChartType } from 'shared/types';
 
-import Loading from '../../../../components/Loading';
-import ResourceTab from '../../../../components/ResourceTab';
-import YamlEditor from '../../../../components/YamlEditor';
+import Loading from 'components/Loading';
+import ResourceTab from 'components/ResourceTab';
+import YamlEditor from 'components/YamlEditor';
 
 type PropsType = {
   currentChart: ChartType,

dashboard/src/main/home/cluster-dashboard/expanded-chart/RevisionSection.tsx

@@ -1,12 +1,12 @@
 import React, { Component } from 'react';
 import styled from 'styled-components';
-import loading from '../../../../assets/loading.gif';
+import loading from 'assets/loading.gif';
 
-import api from '../../../../shared/api';
-import { Context } from '../../../../shared/Context';
-import { ChartType, StorageType } from '../../../../shared/types';
+import api from 'shared/api';
+import { Context } from 'shared/Context';
+import { ChartType, StorageType } from 'shared/types';
 
-import ConfirmOverlay from '../../../../components/ConfirmOverlay';
+import ConfirmOverlay from 'components/ConfirmOverlay';
 
 type PropsType = {
   showRevisions: boolean,

dashboard/src/main/home/cluster-dashboard/expanded-chart/SettingsSection.tsx

@@ -1,17 +1,17 @@
 import React, { Component } from 'react';
 import styled from 'styled-components';
-import api from '../../../../shared/api';
+import api from 'shared/api';
 import yaml from 'js-yaml';
 
-import { ChartType, RepoType, StorageType, ActionConfigType } from '../../../../shared/types';
-import { Context } from '../../../../shared/Context';
+import { ChartType, RepoType, StorageType, ActionConfigType } from 'shared/types';
+import { Context } from 'shared/Context';
 
-import ImageSelector from '../../../../components/image-selector/ImageSelector';
-import RepoSelector from '../../../../components/repo-selector/RepoSelector';
-import SaveButton from '../../../../components/SaveButton';
-import Heading from '../../../../components/values-form/Heading';
-import Helper from '../../../../components/values-form/Helper';
-import InputRow from '../../../../components/values-form/InputRow';
+import ImageSelector from 'components/image-selector/ImageSelector';
+import RepoSelector from 'components/repo-selector/RepoSelector';
+import SaveButton from 'components/SaveButton';
+import Heading from 'components/values-form/Heading';
+import Helper from 'components/values-form/Helper';
+import InputRow from 'components/values-form/InputRow';
 
 type PropsType = {
   currentChart: ChartType,

dashboard/src/main/home/cluster-dashboard/expanded-chart/ValuesYaml.tsx

@@ -2,12 +2,12 @@ import React, { Component } from 'react';
 import styled from 'styled-components';
 import yaml from 'js-yaml';
 
-import { ChartType, StorageType } from '../../../../shared/types';
-import api from '../../../../shared/api';
-import { Context } from '../../../../shared/Context';
+import { ChartType, StorageType } from 'shared/types';
+import api from 'shared/api';
+import { Context } from 'shared/Context';
 
-import YamlEditor from '../../../../components/YamlEditor';
-import SaveButton from '../../../../components/SaveButton';
+import YamlEditor from 'components/YamlEditor';
+import SaveButton from 'components/SaveButton';
 
 type PropsType = {
   currentChart: ChartType

dashboard/src/main/home/cluster-dashboard/expanded-chart/deploy/DeploySection.tsx

@@ -1,10 +1,11 @@
 import React, { Component } from 'react';
 import styled from 'styled-components';
-import api from '../../../../../shared/api';
+
+import Loading from 'components/Loading';
+import { Context } from 'shared/Context';
+import { ChartType } from 'shared/types';
+
 import EventTab from './EventTab';
-import { Context } from '../../../../../shared/Context';
-import { ChartType } from '../../../../../shared/types';
-import Loading from '../../../../../components/Loading';
 
 type PropsType = {
   currentChart: ChartType,

dashboard/src/main/home/cluster-dashboard/expanded-chart/graph/Edge.tsx

@@ -1,8 +1,8 @@
 import React, { Component } from 'react';
 import styled from 'styled-components';
 
-import { edgeColors } from '../../../../../shared/rosettaStone';
-import { EdgeType } from '../../../../../shared/types';
+import { edgeColors } from 'shared/rosettaStone';
+import { EdgeType } from 'shared/types';
 
 const thickness = 12;
 

dashboard/src/main/home/cluster-dashboard/expanded-chart/graph/GraphDisplay.tsx

@@ -1,7 +1,7 @@
 import React, { Component } from 'react';
 import styled from 'styled-components';
 
-import { ResourceType, NodeType, EdgeType, ChartType } from '../../../../../shared/types';
+import { ResourceType, NodeType, EdgeType, ChartType } from 'shared/types';
 
 import Node from './Node';
 import Edge from './Edge';

dashboard/src/main/home/cluster-dashboard/expanded-chart/graph/InfoPanel.tsx

@@ -2,10 +2,10 @@ import React, { Component } from 'react';
 import styled from 'styled-components';
 import yaml from 'js-yaml';
 
-import { kindToIcon, edgeColors } from '../../../../../shared/rosettaStone';
-import { NodeType, EdgeType } from '../../../../../shared/types';
+import { kindToIcon, edgeColors } from 'shared/rosettaStone';
+import { NodeType, EdgeType } from 'shared/types';
 
-import YamlEditor from '../../../../../components/YamlEditor';
+import YamlEditor from 'components/YamlEditor';
 
 type PropsType = {
   currentNode: NodeType,

dashboard/src/main/home/cluster-dashboard/expanded-chart/graph/Node.tsx

@@ -1,8 +1,8 @@
 import React, { Component } from 'react';
 import styled from 'styled-components';
 
-import { kindToIcon } from '../../../../../shared/rosettaStone';
-import { NodeType } from '../../../../../shared/types';
+import { kindToIcon } from 'shared/rosettaStone';
+import { NodeType } from 'shared/types';
 
 type PropsType = {
   node: NodeType,

dashboard/src/main/home/cluster-dashboard/expanded-chart/status/ControllerTab.tsx

@@ -1,9 +1,9 @@
 import React, { Component } from 'react';
 import styled from 'styled-components';
-import api from '../../../../../shared/api';
-import { Context } from '../../../../../shared/Context';
+import api from 'shared/api';
+import { Context } from 'shared/Context';
 
-import ResourceTab from '../../../../../components/ResourceTab';
+import ResourceTab from 'components/ResourceTab';
 
 type PropsType = {
   controller: any,

dashboard/src/main/home/cluster-dashboard/expanded-chart/status/Logs.tsx

@@ -1,6 +1,6 @@
 import React, { Component } from 'react';
 import styled from 'styled-components';
-import { Context } from '../../../../../shared/Context';
+import { Context } from 'shared/Context';
 
 type PropsType = {
   selectedPod: any,

dashboard/src/main/home/cluster-dashboard/expanded-chart/status/StatusSection.tsx

@@ -1,11 +1,13 @@
 import React, { Component } from 'react';
 import styled from 'styled-components';
-import api from '../../../../../shared/api';
+
+import api from 'shared/api';
+import { Context } from 'shared/Context';
+import { ChartType, StorageType } from 'shared/types';
+import Loading from 'components/Loading';
+
 import Logs from './Logs';
 import ControllerTab from './ControllerTab';
-import { Context } from '../../../../../shared/Context';
-import { ChartType, StorageType } from '../../../../../shared/types';
-import Loading from '../../../../../components/Loading';
 
 type PropsType = {
   selectors: string[],

dashboard/src/main/home/dashboard/ClusterList.tsx

@@ -1,12 +1,12 @@
 import React, { Component } from 'react';
 import styled from 'styled-components';
 
-import { Context } from '../../../shared/Context';
-import api from '../../../shared/api';
-import { ClusterType } from '../../../shared/types';
-import Helper from '../../../components/values-form/Helper';
+import { Context } from 'shared/Context';
+import api from 'shared/api';
+import { ClusterType } from 'shared/types';
+import Helper from 'components/values-form/Helper';
 
-import Loading from '../../../components/Loading';
+import Loading from 'components/Loading';
 
 type PropsType = {
   setCurrentView: (x: string) => void,

dashboard/src/main/home/dashboard/ClusterPlaceholder.tsx

@@ -1,12 +1,12 @@
 import React, { Component } from 'react';
 import styled from 'styled-components';
 
-import api from '../../../shared/api';
-import { Context } from '../../../shared/Context';
-import { ClusterType } from '../../../shared/types';
+import api from 'shared/api';
+import { Context } from 'shared/Context';
+import { ClusterType } from 'shared/types';
 
 import ClusterList from './ClusterList';
-import Loading from '../../../components/Loading';
+import Loading from 'components/Loading';
 
 type PropsType = {
   currentCluster: ClusterType,

dashboard/src/main/home/dashboard/ClusterPlaceholderContainer.tsx

@@ -1,7 +1,7 @@
 import React, { Component } from 'react';
 import styled from 'styled-components';
 
-import { Context } from '../../../shared/Context';
+import { Context } from 'shared/Context';
 import ClusterPlaceholder from './ClusterPlaceholder';
 
 type PropsType = {

dashboard/src/main/home/dashboard/Dashboard.tsx

@@ -2,10 +2,10 @@ import { render } from '@testing-library/react';
 import React, { Component } from 'react';
 import styled from 'styled-components';
 
-import gradient from '../../../assets/gradient.jpg';
-import { Context } from '../../../shared/Context';
-import { InfraType } from '../../../shared/types';
-import api from '../../../shared/api';
+import gradient from 'assets/gradient.jpg';
+import { Context } from 'shared/Context';
+import { InfraType } from 'shared/types';
+import api from 'shared/api';
 
 import ProvisionerSettings from '../provisioner/ProvisionerSettings';
 import ClusterPlaceholderContainer from './ClusterPlaceholderContainer';

dashboard/src/main/home/integrations/IntegrationList.tsx

@@ -1,9 +1,9 @@
 import React, { Component } from 'react';
 import styled from 'styled-components';
 
-import { Context } from '../../../shared/Context';
-import { integrationList } from '../../../shared/common';
-import api from '../../../shared/api';
+import { Context } from 'shared/Context';
+import { integrationList } from 'shared/common';
+import api from 'shared/api';
 
 type PropsType = {
   setCurrent: (x: any) => void,

dashboard/src/main/home/integrations/Integrations.tsx

@@ -1,10 +1,10 @@
 import React, { Component } from 'react';
 import styled from 'styled-components';
 
-import { Context } from '../../../shared/Context';
-import api from '../../../shared/api';
-import { integrationList } from '../../../shared/common';
-import { ChoiceType } from '../../../shared/types';
+import { Context } from 'shared/Context';
+import api from 'shared/api';
+import { integrationList } from 'shared/common';
+import { ChoiceType } from 'shared/types';
 
 import IntegrationList from './IntegrationList';
 import IntegrationForm from './integration-form/IntegrationForm';

dashboard/src/main/home/integrations/integration-form/DockerHubForm.tsx

@@ -1,11 +1,11 @@
 import React, { Component } from 'react';
 import styled from 'styled-components';
 
-import { Context } from '../../../../shared/Context';
-import api from '../../../../shared/api';
+import { Context } from 'shared/Context';
+import api from 'shared/api';
 
-import InputRow from '../../../../components/values-form/InputRow';
-import SaveButton from '../../../../components/SaveButton';
+import InputRow from 'components/values-form/InputRow';
+import SaveButton from 'components/SaveButton';
 
 type PropsType = {
   closeForm: () => void,

dashboard/src/main/home/integrations/integration-form/ECRForm.tsx

@@ -1,14 +1,14 @@
 import React, { Component } from 'react';
 import styled from 'styled-components';
 
-import { Context } from '../../../../shared/Context';
-import api from '../../../../shared/api';
+import { Context } from 'shared/Context';
+import api from 'shared/api';
 
-import InputRow from '../../../../components/values-form/InputRow';
-import TextArea from '../../../../components/values-form/TextArea';
-import SaveButton from '../../../../components/SaveButton';
-import Heading from '../../../../components/values-form/Heading';
-import Helper from '../../../../components/values-form/Helper';
+import InputRow from 'components/values-form/InputRow';
+import TextArea from 'components/values-form/TextArea';
+import SaveButton from 'components/SaveButton';
+import Heading from 'components/values-form/Heading';
+import Helper from 'components/values-form/Helper';
 
 type PropsType = {
   closeForm: () => void,

dashboard/src/main/home/integrations/integration-form/EKSForm.tsx

@@ -1,14 +1,14 @@
 import React, { Component } from 'react';
 import styled from 'styled-components';
 
-import { Context } from '../../../../shared/Context';
-import api from '../../../../shared/api';
+import { Context } from 'shared/Context';
+import api from 'shared/api';
 
-import InputRow from '../../../../components/values-form/InputRow';
-import TextArea from '../../../../components/values-form/TextArea';
-import SaveButton from '../../../../components/SaveButton';
-import Heading from '../../../../components/values-form/Heading';
-import Helper from '../../../../components/values-form/Helper';
+import InputRow from 'components/values-form/InputRow';
+import TextArea from 'components/values-form/TextArea';
+import SaveButton from 'components/SaveButton';
+import Heading from 'components/values-form/Heading';
+import Helper from 'components/values-form/Helper';
 
 type PropsType = {
   closeForm: () => void,

dashboard/src/main/home/integrations/integration-form/GCRForm.tsx

@@ -1,14 +1,14 @@
 import React, { Component } from 'react';
 import styled from 'styled-components';
 
-import { Context } from '../../../../shared/Context';
-import api from '../../../../shared/api';
+import { Context } from 'shared/Context';
+import api from 'shared/api';
 
-import InputRow from '../../../../components/values-form/InputRow';
-import TextArea from '../../../../components/values-form/TextArea';
-import SaveButton from '../../../../components/SaveButton';
-import Heading from '../../../../components/values-form/Heading';
-import Helper from '../../../../components/values-form/Helper';
+import InputRow from 'components/values-form/InputRow';
+import TextArea from 'components/values-form/TextArea';
+import SaveButton from 'components/SaveButton';
+import Heading from 'components/values-form/Heading';
+import Helper from 'components/values-form/Helper';
 
 type PropsType = {
   closeForm: () => void,

dashboard/src/main/home/integrations/integration-form/GKEForm.tsx

@@ -1,14 +1,14 @@
 import React, { Component } from 'react';
 import styled from 'styled-components';
 
-import { Context } from '../../../../shared/Context';
-import api from '../../../../shared/api';
+import { Context } from 'shared/Context';
+import api from 'shared/api';
 
-import InputRow from '../../../../components/values-form/InputRow';
-import TextArea from '../../../../components/values-form/TextArea';
-import SaveButton from '../../../../components/SaveButton';
-import Heading from '../../../../components/values-form/Heading';
-import Helper from '../../../../components/values-form/Helper';
+import InputRow from 'components/values-form/InputRow';
+import TextArea from 'components/values-form/TextArea';
+import SaveButton from 'components/SaveButton';
+import Heading from 'components/values-form/Heading';
+import Helper from 'components/values-form/Helper';
 
 type PropsType = {
   closeForm: () => void,

dashboard/src/main/home/modals/ClusterInstructionsModal.tsx

@@ -1,9 +1,9 @@
 import React, { Component } from 'react';
 import styled from 'styled-components';
-import close from '../../../assets/close.png';
-import TabSelector from '../../../components/TabSelector';
+import close from 'assets/close.png';
+import TabSelector from 'components/TabSelector';
 
-import { Context } from '../../../shared/Context';
+import { Context } from 'shared/Context';
 
 type PropsType = {
 };

dashboard/src/main/home/modals/IntegrationsInstructionsModal.tsx

@@ -1,9 +1,9 @@
 import React, { Component } from 'react';
 import styled from 'styled-components';
-import close from '../../../assets/close.png';
-import TabSelector from '../../../components/TabSelector';
+import close from 'assets/close.png';
+import TabSelector from 'components/TabSelector';
 
-import { Context } from '../../../shared/Context';
+import { Context } from 'shared/Context';
 
 type PropsType = {
 };

dashboard/src/main/home/modals/IntegrationsModal.tsx

@@ -1,10 +1,10 @@
 import React, { Component } from 'react';
 import styled from 'styled-components';
-import close from '../../../assets/close.png';
+import close from 'assets/close.png';
 
-import { Context } from '../../../shared/Context';
-import api from '../../../shared/api';
-import { integrationList } from '../../../shared/common';
+import { Context } from 'shared/Context';
+import api from 'shared/api';
+import { integrationList } from 'shared/common';
 
 type PropsType = {
 };

dashboard/src/main/home/modals/UpdateClusterModal.tsx

@@ -1,14 +1,14 @@
 import React, { Component } from 'react';
 import styled from 'styled-components';
-import close from '../../../assets/close.png';
-import gradient from '../../../assets/gradient.jpg';
+import close from 'assets/close.png';
+import gradient from 'assets/gradient.jpg';
 
-import api from '../../../shared/api';
-import { Context } from '../../../shared/Context';
+import api from 'shared/api';
+import { Context } from 'shared/Context';
 
-import SaveButton from '../../../components/SaveButton';
-import InputRow from '../../../components/values-form/InputRow';
-import ConfirmOverlay from '../../../components/ConfirmOverlay';
+import SaveButton from 'components/SaveButton';
+import InputRow from 'components/values-form/InputRow';
+import ConfirmOverlay from 'components/ConfirmOverlay';
 
 type PropsType = {
   setRefreshClusters: (x: boolean) => void,

dashboard/src/main/home/navbar/Feedback.tsx

@@ -1,8 +1,8 @@
 import React, { Component } from 'react';
 import styled from 'styled-components';
 
-import { Context } from '../../../shared/Context';
-import { handleSubmitFeedback } from '../../../shared/feedback';
+import { Context } from 'shared/Context';
+import { handleSubmitFeedback } from 'shared/feedback';
 
 type PropsType = {
   currentView: string,

dashboard/src/main/home/navbar/Navbar.tsx

@@ -1,8 +1,8 @@
 import React, { Component } from 'react';
 import styled from 'styled-components';
 
-import api from '../../../shared/api';
-import { Context } from '../../../shared/Context';
+import api from 'shared/api';
+import { Context } from 'shared/Context';
 
 import Feedback from './Feedback';
 

dashboard/src/main/home/new-project/NewProject.tsx

@@ -1,12 +1,12 @@
 import React, { Component } from 'react';
 import styled from 'styled-components';
 
-import gradient from '../../../assets/gradient.jpg';
-import { Context } from '../../../shared/Context';
-import { isAlphanumeric } from '../../../shared/common';
+import gradient from 'assets/gradient.jpg';
+import { Context } from 'shared/Context';
+import { isAlphanumeric } from 'shared/common';
 
-import InputRow from '../../../components/values-form/InputRow';
-import Helper from '../../../components/values-form/Helper';
+import InputRow from 'components/values-form/InputRow';
+import Helper from 'components/values-form/Helper';
 import ProvisionerSettings from '../provisioner/ProvisionerSettings';
 
 type PropsType = {

dashboard/src/main/home/project-settings/InviteList.tsx

@@ -1,14 +1,14 @@
 import React, { Component } from 'react';
 import styled from 'styled-components';
 
-import { InviteType } from '../../../shared/types';
-import api from '../../../shared/api';
-import { Context } from '../../../shared/Context';
+import { InviteType } from 'shared/types';
+import api from 'shared/api';
+import { Context } from 'shared/Context';
 
-import Loading from '../../../components/Loading';
-import InputRow from '../../../components/values-form/InputRow';
-import Helper from '../../../components/values-form/Helper';
-import Heading from '../../../components/values-form/Heading';
+import Loading from 'components/Loading';
+import InputRow from 'components/values-form/InputRow';
+import Helper from 'components/values-form/Helper';
+import Heading from 'components/values-form/Heading';
 
 type PropsType = {
 }

dashboard/src/main/home/project-settings/ProjectSettings.tsx

@@ -1,12 +1,12 @@
 import React, { Component } from 'react';
 import styled from 'styled-components';
 
-import { Context } from '../../../shared/Context';
+import { Context } from 'shared/Context';
 
 import InviteList from './InviteList';
-import TabRegion from '../../../components/TabRegion';
-import Heading from '../../../components/values-form/Heading';
-import Helper from '../../../components/values-form/Helper';
+import TabRegion from 'components/TabRegion';
+import Heading from 'components/values-form/Heading';
+import Helper from 'components/values-form/Helper';
 
 type PropsType = {
   setCurrentView: (x: string) => void,

dashboard/src/main/home/provisioner/AWSFormSection.tsx

@@ -1,18 +1,18 @@
 import React, { Component } from 'react';
 import styled from 'styled-components';
 
-import close from '../../../assets/close.png';
-import { isAlphanumeric } from '../../../shared/common';
-import api from '../../../shared/api';
-import { Context } from '../../../shared/Context';
-import { ProjectType, InfraType } from '../../../shared/types';
-
-import SelectRow from '../../../components/values-form/SelectRow';
-import InputRow from '../../../components/values-form/InputRow';
-import Helper from '../../../components/values-form/Helper';
-import Heading from '../../../components/values-form/Heading';
-import SaveButton from '../../../components/SaveButton';
-import CheckboxList from '../../../components/values-form/CheckboxList';
+import close from 'assets/close.png';
+import { isAlphanumeric } from 'shared/common';
+import api from 'shared/api';
+import { Context } from 'shared/Context';
+import { ProjectType, InfraType } from 'shared/types';
+
+import SelectRow from 'components/values-form/SelectRow';
+import InputRow from 'components/values-form/InputRow';
+import Helper from 'components/values-form/Helper';
+import Heading from 'components/values-form/Heading';
+import SaveButton from 'components/SaveButton';
+import CheckboxList from 'components/values-form/CheckboxList';
 
 type PropsType = {
   setSelectedProvisioner: (x: string | null) => void,

dashboard/src/main/home/provisioner/DOFormSection.tsx

@@ -1,17 +1,17 @@
 import React, { Component } from 'react';
 import styled from 'styled-components';
 
-import close from '../../../assets/close.png';
-import { isAlphanumeric } from '../../../shared/common';
-import api from '../../../shared/api';
-import { Context } from '../../../shared/Context';
-import { ProjectType, InfraType } from '../../../shared/types';
+import close from 'assets/close.png';
+import { isAlphanumeric } from 'shared/common';
+import api from 'shared/api';
+import { Context } from 'shared/Context';
+import { ProjectType, InfraType } from 'shared/types';
 
-import SelectRow from '../../../components/values-form/SelectRow';
-import Helper from '../../../components/values-form/Helper';
-import Heading from '../../../components/values-form/Heading';
-import SaveButton from '../../../components/SaveButton';
-import CheckboxList from '../../../components/values-form/CheckboxList';
+import SelectRow from 'components/values-form/SelectRow';
+import Helper from 'components/values-form/Helper';
+import Heading from 'components/values-form/Heading';
+import SaveButton from 'components/SaveButton';
+import CheckboxList from 'components/values-form/CheckboxList';
 
 type PropsType = {
   setSelectedProvisioner: (x: string | null) => void,

dashboard/src/main/home/provisioner/ExistingClusterSection.tsx

@@ -1,13 +1,13 @@
 import React, { Component } from 'react';
 import styled from 'styled-components';
 
-import api from '../../../shared/api';
-import { ProjectType } from '../../../shared/types';
-import { isAlphanumeric } from '../../../shared/common';
-import { Context } from '../../../shared/Context';
+import api from 'shared/api';
+import { ProjectType } from 'shared/types';
+import { isAlphanumeric } from 'shared/common';
+import { Context } from 'shared/Context';
 
-import SaveButton from '../../../components/SaveButton';
-import CheckboxList from '../../../components/values-form/CheckboxList';
+import SaveButton from 'components/SaveButton';
+import CheckboxList from 'components/values-form/CheckboxList';
 
 type PropsType = {
   projectName: string,

dashboard/src/main/home/provisioner/GCPFormSection.tsx

@@ -1,18 +1,18 @@
 import React, { Component } from 'react';
 import styled from 'styled-components';
 
-import close from '../../../assets/close.png';
-import { isAlphanumeric } from '../../../shared/common';
-import api from '../../../shared/api';
-import { Context } from '../../../shared/Context';
-import { ProjectType, InfraType } from '../../../shared/types';
-
-import SelectRow from '../../../components/values-form/SelectRow';
-import InputRow from '../../../components/values-form/InputRow';
-import Helper from '../../../components/values-form/Helper';
-import Heading from '../../../components/values-form/Heading';
-import SaveButton from '../../../components/SaveButton';
-import CheckboxList from '../../../components/values-form/CheckboxList';
+import close from 'assets/close.png';
+import { isAlphanumeric } from 'shared/common';
+import api from 'shared/api';
+import { Context } from 'shared/Context';
+import { ProjectType, InfraType } from 'shared/types';
+
+import SelectRow from 'components/values-form/SelectRow';
+import InputRow from 'components/values-form/InputRow';
+import Helper from 'components/values-form/Helper';
+import Heading from 'components/values-form/Heading';
+import SaveButton from 'components/SaveButton';
+import CheckboxList from 'components/values-form/CheckboxList';
 
 type PropsType = {
   setSelectedProvisioner: (x: string | null) => void,

dashboard/src/main/home/provisioner/InfraStatuses.tsx

@@ -1,9 +1,9 @@
 import React, { Component } from 'react';
 import styled from 'styled-components';
 
-import loadingDots from '../../../assets/loading-dots.gif';
-import { InfraType } from '../../../shared/types';
-import { infraNames } from '../../../shared/common';
+import loadingDots from 'assets/loading-dots.gif';
+import { InfraType } from 'shared/types';
+import { infraNames } from 'shared/common';
 
 type PropsType = {
   infras: InfraType[],

dashboard/src/main/home/provisioner/ProvisionerSettings.tsx

@@ -1,15 +1,15 @@
 import React, { Component } from 'react';
 import styled from 'styled-components';
 
-import { Context } from '../../../shared/Context';
-import { integrationList } from '../../../shared/common';
-import { InfraType } from '../../../shared/types';
+import { Context } from 'shared/Context';
+import { integrationList } from 'shared/common';
+import { InfraType } from 'shared/types';
 
-import Helper from '../../../components/values-form/Helper';
+import Helper from 'components/values-form/Helper';
 import AWSFormSection from './AWSFormSection';
 import GCPFormSection from './GCPFormSection';
 import DOFormSection from './DOFormSection';
-import SaveButton from '../../../components/SaveButton';
+import SaveButton from 'components/SaveButton';
 import ExistingClusterSection from './ExistingClusterSection';
 
 type PropsType = {

dashboard/src/main/home/provisioner/ProvisionerStatus.tsx

@@ -2,15 +2,15 @@ import React, { Component } from 'react';
 import styled from 'styled-components';
 import posthog from 'posthog-js';
 
-import api from '../../../shared/api';
-import { Context } from '../../../shared/Context';
-import ansiparse from '../../../shared/ansiparser'
-import loading from '../../../assets/loading.gif';
-import warning from '../../../assets/warning.png';
-import { InfraType } from '../../../shared/types';
-import { filterOldInfras } from '../../../shared/common';
-
-import Helper from '../../../components/values-form/Helper';
+import api from 'shared/api';
+import { Context } from 'shared/Context';
+import ansiparse from 'shared/ansiparser'
+import loading from 'assets/loading.gif';
+import warning from 'assets/warning.png';
+import { InfraType } from 'shared/types';
+import { filterOldInfras } from 'shared/common';
+
+import Helper from 'components/values-form/Helper';
 import InfraStatuses from './InfraStatuses';
 
 type PropsType = {

dashboard/src/main/home/sidebar/ClusterSection.tsx

@@ -1,10 +1,10 @@
 import React, { Component } from 'react';
 import styled from 'styled-components';
-import drawerBg from '../../../assets/drawer-bg.png';
+import drawerBg from 'assets/drawer-bg.png';
 
-import api from '../../../shared/api';
-import { Context } from '../../../shared/Context';
-import { ClusterType } from '../../../shared/types';
+import api from 'shared/api';
+import { Context } from 'shared/Context';
+import { ClusterType } from 'shared/types';
 
 import Drawer from './Drawer';
 

dashboard/src/main/home/sidebar/Drawer.tsx

@@ -1,9 +1,9 @@
 import React, { Component } from 'react';
 import styled from 'styled-components';
-import close from '../../../assets/close.png';
+import close from 'assets/close.png';
 
-import { Context } from '../../../shared/Context';
-import { ClusterType } from '../../../shared/types';
+import { Context } from 'shared/Context';
+import { ClusterType } from 'shared/types';
 
 type PropsType = {
   toggleDrawer: () => void,

dashboard/src/main/home/sidebar/ProjectSection.tsx

@@ -1,9 +1,9 @@
 import React, { Component } from 'react';
 import styled from 'styled-components';
-import gradient from '../../../assets/gradient.jpg';
+import gradient from 'assets/gradient.jpg';
 
-import { Context } from '../../../shared/Context';
-import { ProjectType, InfraType } from '../../../shared/types';
+import { Context } from 'shared/Context';
+import { ProjectType, InfraType } from 'shared/types';
 
 type PropsType = {
   currentProject: ProjectType,

dashboard/src/main/home/sidebar/ProjectSectionContainer.tsx

@@ -1,7 +1,7 @@
 import React, { Component } from 'react';
 import styled from 'styled-components';
 
-import { Context } from '../../../shared/Context';
+import { Context } from 'shared/Context';
 import ProjectSection from './ProjectSection';
 
 type PropsType = {

dashboard/src/main/home/sidebar/Sidebar.tsx

@@ -1,15 +1,15 @@
 import React, { Component } from 'react';
 import styled from 'styled-components';
-import category from '../../../assets/category.svg';
-import integrations from '../../../assets/integrations.svg';
-import filter from '../../../assets/filter.svg';
-import settings from '../../../assets/settings.svg';
+import category from 'assets/category.svg';
+import integrations from 'assets/integrations.svg';
+import filter from 'assets/filter.svg';
+import settings from 'assets/settings.svg';
 
-import { Context } from '../../../shared/Context';
+import { Context } from 'shared/Context';
 
 import ClusterSection from './ClusterSection';
 import ProjectSectionContainer from './ProjectSectionContainer';
-import loading from '../../../assets/loading.gif';
+import loading from 'assets/loading.gif';
 import posthog from 'posthog-js';
 
 type PropsType = {

dashboard/src/main/home/templates/Templates.tsx

@@ -1,13 +1,13 @@
 import React, { Component } from 'react';
 import styled from 'styled-components';
 
-import { Context } from '../../../shared/Context';
-import api from '../../../shared/api';
-import { PorterTemplate } from '../../../shared/types';
+import { Context } from 'shared/Context';
+import api from 'shared/api';
+import { PorterTemplate } from 'shared/types';
 
-import TabSelector from '../../../components/TabSelector';
+import TabSelector from 'components/TabSelector';
 import ExpandedTemplate from './expanded-template/ExpandedTemplate';
-import Loading from '../../../components/Loading';
+import Loading from 'components/Loading';
 
 import hardcodedNames from './hardcodedNameDict';
 

dashboard/src/main/home/templates/expanded-template/ExpandedTemplate.tsx

@@ -1,12 +1,12 @@
 import React, { Component } from 'react';
 import styled from 'styled-components';
 
-import { PorterTemplate } from '../../../../shared/types';
-import api from '../../../../shared/api';
+import { PorterTemplate } from 'shared/types';
+import api from 'shared/api';
 
 import TemplateInfo from './TemplateInfo';
 import LaunchTemplate from './LaunchTemplate';
-import Loading from '../../../../components/Loading';
+import Loading from 'components/Loading';
 
 type PropsType = {
   currentTemplate: PorterTemplate,

dashboard/src/main/home/templates/expanded-template/LaunchTemplate.tsx

@@ -3,17 +3,18 @@ import styled from 'styled-components';
 import randomWords from 'random-words';
 import posthog from 'posthog-js';
 import _ from 'lodash';
-import { Context } from '../../../../shared/Context';
-import api from '../../../../shared/api';
-
-import { PorterTemplate, ChoiceType, ClusterType, StorageType } from '../../../../shared/types';
-import Selector from '../../../../components/Selector';
-import ImageSelector from '../../../../components/image-selector/ImageSelector';
-import TabRegion from '../../../../components/TabRegion';
-import InputRow from '../../../../components/values-form/InputRow';
-import SaveButton from '../../../../components/SaveButton';
-import ValuesWrapper from '../../../../components/values-form/ValuesWrapper';
-import ValuesForm from '../../../../components/values-form/ValuesForm';
+import { Context } from 'shared/Context';
+import api from 'shared/api';
+
+import { PorterTemplate, ChoiceType, ClusterType, StorageType } from 'shared/types';
+import Selector from 'components/Selector';
+import ImageSelector from 'components/image-selector/ImageSelector';
+import TabRegion from 'components/TabRegion';
+import InputRow from 'components/values-form/InputRow';
+import SaveButton from 'components/SaveButton';
+import ValuesWrapper from 'components/values-form/ValuesWrapper';
+import ValuesForm from 'components/values-form/ValuesForm';
+import { isAlphanumeric } from 'shared/common';
 import { safeDump } from 'js-yaml';
 
 type PropsType = {
@@ -161,7 +162,10 @@ export default class LaunchTemplate extends Component<PropsType, StateType> {
         formTabs={this.props.form?.tabs}
         onSubmit={this.props.currentTemplate.name === 'docker' ? this.onSubmit : this.onSubmitAddon}
         saveValuesStatus={this.state.saveValuesStatus}
-        disabled={this.props.form?.hasSource ? !this.state.selectedImageUrl : false}
+        disabled={
+          (this.state.templateName.length > 0 && !isAlphanumeric(this.state.templateName))
+          || (this.props.form?.hasSource ? !this.state.selectedImageUrl : false)
+        }
       >
         {(metaState: any, setMetaState: any) => {
           return this.props.form?.tabs.map((tab: any, i: number) => {
@@ -249,7 +253,7 @@ export default class LaunchTemplate extends Component<PropsType, StateType> {
     if (this.state.tabOptions.length > 0) {
       return (
         <>
-          <Subtitle>Configure additional settings for this template (optional).</Subtitle>
+          <Subtitle>Configure additional settings for this template. (Optional)</Subtitle>
           <TabRegion
             options={this.state.tabOptions}
             currentTab={this.state.currentTab}
@@ -350,7 +354,10 @@ export default class LaunchTemplate extends Component<PropsType, StateType> {
             closeOverlay={true}
           />
         </ClusterSection>
-        <Subtitle>Give a unique name to this template (optional).</Subtitle>
+        <Subtitle>Template name
+          <Warning highlight={!isAlphanumeric(this.state.templateName) && this.state.templateName !== ''}>
+            (lowercase letters, numbers, and "-" only)
+          </Warning>. (Optional)</Subtitle>
         <DarkMatter antiHeight='-27px' />
         <InputRow
           type='text'
@@ -368,6 +375,11 @@ export default class LaunchTemplate extends Component<PropsType, StateType> {
 
 LaunchTemplate.contextType = Context;
 
+const Warning = styled.span<{ highlight: boolean, makeFlush?: boolean }>`
+  color: ${props => props.highlight ? '#f5cb42' : ''};
+  margin-left: ${props => props.makeFlush ? '' : '5px'};
+`;
+
 const Required = styled.div`
   margin-left: 8px;
   color: #fc4976;

dashboard/src/main/home/templates/expanded-template/TemplateInfo.tsx

@@ -1,13 +1,13 @@
 import React, { Component } from 'react';
 import styled from 'styled-components';
-import rocket from '../../../../assets/rocket.png';
+import rocket from 'assets/rocket.png';
 import Markdown from 'markdown-to-jsx';
 
-import { Context } from '../../../../shared/Context';
-import Loading from '../../../../components/Loading';
+import { Context } from 'shared/Context';
+import Loading from 'components/Loading';
 
-import { PorterTemplate } from '../../../../shared/types';
-import Helper from '../../../../components/values-form/Helper';
+import { PorterTemplate } from 'shared/types';
+import Helper from 'components/values-form/Helper';
 
 import hardcodedNames from '../hardcodedNameDict';
 

dashboard/src/shared/Context.tsx

@@ -1,6 +1,6 @@
 import React, { Component } from 'react';
 
-import { ProjectType, ClusterType } from '../shared/types';
+import { ProjectType, ClusterType } from 'shared/types';
 
 type PropsType = {
 }

dashboard/src/shared/common.tsx

@@ -1,7 +1,7 @@
-import aws from '../assets/aws.png';
-import digitalOcean from '../assets/do.png';
-import gcp from '../assets/gcp.png';
-import { InfraType } from '../shared/types';
+import aws from 'assets/aws.png';
+import digitalOcean from 'assets/do.png';
+import gcp from 'assets/gcp.png';
+import { InfraType } from 'shared/types';
 
 export const infraNames: any = {
   'ecr': 'Elastic Container Registry (ECR)',

dashboard/tsconfig.json

@@ -1,5 +1,6 @@
 {
   "compilerOptions": {
+    "baseUrl": "src",
     "outDir": "./build/",
     "sourceMap": true,
     "noImplicitAny": true,

dashboard/webpack.config.js

@@ -47,6 +47,7 @@ module.exports = () => {
       ],
     },
     resolve: {
+      modules: [path.resolve(__dirname, "src"), "node_modules"],
       extensions: ['*', '.tsx', '.ts', '.js', '.jsx', '.json'],
     },
     output: {