display onboarding form across environments (capabilities updated)

dashboard/src/components/porter-form/field-components/KeyValueArray.tsx

@@ -171,11 +171,14 @@ const KeyValueArray: React.FC<Props> = (props) => {
                 const prevValues = prev.values.reduce((acc, currentValue) => {
                   acc[currentValue.key] = currentValue.value;
                   return acc;
-                }, {} as Record<string, string>)
+                }, {} as Record<string, string>);
 
                 // Deconstruct the two records/objects inside one to merge their values (this will override the old duped vars too)
                 // and convert the new object back to an array usable for the component
-                const newValues = Object.entries({...prevValues, ...values})?.map(([k, v]) => {
+                const newValues = Object.entries({
+                  ...prevValues,
+                  ...values,
+                })?.map(([k, v]) => {
                   return {
                     key: k,
                     value: v,
@@ -183,7 +186,7 @@ const KeyValueArray: React.FC<Props> = (props) => {
                 });
 
                 return {
-                  values: [...newValues]
+                  values: [...newValues],
                 };
               });
             }}

dashboard/src/main/Main.tsx

@@ -107,7 +107,7 @@ export default class Main extends Component<PropsType, StateType> {
       return <Loading />;
     }
 
-    // if logged in but not verified, block until email verification    
+    // if logged in but not verified, block until email verification
     if (
       !this.state.local &&
       this.state.isLoggedIn &&

dashboard/src/main/auth/Login.tsx

@@ -92,9 +92,7 @@ export default class Login extends Component<PropsType, StateType> {
             authenticate();
           }
         })
-        .catch((err) =>
-          this.context.setCurrentError(err.response.data.error)
-        );
+        .catch((err) => this.context.setCurrentError(err.response.data.error));
     }
   };
 

dashboard/src/main/auth/ResetPasswordInit.tsx

@@ -64,9 +64,7 @@ export default class ResetPasswordInit extends Component<PropsType, StateType> {
         .then((res) => {
           this.setState({ submitted: true });
         })
-        .catch((err) =>
-          this.context.setCurrentError(err.response.data.error)
-        );
+        .catch((err) => this.context.setCurrentError(err.response.data.error));
     }
   };
 

dashboard/src/main/auth/VerifyEmail.tsx

