Merge branch 'simplified-view' of github.com:porter-dev/porter into simplified-view

dashboard/src/components/porter/Select.tsx

@@ -32,6 +32,7 @@ const Select: React.FC<Props> = ({
         )
       }
       <SelectWrapper>
+        <i className="material-icons">arrow_drop_down</i>
         <StyledSelect
           onChange={e => {
             setValue(e.target.value);
@@ -46,7 +47,6 @@ const Select: React.FC<Props> = ({
             return <option value={option.value} key={i}>{option.label}</option>;
           })}
         </StyledSelect>
-        <i className="material-icons">arrow_drop_down</i>
       </SelectWrapper>
       {
         error && (
@@ -92,11 +92,14 @@ const Error = styled.div`
 
 const SelectWrapper = styled.div`
   position: relative;
+  background: #26292e;
+  z-index: 0;
   > i {
     font-size: 18px;
     position: absolute;
     right: 7px;
     top: calc(50% - 9px);
+    z-index: -1;
   }
 `;
 
@@ -112,15 +115,9 @@ const StyledSelect = styled.select<{
   font-size: 13px;
   outline: none;
   border-radius: 5px;
-  background: #26292e;
+  background: none;
   appearance: none;
-  > i {
-    font-size: 18px;
-    position: absolute;
-    right: 10px;
-    top: 10px;
-  }
-
+  z-index: 1;
   border: 1px solid ${props => props.hasError ? "#ff3b62" : "#494b4f"};
   :hover {
     border: 1px solid ${props => props.hasError ? "#ff3b62" : "#7a7b80"};

dashboard/src/components/porter/VerticalSteps.tsx

@@ -91,6 +91,4 @@ const StepWrapper = styled.div<{
 
 const StyledVerticalSteps = styled.div<{
 }>`
-  min-width: 600px;
-  max-width: 900px;
 `;

dashboard/src/main/home/add-on-dashboard/ConfigureTemplate.tsx

@@ -172,62 +172,69 @@ const ConfigureTemplate: React.FC<Props> = ({
 
   return (
     <CenterWrapper>
-      <StyledConfigureTemplate>
-        <Back onClick={goBack} />
-        <DashboardHeader
-          prefix={
-            <Icon 
-              src={hardcodedIcons[currentTemplate.name] || currentTemplate.icon}
-            />
-          }
-          title={`Configure new ${hardcodedNames[currentTemplate.name] || currentTemplate.name} instance`}
-          capitalize={false}
-          disableLineBreak
-        />
-        <DarkMatter />
-        <VerticalSteps
-          currentStep={currentStep}
-          steps={[
-            <>
-              <Text size={16}>Add-on name</Text>
-              <Spacer y={0.5} />
-              <Text color="helper">
-                Randomly generated if left blank (lowercase letters, numbers, and "-" only).
-              </Text>
-              <Spacer height="20px" />
-              <Input
-                placeholder="ex: academic-sophon"
-                value={name}
-                width="300px"
-                setValue={(e) => {
-                  if (e) {
-                    setCurrentStep(1);
-                  } else {
-                    setCurrentStep(0);
-                  }
-                  setName(e);
-                }}
+      <Div>
+        <StyledConfigureTemplate>
+          <Back onClick={goBack} />
+          <DashboardHeader
+            prefix={
+              <Icon 
+                src={hardcodedIcons[currentTemplate.name] || currentTemplate.icon}
               />
-            </>,
-            <>
-              <Text size={16}>Add-on settings</Text>
-              <Spacer y={0.5} />
-              <Text color="helper">
-              Configure settings for this add-on.
-              </Text>
-              <Spacer height="20px" />
-              {renderAddOnSettings()}
-            </>
-          ]}
-        />
-        <Spacer height="80px" />
-      </StyledConfigureTemplate>
+            }
+            title={`Configure new ${hardcodedNames[currentTemplate.name] || currentTemplate.name} instance`}
+            capitalize={false}
+            disableLineBreak
+          />
+          <DarkMatter />
+          <VerticalSteps
+            currentStep={currentStep}
+            steps={[
+              <>
+                <Text size={16}>Add-on name</Text>
+                <Spacer y={0.5} />
+                <Text color="helper">
+                  Randomly generated if left blank (lowercase letters, numbers, and "-" only).
+                </Text>
+                <Spacer height="20px" />
+                <Input
+                  placeholder="ex: academic-sophon"
+                  value={name}
+                  width="300px"
+                  setValue={(e) => {
+                    if (e) {
+                      setCurrentStep(1);
+                    } else {
+                      setCurrentStep(0);
+                    }
+                    setName(e);
+                  }}
+                />
+              </>,
+              <>
+                <Text size={16}>Add-on settings</Text>
+                <Spacer y={0.5} />
+                <Text color="helper">
+                Configure settings for this add-on.
+                </Text>
+                <Spacer height="20px" />
+                {renderAddOnSettings()}
+              </>
+            ]}
+          />
+          <Spacer height="80px" />
+        </StyledConfigureTemplate>
+      </Div>
     </CenterWrapper>
   );
 };
 
 export default withRouter(ConfigureTemplate);
 
+const Div = styled.div`
+  width: 100%;
+  max-width: 900px;
+`;
+
 const CenterWrapper = styled.div`
   width: 100%;
   display: flex;

dashboard/src/main/home/add-on-dashboard/NewAddOnFlow.tsx

@@ -5,6 +5,7 @@ import semver from "semver";
 import _ from "lodash";
 
 import addOn from "assets/add-ons.png";
+import notFound from "assets/not-found.png";
 
 import { Context } from "shared/Context";
 import api from "shared/api";
@@ -17,6 +18,9 @@ import Loading from "components/Loading";
 import ExpandedTemplate from "./ExpandedTemplate";
 import ConfigureTemplate from "./ConfigureTemplate";
 import Back from "components/porter/Back";
+import Fieldset from "components/porter/Fieldset";
+import Text from "components/porter/Text";
+import Container from "components/porter/Container";
 
 type Props = {
 };
@@ -118,7 +122,14 @@ const NewAddOnFlow: React.FC<Props> = ({
                   />
                   <Spacer y={1} />
 
-                  {/* Temporary space reducer for legacy template list */}
+                  {filteredTemplates.length === 0 && (
+                    <Fieldset>
+                      <Container row>
+                        <PlaceholderIcon src={notFound} />
+                        <Text color="helper">No matching add-ons were found.</Text>
+                      </Container>
+                    </Fieldset>
+                  )}
                   {isLoading ? <Loading offset="-150px" /> : (
                     <>
                       <DarkMatter />
@@ -140,6 +151,12 @@ const NewAddOnFlow: React.FC<Props> = ({
 
 export default NewAddOnFlow;
 
+const PlaceholderIcon = styled.img`
+  height: 16px;
+  margin-right: 12px;
+  opacity: 0.65;
+`;
+
 const DarkMatter = styled.div`
   width: 100%;
   margin-top: -35px;

dashboard/src/main/home/app-dashboard/new-app-flow/NewAppFlow.tsx

@@ -25,6 +25,7 @@ import SourceSelector, { SourceType } from "./SourceSelector";
 import SourceSettings from "./SourceSettings"
 import Services from "./Services";
 import EnvGroupArray, { KeyValueType } from "main/home/cluster-dashboard/env-groups/EnvGroupArray";
+import Select from "components/porter/Select";
 import GithubActionModal from "./GithubActionModal";
 
 type Props = RouteComponentProps & {
@@ -67,6 +68,7 @@ const NewAppFlow: React.FC<Props> = ({
 
   return (
     <CenterWrapper>
+      <Div>
       <StyledConfigureTemplate>
         <Back to="/apps" />
         <DashboardHeader
@@ -93,7 +95,7 @@ const NewAppFlow: React.FC<Props> = ({
               <Input
                 placeholder="ex: academic-sophon"
                 value={formState.applicationName}
-                width="100%"
+                width="300px"
                 setValue={(e) => {
                   setFormState({ ...formState, applicationName: e })
                   if (Validators.applicationName(e)) {
@@ -162,7 +164,7 @@ const NewAppFlow: React.FC<Props> = ({
               <Input
                 placeholder="yarn ./scripts/run-migrations.js"
                 value={""}
-                width="100%"
+                width="300px"
                 setValue={(e) => { }}
               />
             </>
@@ -173,6 +175,7 @@ const NewAppFlow: React.FC<Props> = ({
           DEPLYOY
         </Button>
       </StyledConfigureTemplate>
+      </Div>
       {showGHAModal && <GithubActionModal closeModal={() => setShowGHAModal(false)} />}
     </CenterWrapper>
   );
@@ -180,6 +183,11 @@ const NewAppFlow: React.FC<Props> = ({
 
 export default withRouter(NewAppFlow);
 
+const Div = styled.div`
+  width: 100%;
+  max-width: 900px;
+`;
+
 const CenterWrapper = styled.div`
   width: 100%;
   display: flex;

zarf/helm/.dashboardenv

@@ -1,12 +0,0 @@
-# Fill out this file, and renamed to '.dashboard.env' in order to run this with Tilt
-
-NODE_ENV=development
-DEV_SERVER_PORT=8081
-ENABLE_PROXY=true
-API_SERVER=http://localhost:8080
-
-# SERVER_URL must be set to your ngrok url, If you are using ngrok for your github app setup on the backend
-# SERVER_URL=
-
-# TRUST_ARN is the ARN of the role which will be used for creating CAPI clusters
-# TRUST_ARN=arn:aws:iam::MY_ID:role/OrganizationAccountAccessRole