enable namespaces for capi provisioned without simplified view (#3183)

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

@@ -35,7 +35,7 @@ export default class ServiceRow extends Component<PropsType, StateType> {
                 <Name>{name}</Name> <Dash>-</Dash> <IP>{clusterIP}</IP>
               </Flex>
               <TagWrapper>
-                Namespace: <NamespaceTag>{namespace}</NamespaceTag>
+                Namespace: <NamespaceTag>{namespace.startsWith("porter-stack-") ? namespace.replace("porter-stack-", "") : namespace}</NamespaceTag>
               </TagWrapper>
             </StyledServiceRow>
           )}

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

@@ -79,7 +79,12 @@ export const NamespaceSelector: React.FunctionComponent<Props> = ({
             setDefaultNamespace("default");
           }
           availableNamespaces.forEach((x: { name: string }, i: number) => {
-            if (!x.name.startsWith("pr-")) {
+            if (currentProject?.capi_provisioner_enabled && x.name.startsWith("porter-stack-")) {
+              namespaceOptions.push({
+                label: x.name.replace("porter-stack-", ""),
+                value: x.name,
+              });
+            } else if (!x.name.startsWith("pr-")) {
               namespaceOptions.push({
                 label: x.name,
                 value: x.name,

dashboard/src/main/home/cluster-dashboard/apps/AppDashboard.tsx

@@ -7,7 +7,7 @@ import web from "assets/web.png";
 import { Context } from "shared/Context";
 import { JobStatusType } from "shared/types";
 import { withAuth, WithAuthProps } from "shared/auth/AuthorizationHoc";
-import { 
+import {
   pushQueryParams,
   pushFiltered,
   PorterUrl,
@@ -67,41 +67,39 @@ const AppDashboard: React.FC<Props> = ({
                 currentView={currentView}
               />
               <Spacer inline width="10px" />
-              {!currentProject?.capi_provisioner_enabled && (
-                <NamespaceSelector
-                  setNamespace={(x) => {
-                    setNamespace(x);
-                    pushQueryParams(props, {
-                      namespace: x || "ALL",
-                    });
-                  }}
-                  namespace={namespace}
-                />
-              )}
+              <NamespaceSelector
+                setNamespace={(x) => {
+                  setNamespace(x);
+                  pushQueryParams(props, {
+                    namespace: x || "ALL",
+                  });
+                }}
+                namespace={namespace}
+              />
               <TagFilter
                 onSelect={setSelectedTag}
               />
             </FilterWrapper>
             <Flex>
               {props.isAuthorized(
-                "namespace", 
-                [], 
+                "namespace",
+                [],
                 ["get", "create"]
               ) && (
-                <Button
-                  onClick={() => {
-                    pushFiltered(props, "/launch", ["project_id"])
-                  }}
-                >
-                  <i className="material-icons">add</i> Launch template
-                </Button>
-              )}
+                  <Button
+                    onClick={() => {
+                      pushFiltered(props, "/launch", ["project_id"])
+                    }}
+                  >
+                    <i className="material-icons">add</i> Launch template
+                  </Button>
+                )}
             </Flex>
           </ControlRow>
           <ChartList
             currentView={currentView}
             currentCluster={currentCluster}
-            namespace={currentProject.capi_provisioner_enabled ? "default" : namespace}
+            namespace={namespace}
             sortType={sortType}
             selectedTag={selectedTag}
           />
@@ -189,7 +187,7 @@ const Button = styled.div`
     props.disabled ? "#aaaabbee" : "#616FEEcc"};
   :hover {
     background: ${(props: { disabled?: boolean }) =>
-      props.disabled ? "" : "#505edddd"};
+    props.disabled ? "" : "#505edddd"};
   }
 
   > i {

dashboard/src/main/home/cluster-dashboard/chart/Chart.tsx

@@ -132,9 +132,8 @@ const Chart: React.FunctionComponent<Props> = ({
 
     const cluster = context.currentCluster?.name;
 
-    const route = `${isJob ? "/jobs" : "/applications"}/${cluster}/${
-      chart.namespace
-    }/${chart.name}`;
+    const route = `${isJob ? "/jobs" : "/applications"}/${cluster}/${chart.namespace
+      }/${chart.name}`;
 
     const newParams = {
       // @ts-ignore
@@ -224,7 +223,7 @@ const Chart: React.FunctionComponent<Props> = ({
 
           <TagWrapper>
             Namespace
-            <NamespaceTag>{chart.namespace}</NamespaceTag>
+            <NamespaceTag>{context.currentProject?.capi_provisioner_enabled && chart.namespace.startsWith("porter-stack-") ? chart.namespace.replace("porter-stack-", "") : chart.namespace}</NamespaceTag>
           </TagWrapper>
         </BottomWrapper>
 
@@ -375,13 +374,12 @@ const JobStatus = styled.span<{ status?: JobStatusType }>`
   font-weight: ${(props) =>
     props.status && props.status !== JobStatusType.Running ? "500" : ""};
   ${(props) => `
-  color: ${
-    props.status === JobStatusType.Succeeded
+  color: ${props.status === JobStatusType.Succeeded
       ? "rgb(56, 168, 138)"
       : props.status === JobStatusType.Failed
-      ? "#ff385d"
-      : "#aaaabb66"
-  }`}
+        ? "#ff385d"
+        : "#aaaabb66"
+    }`}
 `;
 
 const StyledChart = styled.div`

dashboard/src/main/home/cluster-dashboard/env-groups/EnvGroup.tsx

@@ -54,7 +54,7 @@ export default class EnvGroup extends Component<PropsType, StateType> {
 
             <TagWrapper>
               Namespace
-              <NamespaceTag>{namespace}</NamespaceTag>
+              <NamespaceTag>{namespace.startsWith("porter-stack-") ? namespace.replace("porter-stack-", "") : namespace}</NamespaceTag>
             </TagWrapper>
           </BottomWrapper>
 

dashboard/src/main/home/cluster-dashboard/env-groups/EnvGroupDashboard.tsx

@@ -107,12 +107,10 @@ const EnvGroupDashboard = (props: PropsType) => {
                 sortType={state.sortType}
               />
               <Spacer inline width="10px" />
-              {!currentProject?.capi_provisioner_enabled && (
-                <NamespaceSelector
-                  setNamespace={setNamespace}
-                  namespace={state.namespace}
-                />
-              )}
+              <NamespaceSelector
+                setNamespace={setNamespace}
+                namespace={state.namespace}
+              />
             </SortFilterWrapper>
             <Flex>
               {isAuthorizedToAdd && (
@@ -217,7 +215,7 @@ const Button = styled.div`
     props.disabled ? "#aaaabbee" : "#616FEEcc"};
   :hover {
     background: ${(props: { disabled?: boolean }) =>
-      props.disabled ? "" : "#505edddd"};
+    props.disabled ? "" : "#505edddd"};
   }
 
   > i {

dashboard/src/main/home/cluster-dashboard/env-groups/ExpandedEnvGroup.tsx

@@ -431,7 +431,7 @@ export const ExpandedEnvGroupFC = ({
         <TitleSection icon={key} iconWidth="33px">
           {envGroup.name}
           <TagWrapper>
-            Namespace <NamespaceTag>{namespace}</NamespaceTag>
+            Namespace <NamespaceTag>{currentProject?.capi_provisioner_enabled && namespace.startsWith("porter-stack-") ? namespace.replace("porter-stack-", "") : namespace}</NamespaceTag>
           </TagWrapper>
         </TitleSection>
       </HeaderWrapper>

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

@@ -239,7 +239,7 @@ const ExpandedJobChart: React.FC<PropsType> = ({ currentChart: oldChart, closeCh
             <>
               <JobList
                 jobs={jobs}
-                setJobs={() => {}}
+                setJobs={() => { }}
                 expandJob={(job: any) => {
                   setSelectedJob(job);
                 }}
@@ -371,51 +371,51 @@ const ExpandedJobChart: React.FC<PropsType> = ({ currentChart: oldChart, closeCh
           {(leftTabOptions?.length > 0 ||
             formData.tabs?.length > 0 ||
             rightTabOptions?.length > 0) && (
-            <PorterFormWrapper
-              formData={formData}
-              valuesToOverride={{
-                namespace: chart?.namespace,
-                clusterId: currentCluster?.id,
-              }}
-              renderTabContents={renderTabContents}
-              isReadOnly={
-                hasPorterImageTemplate ||
-                !isAuthorized("job", "", ["get", "update"]) ||
-                disableForm
-              }
-              onSubmit={(formValues) =>
-                updateChart(processValuesToUpdateChart(formValues))
-              }
-              includeMetadata
-              leftTabOptions={leftTabOptions}
-              rightTabOptions={rightTabOptions}
-              saveValuesStatus={saveStatus}
-              saveButtonText="Save config"
-              includeHiddenFields
-              addendum={
-                <TabButton
-                  onClick={() =>
-                    setDevOpsMode((prev) => {
-                      localStorage.setItem("devOpsMode", prev.toString());
-                      return !prev;
-                    })
-                  }
-                  devOpsMode={devOpsMode}
-                >
-                  <i className="material-icons">offline_bolt</i> DevOps Mode
-                </TabButton>
-              }
-              injectedProps={{
-                "key-value-array": {
-                  availableSyncEnvGroups:
-                    isStack && !disableForm ? stackEnvGroups : undefined,
-                },
-                "url-link": {
-                  chart: chart,
-                },
-              }}
-            />
-          )}
+              <PorterFormWrapper
+                formData={formData}
+                valuesToOverride={{
+                  namespace: chart?.namespace,
+                  clusterId: currentCluster?.id,
+                }}
+                renderTabContents={renderTabContents}
+                isReadOnly={
+                  hasPorterImageTemplate ||
+                  !isAuthorized("job", "", ["get", "update"]) ||
+                  disableForm
+                }
+                onSubmit={(formValues) =>
+                  updateChart(processValuesToUpdateChart(formValues))
+                }
+                includeMetadata
+                leftTabOptions={leftTabOptions}
+                rightTabOptions={rightTabOptions}
+                saveValuesStatus={saveStatus}
+                saveButtonText="Save config"
+                includeHiddenFields
+                addendum={
+                  <TabButton
+                    onClick={() =>
+                      setDevOpsMode((prev) => {
+                        localStorage.setItem("devOpsMode", prev.toString());
+                        return !prev;
+                      })
+                    }
+                    devOpsMode={devOpsMode}
+                  >
+                    <i className="material-icons">offline_bolt</i> DevOps Mode
+                  </TabButton>
+                }
+                injectedProps={{
+                  "key-value-array": {
+                    availableSyncEnvGroups:
+                      isStack && !disableForm ? stackEnvGroups : undefined,
+                  },
+                  "url-link": {
+                    chart: chart,
+                  },
+                }}
+              />
+            )}
         </BodyWrapper>
       </StyledExpandedChart>
     </>
@@ -443,64 +443,64 @@ const ExpandedJobHeader: React.FC<{
   setDisableForm,
   disableRevisions,
 }) => (
-  <>
-    <BreadcrumbRow>
-      <Breadcrumb onClick={closeChart}>
-        <ArrowIcon src={leftArrow} />
-        <Wrap>Back</Wrap>
-      </Breadcrumb>
-    </BreadcrumbRow>
-    <HeaderWrapper>
-      <TitleSection icon={chart?.chart.metadata.icon} iconWidth="33px">
-        {chart?.name}
-        <DeploymentType currentChart={chart} />
-        <TagWrapper>
-          Namespace <NamespaceTag>{chart.namespace}</NamespaceTag>
-        </TagWrapper>
-      </TitleSection>
-      {chart?.config?.description ? (
-        <Description>{chart?.config?.description}</Description>
-      ) : null}
-
-      <InfoWrapper>
-        {chart?.canonical_name !== "" ? (
-          <Url>
-            <Bolded>Helm Release Name:</Bolded>
-            {chart?.name}
-          </Url>
+    <>
+      <BreadcrumbRow>
+        <Breadcrumb onClick={closeChart}>
+          <ArrowIcon src={leftArrow} />
+          <Wrap>Back</Wrap>
+        </Breadcrumb>
+      </BreadcrumbRow>
+      <HeaderWrapper>
+        <TitleSection icon={chart?.chart.metadata.icon} iconWidth="33px">
+          {chart?.name}
+          <DeploymentType currentChart={chart} />
+          <TagWrapper>
+            Namespace <NamespaceTag>{chart.namespace.startsWith("porter-stack-") ? chart.namespace.replace("porter-stack-", "") : chart.namespace}</NamespaceTag>
+          </TagWrapper>
+        </TitleSection>
+        {chart?.config?.description ? (
+          <Description>{chart?.config?.description}</Description>
         ) : null}
-        <LastDeployed>
-          Run {jobs?.length} times <Dot>•</Dot>Last template update at
-          {" " + readableDate(chart.info.last_deployed)}
-        </LastDeployed>
-      </InfoWrapper>
-      {!disableRevisions ? (
-        <RevisionSection
-          chart={chart}
-          refreshChart={() => refreshChart()}
-          setRevision={(chart, isCurrent) => {
-            loadChartWithSpecificRevision(chart?.version);
-            setDisableForm(!isCurrent);
-          }}
-          forceRefreshRevisions={false}
-          refreshRevisionsOff={() => {}}
-          shouldUpdate={
-            chart?.latest_version &&
-            chart?.latest_version !== chart?.chart.metadata.version
-          }
-          latestVersion={chart?.latest_version}
-          upgradeVersion={(_version, cb) => {
-            upgradeChart().then(() => {
-              if (typeof cb === "function") {
-                cb();
-              }
-            });
-          }}
-        />
-      ) : null}
-    </HeaderWrapper>
-  </>
-);
+
+        <InfoWrapper>
+          {chart?.canonical_name !== "" ? (
+            <Url>
+              <Bolded>Helm Release Name:</Bolded>
+              {chart?.name}
+            </Url>
+          ) : null}
+          <LastDeployed>
+            Run {jobs?.length} times <Dot>•</Dot>Last template update at
+            {" " + readableDate(chart.info.last_deployed)}
+          </LastDeployed>
+        </InfoWrapper>
+        {!disableRevisions ? (
+          <RevisionSection
+            chart={chart}
+            refreshChart={() => refreshChart()}
+            setRevision={(chart, isCurrent) => {
+              loadChartWithSpecificRevision(chart?.version);
+              setDisableForm(!isCurrent);
+            }}
+            forceRefreshRevisions={false}
+            refreshRevisionsOff={() => { }}
+            shouldUpdate={
+              chart?.latest_version &&
+              chart?.latest_version !== chart?.chart.metadata.version
+            }
+            latestVersion={chart?.latest_version}
+            upgradeVersion={(_version, cb) => {
+              upgradeChart().then(() => {
+                if (typeof cb === "function") {
+                  cb();
+                }
+              });
+            }}
+          />
+        ) : null}
+      </HeaderWrapper>
+    </>
+  );
 
 const ArrowIcon = styled.img`
   width: 15px;
@@ -780,11 +780,11 @@ const TabButton = styled.div`
   border-radius: 20px;
   text-shadow: 0px 0px 8px
     ${(props: { devOpsMode: boolean }) =>
-      props.devOpsMode ? "#ffffff66" : "none"};
+    props.devOpsMode ? "#ffffff66" : "none"};
   cursor: pointer;
   :hover {
     color: ${(props: { devOpsMode: boolean }) =>
-      props.devOpsMode ? "" : "#aaaabb99"};
+    props.devOpsMode ? "" : "#aaaabb99"};
   }
 
   > i {

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

@@ -310,7 +310,7 @@ const ExpandedJobRun = ({
                 : ""
             )}
             <TagWrapper>
-              Namespace <NamespaceTag>{chart.namespace}</NamespaceTag>
+              Namespace <NamespaceTag>{currentProject?.capi_provisioner_enabled && chart.namespace.startsWith("porter-stack-") ? chart.namespace.replace("porter-stack-", "") : chart.namespace}</NamespaceTag>
             </TagWrapper>
             <DeploymentType currentChart={currentChart} />
           </LastDeployed>

dashboard/src/main/home/cluster-dashboard/jobs/JobDashboard.tsx

@@ -7,7 +7,7 @@ import job from "assets/job.png";
 import { Context } from "shared/Context";
 import { JobStatusType } from "shared/types";
 import { withAuth, WithAuthProps } from "shared/auth/AuthorizationHoc";
-import { 
+import {
   pushQueryParams,
   pushFiltered,
   PorterUrl,
@@ -59,17 +59,15 @@ const JobDashboard: React.FC<Props> = ({
                 lastRunStatus={lastRunStatus}
                 setLastRunStatus={setLastRunStatus}
               />
-              {!currentProject?.capi_provisioner_enabled && (
-                <NamespaceSelector
-                  setNamespace={(x) => {
-                    setNamespace(x);
-                    pushQueryParams(props, {
-                      namespace: x || "ALL",
-                    });
-                  }}
-                  namespace={namespace}
-                />
-              )}
+              <NamespaceSelector
+                setNamespace={(x) => {
+                  setNamespace(x);
+                  pushQueryParams(props, {
+                    namespace: x || "ALL",
+                  });
+                }}
+                namespace={namespace}
+              />
               <TagFilter
                 onSelect={setSelectedTag}
               />
@@ -91,18 +89,18 @@ const JobDashboard: React.FC<Props> = ({
                 </ToggleOption>
               </ToggleButton>
               {props.isAuthorized(
-                "namespace", 
-                [], 
+                "namespace",
+                [],
                 ["get", "create"]
               ) && (
-                <Button
-                  onClick={() => {
-                    pushFiltered(props, "/launch", ["project_id"]);
-                  }}
-                >
-                  <i className="material-icons">add</i> Launch template
-                </Button>
-              )}
+                  <Button
+                    onClick={() => {
+                      pushFiltered(props, "/launch", ["project_id"]);
+                    }}
+                  >
+                    <i className="material-icons">add</i> Launch template
+                  </Button>
+                )}
             </Flex>
           </ControlRow>
           <HidableElement show={showRuns}>
@@ -206,7 +204,7 @@ const Button = styled.div`
     props.disabled ? "#aaaabbee" : "#616FEEcc"};
   :hover {
     background: ${(props: { disabled?: boolean }) =>
-      props.disabled ? "" : "#505edddd"};
+    props.disabled ? "" : "#505edddd"};
   }
 
   > i {