@@ -24,9 +24,7 @@ export default class VerifyEmail extends Component<PropsType, StateType> {
       .then((res) => {
         this.setState({ submitted: true });
       })
-      .catch((err) =>
-        this.context.setCurrentError(err.response.data.error)
-      );
+      .catch((err) => this.context.setCurrentError(err.response.data.error));
   };
 
   render() {

dashboard/src/main/home/Home.tsx

@@ -388,9 +388,7 @@ class Home extends Component<PropsType, StateType> {
             <Icon src={discordLogo} />
             Join Our Discord
           </DiscordButton>
-          {(this.context?.capabilities?.version === "production" ||
-            this.context?.capabilities?.version === "staging") &&
-            this.state.showWelcomeForm &&
+          {this.state.showWelcomeForm &&
             localStorage.getItem("welcomed") != "true" && (
               <>
                 <WelcomeForm
@@ -445,16 +443,19 @@ class Home extends Component<PropsType, StateType> {
           if (!cluster.infra_id) continue;
 
           // Handle destroying infra we've provisioned
-          api.destroyInfra(
-            "<token>",
-                  { name: cluster.name },
-                  {
-                    project_id: currentProject.id,
-                    infra_id: cluster.infra_id,
-                  }
-          ).then(() =>
-            console.log("destroyed provisioned infra:", cluster.infra_id)
-          ).catch(console.log);
+          api
+            .destroyInfra(
+              "<token>",
+              { name: cluster.name },
+              {
+                project_id: currentProject.id,
+                infra_id: cluster.infra_id,
+              }
+            )
+            .then(() =>
+              console.log("destroyed provisioned infra:", cluster.infra_id)
+            )
+            .catch(console.log);
         }
       })
       .catch(console.log);

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

@@ -69,8 +69,9 @@ const ExpandedChart: React.FC<Props> = (props) => {
   const [rightTabOptions, setRightTabOptions] = useState<any[]>([]);
   const [leftTabOptions, setLeftTabOptions] = useState<any[]>([]);
   const [saveValuesStatus, setSaveValueStatus] = useState<string>(null);
-  const [forceRefreshRevisions, setForceRefreshRevisions] =
-    useState<boolean>(false);
+  const [forceRefreshRevisions, setForceRefreshRevisions] = useState<boolean>(
+    false
+  );
   const [controllers, setControllers] = useState<
     Record<string, Record<string, any>>
   >({});
@@ -82,11 +83,19 @@ const ExpandedChart: React.FC<Props> = (props) => {
   const [showRepoTooltip, setShowRepoTooltip] = useState(false);
   const [isAuthorized] = useAuth();
 
-  const { newWebsocket, openWebsocket, closeAllWebsockets, closeWebsocket } =
-    useWebsockets();
+  const {
+    newWebsocket,
+    openWebsocket,
+    closeAllWebsockets,
+    closeWebsocket,
+  } = useWebsockets();
 
-  const { currentCluster, currentProject, setCurrentError, setCurrentOverlay } =
-    useContext(Context);
+  const {
+    currentCluster,
+    currentProject,
+    setCurrentError,
+    setCurrentOverlay,
+  } = useContext(Context);
 
   // Retrieve full chart data (includes form and values)
   const getChartData = async (chart: ChartType) => {
@@ -196,8 +205,7 @@ const ExpandedChart: React.FC<Props> = (props) => {
     try {
       const res = await api.getChartComponents(
         "<token>",
-        {
-        },
+        {},
         {
           id: currentProject.id,
           name: currentChart.name,
@@ -262,8 +270,7 @@ const ExpandedChart: React.FC<Props> = (props) => {
         values: valuesYaml,
       });
     } catch (err) {
-      const parsedErr =
-        err?.response?.data?.error;
+      const parsedErr = err?.response?.data?.error;
 
       if (parsedErr) {
         err = parsedErr;
@@ -317,8 +324,7 @@ const ExpandedChart: React.FC<Props> = (props) => {
 
         cb && cb();
       } catch (err) {
-        let parsedErr =
-          err?.response?.data?.error;
+        let parsedErr = err?.response?.data?.error;
 
         if (parsedErr) {
           err = parsedErr;
@@ -626,8 +632,7 @@ const ExpandedChart: React.FC<Props> = (props) => {
     api
       .getIngress(
         "<token>",
-        {
-        },
+        {},
         {
           id: currentProject.id,
           name: ingressName,

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

@@ -78,8 +78,7 @@ class ExpandedJobChart extends Component<PropsType, StateType> {
     api
       .getChart(
         "<token>",
-        {
-        },
+        {},
         {
           name: chart.name,
           revision: revision,
@@ -380,8 +379,7 @@ class ExpandedJobChart extends Component<PropsType, StateType> {
         this.refreshChart(0);
       })
       .catch((err) => {
-        let parsedErr =
-          err?.response?.data?.error;
+        let parsedErr = err?.response?.data?.error;
 
         if (parsedErr) {
           err = parsedErr;
@@ -407,8 +405,7 @@ class ExpandedJobChart extends Component<PropsType, StateType> {
     api
       .getJobs(
         "<token>",
-        {
-        },
+        {},
         {
           id: currentProject.id,
           cluster_id: currentCluster.id,
@@ -631,8 +628,7 @@ class ExpandedJobChart extends Component<PropsType, StateType> {
 
       cb && cb();
     } catch (err) {
-      let parsedErr =
-        err?.response?.data?.error;
+      let parsedErr = err?.response?.data?.error;
 
       if (parsedErr) {
         err = parsedErr;

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

@@ -39,8 +39,7 @@ const NotificationSettingsSection: React.FC<Props> = (props) => {
     api
       .getNotificationConfig(
         "<token>",
-        {
-        },
+        {},
         {
           project_id: currentProject.id,
           namespace: props.currentChart.namespace,
@@ -103,7 +102,7 @@ const NotificationSettingsSection: React.FC<Props> = (props) => {
         setSaveLoading(false);
       });
   };
-  
+
   return (
     <>
       <Heading>Notification Settings</Heading>
@@ -120,7 +119,9 @@ const NotificationSettingsSection: React.FC<Props> = (props) => {
           {hasNotifications != null && !hasNotifications ? (
             <Banner type="warning">
               No integration has been set up for notifications.{" "}
-              <A href={`${window.location.protocol}//${window.location.host}/integrations/slack`} >
+              <A
+                href={`${window.location.protocol}//${window.location.host}/integrations/slack`}
+              >
                 Connect to Slack
               </A>
             </Banner>

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

@@ -47,13 +47,17 @@ class RevisionSection extends Component<PropsType, StateType> {
   refreshHistory = () => {
     let { chart } = this.props;
     let { currentCluster, currentProject } = this.context;
-    
+
     return api
       .getRevisions(
         "<token>",
+        {},
         {
-        },
-        { id: currentProject.id, namespace: chart.namespace, cluster_id: currentCluster.id, name: chart.name }
+          id: currentProject.id,
+          namespace: chart.namespace,
+          cluster_id: currentCluster.id,
+          name: chart.name,
+        }
       )
       .then((res) => {
         res.data.sort((a: ChartType, b: ChartType) => {

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

@@ -65,10 +65,9 @@ const SettingsSection: React.FC<PropsType> = ({
     api
       .getReleaseToken(
         "<token>",
+        {},
         {
-        },
-        { 
-          id: currentProject.id, 
+          id: currentProject.id,
           name: currentChart?.name,
           namespace: currentChart?.namespace,
           cluster_id: currentCluster.id,
@@ -129,8 +128,7 @@ const SettingsSection: React.FC<PropsType> = ({
       setSaveValuesStatus("successful");
       refreshChart();
     } catch (err) {
-      let parsedErr =
-        err?.response?.data?.error;
+      let parsedErr = err?.response?.data?.error;
 
       if (parsedErr) {
         err = parsedErr;
@@ -163,8 +161,7 @@ const SettingsSection: React.FC<PropsType> = ({
         setWebhookToken(res.data.webhook_token);
       }, 500);
     } catch (err) {
-      let parsedErr =
-        err?.response?.data?.error;
+      let parsedErr = err?.response?.data?.error;
 
       if (parsedErr) {
         err = parsedErr;
@@ -288,17 +285,19 @@ const SettingsSection: React.FC<PropsType> = ({
   };
 
   const canBeCloned = () => {
-    if(chartWasDeployedWithGithub()) {
+    if (chartWasDeployedWithGithub()) {
       return false;
     }
 
     // If its not web worker or job it means is an addon, and for now it's not supported
-    if (!["web", "worker", "job"].includes(currentChart?.chart?.metadata?.name)) {
-      return false
+    if (
+      !["web", "worker", "job"].includes(currentChart?.chart?.metadata?.name)
+    ) {
+      return false;
     }
 
-    return true
-  }
+    return true;
+  };
 
   return (
     <Wrapper>

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

@@ -77,8 +77,7 @@ export default class ValuesYaml extends Component<PropsType, StateType> {
         this.props.refreshChart();
       })
       .catch((err) => {
-        let parsedErr =
-          err?.response?.data?.error;
+        let parsedErr = err?.response?.data?.error;
 
         if (parsedErr) {
           err = parsedErr;

dashboard/src/main/home/cluster-dashboard/expanded-chart/events/EventsTab.tsx

@@ -88,27 +88,26 @@ const EventsTab: React.FunctionComponent<Props> = (props) => {
       if (!shouldRequest) return;
       setShouldRequest(false);
       api
-          .getReleaseSteps(
-              "<token>",
-              {
-              },
-              {
-                cluster_id: currentCluster.id,
-                namespace: props.currentChart.namespace,
-                id: currentProject.id,
-                name: props.currentChart.name,
-              }
-          )
-          .then((data) => {
-            setIsLoading(false);
-            filterData(data.data);
-          })
-          .catch((err) => {
-            setIsError(true);
-          })
-          .finally(() => {
-            setShouldRequest(true);
-          });
+        .getReleaseSteps(
+          "<token>",
+          {},
+          {
+            cluster_id: currentCluster.id,
+            namespace: props.currentChart.namespace,
+            id: currentProject.id,
+            name: props.currentChart.name,
+          }
+        )
+        .then((data) => {
+          setIsLoading(false);
+          filterData(data.data);
+        })
+        .catch((err) => {
+          setIsError(true);
+        })
+        .finally(() => {
+          setShouldRequest(true);
+        });
     };
 
     getData();
@@ -121,11 +120,7 @@ const EventsTab: React.FunctionComponent<Props> = (props) => {
   }, [currentProject, currentCluster, props.currentChart]);
 
   if (isError) {
-    return (
-        <Placeholder>
-          Error loading events.
-        </Placeholder>
-    )
+    return <Placeholder>Error loading events.</Placeholder>;
   }
 
   if (isLoading) {

dashboard/src/main/home/cluster-dashboard/expanded-chart/jobs/JobList.tsx

@@ -76,8 +76,7 @@ class JobList extends Component<PropsType, StateType> {
     api
       .deleteJob(
         "<token>",
-        {
-        },
+        {},
         {
           id: currentProject.id,
           name: job.metadata?.name,
@@ -92,8 +91,7 @@ class JobList extends Component<PropsType, StateType> {
         });
       })
       .catch((err) => {
-        let parsedErr =
-          err?.response?.data?.error;
+        let parsedErr = err?.response?.data?.error;
         if (parsedErr) {
           err = parsedErr;
         }

dashboard/src/main/home/cluster-dashboard/expanded-chart/jobs/JobResource.tsx

@@ -59,8 +59,7 @@ export default class JobResource extends Component<PropsType, StateType> {
       )
       .then((res) => {})
       .catch((err) => {
-        let parsedErr =
-          err?.response?.data?.error;
+        let parsedErr = err?.response?.data?.error;
         if (parsedErr) {
           err = parsedErr;
         }
@@ -74,8 +73,7 @@ export default class JobResource extends Component<PropsType, StateType> {
     api
       .getJobPods(
         "<token>",
-        {
-        },
+        {},
         {
           id: currentProject.id,
           name: this.props.job.metadata?.name,

dashboard/src/main/home/cluster-dashboard/expanded-chart/metrics/MetricsSection.tsx

@@ -136,8 +136,7 @@ const MetricsSection: React.FunctionComponent<PropsType> = ({
     api
       .getChartControllers(
         "<token>",
-        {
-        },
+        {},
         {
           id: currentProject.id,
           name: currentChart.name,

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

@@ -230,8 +230,7 @@ const ControllerTabFC: React.FunctionComponent<Props> = ({
     api
       .deletePod(
         "<token>",
-        {
-        },
+        {},
         {
           cluster_id: currentCluster.id,
           name: pod.metadata?.name,

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

@@ -180,8 +180,7 @@ export default class Logs extends Component<PropsType, StateType> {
     api
       .getPodEvents(
         "<token>",
-        {
-        },
+        {},
         {
           name: selectedPod?.metadata?.name,
           namespace: selectedPod?.metadata?.namespace,

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

@@ -32,8 +32,7 @@ const StatusSectionFC: React.FunctionComponent<Props> = ({
     api
       .getChartControllers(
         "<token>",
-        {
-        },
+        {},
         {
           namespace: currentChart.namespace,
           cluster_id: currentCluster.id,

dashboard/src/main/home/launch/Launch.tsx

@@ -168,7 +168,7 @@ class Templates extends Component<PropsType, StateType> {
 
   areCloneQueryParamsValid = () => {
     const qp = getQueryParams(this.props);
-    
+
     const requiredParams = [
       "release_namespace",
       "release_template_version",

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

@@ -34,8 +34,8 @@ export default class ClusterInstructionsModal extends Component<
               <br />
               name=$(curl -s
               https://api.github.com/repos/porter-dev/porter/releases/latest |
-              grep "browser_download_url.*/porter_.*_Darwin_x86_64\.zip" | cut -d
-              ":" -f 2,3 | tr -d \")
+              grep "browser_download_url.*/porter_.*_Darwin_x86_64\.zip" | cut
+              -d ":" -f 2,3 | tr -d \")
               <br />
               name=$(basename $name)
               <br />

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

@@ -59,16 +59,19 @@ class UpdateClusterModal extends Component<PropsType, StateType> {
         }
 
         // Handle destroying infra we've provisioned
-        api.destroyInfra(
-          "<token>",
-                { name: currentCluster.name },
-                {
-                  project_id: currentProject.id,
-                  infra_id: currentCluster.infra_id,
-                }
-        ).then(() =>
-          console.log("destroyed provisioned infra:", currentCluster.infra_id)
-        ).catch(console.log);
+        api
+          .destroyInfra(
+            "<token>",
+            { name: currentCluster.name },
+            {
+              project_id: currentProject.id,
+              infra_id: currentCluster.infra_id,
+            }
+          )
+          .then(() =>
+            console.log("destroyed provisioned infra:", currentCluster.infra_id)
+          )
+          .catch(console.log);
 
         this.props.setRefreshClusters(true);
         this.setState({ status: "successful", showDeleteOverlay: false });

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

@@ -271,6 +271,7 @@ const Br = styled.div`
 
 const StyledProvisionerSettings = styled.div`
   position: relative;
+  z-index: 0;
 `;
 
 const PositionWrapper = styled.div<{ selectedProvider: string | null }>``;

dashboard/src/shared/baseApi.tsx

@@ -19,11 +19,9 @@ export const baseApi = <T extends {}, S = {}>(
 
     // Handle request type (can refactor)
     if (requestType === "POST") {
-      return axios.post(endpointString, params, {
-      });
+      return axios.post(endpointString, params, {});
     } else if (requestType === "PUT") {
-      return axios.put(endpointString, params, {
-      });
+      return axios.put(endpointString, params, {});
     } else if (requestType === "DELETE") {
       return axios.delete(
         endpointString + "?" + qs.stringify(params, { arrayFormat: "repeat" })