Merge pull request #975 from porter-dev/0.5.0-forms-refactor

moved overlays into home and styling hotfixes

dashboard/src/components/ExpandableResource.tsx

@@ -73,7 +73,7 @@ const Status = styled.div`
 `;
 
 const StatusSection = styled.div`
-  border-radius: 5px;
+  border-radius: 8px;
   background: #ffffff11;
   font-size: 13px;
   padding: 20px 20px 25px;

dashboard/src/components/porter-form/FormDebugger.tsx

@@ -185,7 +185,7 @@ const TabWrapper = styled.div`
   background: #ffffff11;
   height: 200px;
   width: 100%;
-  border-radius: 5px;
+  border-radius: 8px;
   display: flex;
   align-items: center;
   justify-content: center;

dashboard/src/components/porter-form/PorterForm.tsx

@@ -223,7 +223,7 @@ const StyledPorterForm = styled.div<{ showSave?: boolean }>`
   color: #ffffff;
   padding: 0px 35px 25px;
   position: relative;
-  border-radius: 5px;
+  border-radius: 8px;
   font-size: 13px;
   overflow: auto;
 `;

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

@@ -19,6 +19,18 @@ const Input: React.FC<InputField> = ({
   isReadOnly,
   value,
 }) => {
+  const clipOffUnit = (x: string) => {
+    let unit = settings?.unit;
+    if (typeof x === "string" && unit) {
+      return unit === x.slice(x.length - unit.length, x.length) ? (
+        x.slice(0, x.length - unit.length)
+      ) : (
+        x
+      );
+    }
+    return x;
+  }
+
   const {
     state,
     variables,
@@ -31,7 +43,7 @@ const Input: React.FC<InputField> = ({
         : settings?.default != undefined,
     },
     initVars: {
-      [variable]: value ? value[0] : settings?.default,
+      [variable]: value ? clipOffUnit(value[0]) : settings?.default,
     },
   });
 

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

@@ -27,6 +27,6 @@ export default ResourceList;
 const ResourceListWrapper = styled.div`
   margin-bottom: 15px;
   margin-top: 20px;
-  border-radius: 5px;
+  border-radius: 8px;
   overflow: hidden;
 `;

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

@@ -18,6 +18,6 @@ export default ServiceIPList;
 const ResourceList = styled.div`
   margin-bottom: 15px;
   margin-top: 20px;
-  border-radius: 5px;
+  border-radius: 8px;
   overflow: hidden;
 `;

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

@@ -642,7 +642,7 @@ const Banner = styled.div`
   margin: 5px 0 10px;
   font-size: 13px;
   display: flex;
-  border-radius: 5px;
+  border-radius: 8px;
   padding-left: 15px;
   align-items: center;
   background: #ffffff11;

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

@@ -252,7 +252,7 @@ const StyledChart = styled.div`
   cursor: pointer;
   margin-bottom: 25px;
   padding: 1px;
-  border-radius: 5px;
+  border-radius: 8px;
   box-shadow: 0 5px 8px 0px #00000033;
   position: relative;
   border: 2px solid #9eb4ff00;

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

@@ -278,5 +278,5 @@ const LoadingWrapper = styled.div`
 `;
 
 const StyledChartList = styled.div`
-  padding-bottom: 85px;
+  padding-bottom: 105px;
 `;

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

@@ -122,6 +122,7 @@ const ClusterSettings: React.FC = () => {
     <div>
       <StyledSettingsSection showSource={false}>
         {keyRotationSection}
+        <DarkMatter />
         <Heading>Delete Cluster</Heading>
         {helperText}
         <Button
@@ -137,14 +138,19 @@ const ClusterSettings: React.FC = () => {
 
 export default ClusterSettings;
 
+const DarkMatter = styled.div`
+  width: 100%;
+  margin-top: -15px;
+`;
+
 const StyledSettingsSection = styled.div<{ showSource: boolean }>`
   margin-top: 35px;
   width: 100%;
   background: #ffffff11;
   padding: 0 35px;
-  padding-bottom: 50px;
+  padding-bottom: 15px;
   position: relative;
-  border-radius: 5px;
+  border-radius: 8px;
   overflow: auto;
   height: ${(props) => (props.showSource ? "calc(100% - 55px)" : "100%")};
 `;

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

@@ -4,6 +4,7 @@ import close from "assets/close.png";
 import backArrow from "assets/back_arrow.png";
 import key from "assets/key.svg";
 import _ from "lodash";
+import loading from "assets/loading.gif";
 
 import { ChartType, StorageType, ClusterType } from "shared/types";
 import { Context } from "shared/Context";
@@ -12,7 +13,6 @@ import api from "shared/api";
 
 import TitleSection from "components/TitleSection";
 import SaveButton from "components/SaveButton";
-import ConfirmOverlay from "components/ConfirmOverlay";
 import Loading from "components/Loading";
 import TabRegion from "components/TabRegion";
 import EnvGroupArray, { KeyValueType } from "./EnvGroupArray";
@@ -31,7 +31,6 @@ type PropsType = WithAuthProps & {
 type StateType = {
   loading: boolean;
   currentTab: string | null;
-  showDeleteOverlay: boolean;
   deleting: boolean;
   saveValuesStatus: string | null;
   envGroup: EnvGroup;
@@ -54,7 +53,6 @@ class ExpandedEnvGroup extends Component<PropsType, StateType> {
   state = {
     loading: true,
     currentTab: "environment",
-    showDeleteOverlay: false,
     deleting: false,
     saveValuesStatus: null as string | null,
     envGroup: {
@@ -303,6 +301,9 @@ class ExpandedEnvGroup extends Component<PropsType, StateType> {
                 >
                   Rename {name}
                 </Button>
+
+                <DarkMatter />
+
                 <Heading>Manage Environment Group</Heading>
                 <Helper>
                   Permanently delete this set of environment variables. This
@@ -310,7 +311,13 @@ class ExpandedEnvGroup extends Component<PropsType, StateType> {
                 </Helper>
                 <Button
                   color="#b91133"
-                  onClick={() => this.setState({ showDeleteOverlay: true })}
+                  onClick={() => {
+                    this.context.setCurrentOverlay({
+                      message: `Are you sure you want to delete ${this.state.envGroup.name}?`,
+                      onYes: this.handleDeleteEnvGroup,
+                      onNo: () => this.context.setCurrentOverlay(null),
+                    });
+                  }}
                 >
                   Delete {name}
                 </Button>
@@ -338,6 +345,7 @@ class ExpandedEnvGroup extends Component<PropsType, StateType> {
     } = this.state;
 
     this.setState({ deleting: true });
+    this.context.setCurrentOverlay(null);
     api
       .deleteConfigMap(
         "<token>",
@@ -353,20 +361,10 @@ class ExpandedEnvGroup extends Component<PropsType, StateType> {
         this.setState({ deleting: false });
       })
       .catch((err) => {
-        this.setState({ deleting: false, showDeleteOverlay: false });
+        this.setState({ deleting: false });
       });
   };
 
-  renderDeleteOverlay = () => {
-    if (this.state.deleting) {
-      return (
-        <DeleteOverlay>
-          <Loading />
-        </DeleteOverlay>
-      );
-    }
-  };
-
   render() {
     const { namespace, closeExpanded } = this.props;
     const {
@@ -376,14 +374,6 @@ class ExpandedEnvGroup extends Component<PropsType, StateType> {
     return (
       <>
         <StyledExpandedChart>
-          <ConfirmOverlay
-            show={this.state.showDeleteOverlay}
-            message={`Are you sure you want to delete ${name}?`}
-            onYes={this.handleDeleteEnvGroup}
-            onNo={() => this.setState({ showDeleteOverlay: false })}
-          />
-          {this.renderDeleteOverlay()}
-
           <HeaderWrapper>
             <BackButton onClick={closeExpanded}>
               <BackButtonImg src={backArrow} />
@@ -402,14 +392,30 @@ class ExpandedEnvGroup extends Component<PropsType, StateType> {
             </LastDeployed>
           </InfoWrapper>
 
-          <TabRegion
-            currentTab={this.state.currentTab}
-            setCurrentTab={(x: string) => this.setState({ currentTab: x })}
-            options={this.state.tabOptions}
-            color={null}
-          >
-            {this.renderTabContents()}
-          </TabRegion>
+          {
+            this.state.deleting ? (
+              <>
+                <LineBreak />
+                <Placeholder>
+                  <TextWrap>
+                    <Header>
+                      <Spinner src={loading} /> Deleting "{this.state.envGroup.name}"
+                    </Header>
+                    You will be automatically redirected after deletion is complete.
+                  </TextWrap>
+                </Placeholder>
+              </>
+            ) : (
+              <TabRegion
+                currentTab={this.state.currentTab}
+                setCurrentTab={(x: string) => this.setState({ currentTab: x })}
+                options={this.state.tabOptions}
+                color={null}
+              >
+                {this.renderTabContents()}
+              </TabRegion>
+            )
+          }
         </StyledExpandedChart>
       </>
     );
@@ -420,6 +426,42 @@ ExpandedEnvGroup.contextType = Context;
 
 export default withAuth(ExpandedEnvGroup);
 
+const Header = styled.div`
+  font-weight: 500;
+  color: #aaaabb;
+  font-size: 16px;
+  margin-bottom: 15px;
+`;
+
+const Placeholder = styled.div`
+  min-height: 400px;
+  height: 50vh;
+  padding: 30px;
+  padding-bottom: 90px;
+  font-size: 13px;
+  color: #ffffff44;
+  width: 100%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+`;
+
+const Spinner = styled.img`
+  width: 15px;
+  height: 15px;
+  margin-right: 12px;
+  margin-bottom: -2px;
+`;
+
+const TextWrap = styled.div``;
+
+const LineBreak = styled.div`
+  width: calc(100% - 0px);
+  height: 2px;
+  background: #ffffff20;
+  margin: 15px 0px 55px;
+`;
+
 const HeaderWrapper = styled.div`
   position: relative;
 `;
@@ -481,9 +523,9 @@ const InnerWrapper = styled.div<{ full?: boolean }>`
   height: ${(props) => (props.full ? "100%" : "calc(100% - 65px)")};
   background: #ffffff11;
   padding: 0 35px;
-  padding-bottom: 50px;
+  padding-bottom: 15px;
   position: relative;
-  border-radius: 5px;
+  border-radius: 8px;
   overflow: auto;
 `;
 
@@ -494,38 +536,6 @@ const TabWrapper = styled.div`
   overflow: hidden;
 `;
 
-const DeleteOverlay = styled.div`
-  position: absolute;
-  top: 0px;
-  opacity: 100%;
-  left: 0px;
-  width: 100%;
-  height: 100%;
-  z-index: 999;
-  display: flex;
-  padding-bottom: 30px;
-  align-items: center;
-  justify-content: center;
-  font-family: "Work Sans", sans-serif;
-  font-size: 18px;
-  font-weight: 500;
-  color: white;
-  flex-direction: column;
-  background: rgb(0, 0, 0, 0.73);
-  opacity: 0;
-  animation: lindEnter 0.2s;
-  animation-fill-mode: forwards;
-
-  @keyframes lindEnter {
-    from {
-      opacity: 0;
-    }
-    to {
-      opacity: 1;
-    }
-  }
-`;
-
 const InfoWrapper = styled.div`
   display: flex;
   align-items: center;

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

@@ -21,7 +21,6 @@ import {
 import { Context } from "shared/Context";
 import api from "shared/api";
 
-import ConfirmOverlay from "components/ConfirmOverlay";
 import Loading from "components/Loading";
 import StatusIndicator from "components/StatusIndicator";
 import PorterFormWrapper from "components/porter-form/PorterFormWrapper";
@@ -94,7 +93,6 @@ const ExpandedChart: React.FC<Props> = (props) => {
     currentCluster, 
     currentProject, 
     setCurrentError,
-    currentOverlay,
     setCurrentOverlay,
   } = useContext(Context);
 
@@ -440,10 +438,10 @@ const ExpandedChart: React.FC<Props> = (props) => {
     // Collate non-form tabs
     let rightTabOptions = [] as any[];
     let leftTabOptions = [] as any[];
-    rightTabOptions.push({ label: "Status", value: "status" });
+    leftTabOptions.push({ label: "Status", value: "status" });
 
     if (props.isMetricsInstalled) {
-      rightTabOptions.push({ label: "Metrics", value: "metrics" });
+      leftTabOptions.push({ label: "Metrics", value: "metrics" });
     }
 
     rightTabOptions.push({ label: "Chart Overview", value: "graph" });
@@ -470,9 +468,9 @@ const ExpandedChart: React.FC<Props> = (props) => {
         (tab: any) => !liveTabs.includes(tab.value)
       );
     }
-
-    setRightTabOptions(rightTabOptions);
+    
     setLeftTabOptions(leftTabOptions);
+    setRightTabOptions(rightTabOptions);
   };
 
   const setRevision = (chart: ChartType, isCurrent?: boolean) => {
@@ -573,6 +571,7 @@ const ExpandedChart: React.FC<Props> = (props) => {
   };
 
   const handleUninstallChart = async () => {
+    setDeleting(true);
     setCurrentOverlay(null);
     try {
       await api.uninstallTemplate(
@@ -665,11 +664,6 @@ const ExpandedChart: React.FC<Props> = (props) => {
   return (
     <>
       <StyledExpandedChart>
-      {deleting && (
-        <DeleteOverlay>
-          <Loading />
-        </DeleteOverlay>
-      )}
         <HeaderWrapper>
           <BackButton onClick={props.closeChart}>
             <BackButtonImg src={backArrow} />
@@ -699,48 +693,66 @@ const ExpandedChart: React.FC<Props> = (props) => {
             </LastDeployed>
           </InfoWrapper>
         </HeaderWrapper>
-        <RevisionSection
-          showRevisions={showRevisions}
-          toggleShowRevisions={() => {
-            setShowRevisions(!showRevisions);
-          }}
-          chart={currentChart}
-          refreshChart={() => getChartData(currentChart)}
-          setRevision={setRevision}
-          forceRefreshRevisions={forceRefreshRevisions}
-          refreshRevisionsOff={() => setForceRefreshRevisions(false)}
-          status={chartStatus}
-          shouldUpdate={
-            currentChart.latest_version &&
-            currentChart.latest_version !== currentChart.chart.metadata.version
-          }
-          latestVersion={currentChart.latest_version}
-          upgradeVersion={handleUpgradeVersion}
-        />
-        <BodyWrapper>
-          <PorterFormWrapper
-            formData={currentChart.form}
-            valuesToOverride={{
-              namespace: props.namespace,
-              clusterId: currentCluster.id,
-            }}
-            renderTabContents={renderTabContents}
-            isReadOnly={
-              imageIsPlaceholder ||
-              !isAuthorized("application", "", ["get", "update"])
-            }
-            onSubmit={onSubmit}
-            rightTabOptions={rightTabOptions}
-            leftTabOptions={leftTabOptions}
-            color={isPreview ? "#f5cb42" : null}
-            addendum={
-              <TabButton onClick={toggleDevOpsMode} devOpsMode={devOpsMode}>
-                <i className="material-icons">offline_bolt</i> DevOps Mode
-              </TabButton>
-            }
-            saveValuesStatus={saveValuesStatus}
-          />
-        </BodyWrapper>
+        {
+          deleting ? (
+            <>
+              <LineBreak />
+              <Placeholder>
+                <TextWrap>
+                  <Header>
+                    <Spinner src={loadingSrc} /> Deleting "{currentChart.name}"
+                  </Header>
+                  You will be automatically redirected after deletion is complete.
+                </TextWrap>
+              </Placeholder>
+            </>
+          ) : (
+            <>
+              <RevisionSection
+                showRevisions={showRevisions}
+                toggleShowRevisions={() => {
+                  setShowRevisions(!showRevisions);
+                }}
+                chart={currentChart}
+                refreshChart={() => getChartData(currentChart)}
+                setRevision={setRevision}
+                forceRefreshRevisions={forceRefreshRevisions}
+                refreshRevisionsOff={() => setForceRefreshRevisions(false)}
+                status={chartStatus}
+                shouldUpdate={
+                  currentChart.latest_version &&
+                  currentChart.latest_version !== currentChart.chart.metadata.version
+                }
+                latestVersion={currentChart.latest_version}
+                upgradeVersion={handleUpgradeVersion}
+              />
+              <BodyWrapper>
+                <PorterFormWrapper
+                  formData={currentChart.form}
+                  valuesToOverride={{
+                    namespace: props.namespace,
+                    clusterId: currentCluster.id,
+                  }}
+                  renderTabContents={renderTabContents}
+                  isReadOnly={
+                    imageIsPlaceholder ||
+                    !isAuthorized("application", "", ["get", "update"])
+                  }
+                  onSubmit={onSubmit}
+                  rightTabOptions={rightTabOptions}
+                  leftTabOptions={leftTabOptions}
+                  color={isPreview ? "#f5cb42" : null}
+                  addendum={
+                    <TabButton onClick={toggleDevOpsMode} devOpsMode={devOpsMode}>
+                      <i className="material-icons">offline_bolt</i> DevOps Mode
+                    </TabButton>
+                  }
+                  saveValuesStatus={saveValuesStatus}
+                />
+              </BodyWrapper>
+            </>
+          )
+        }
       </StyledExpandedChart>
     </>
   );
@@ -750,6 +762,13 @@ export default ExpandedChart;
 
 const TextWrap = styled.div``;
 
+const LineBreak = styled.div`
+  width: calc(100% - 0px);
+  height: 2px;
+  background: #ffffff20;
+  margin: 35px 0px;
+`;
+
 const BodyWrapper = styled.div`
   position: relative;
   overflow: hidden;
@@ -810,38 +829,6 @@ const Spinner = styled.img`
   margin-bottom: -2px;
 `;
 
-const DeleteOverlay = styled.div`
-  position: absolute;
-  top: 0px;
-  opacity: 100%;
-  left: 0px;
-  width: 100%;
-  height: 100%;
-  z-index: 999;
-  display: flex;
-  padding-bottom: 30px;
-  align-items: center;
-  justify-content: center;
-  font-family: "Work Sans", sans-serif;
-  font-size: 18px;
-  font-weight: 500;
-  color: white;
-  flex-direction: column;
-  background: rgb(0, 0, 0, 0.73);
-  opacity: 0;
-  animation: lindEnter 0.2s;
-  animation-fill-mode: forwards;
-
-  @keyframes lindEnter {
-    from {
-      opacity: 0;
-    }
-    to {
-      opacity: 1;
-    }
-  }
-`;
-
 const Bolded = styled.div`
   font-weight: 500;
   color: #ffffff44;
@@ -869,7 +856,7 @@ const TabButton = styled.div`
   position: absolute;
   right: 0px;
   height: 30px;
-  background: linear-gradient(to right, #26282f00, #26282f 20%);
+  background: linear-gradient(to right, #20222700, #202227 20%);
   padding-left: 30px;
   display: flex;
   align-items: center;

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

@@ -93,7 +93,7 @@ class ExpandedChartWrapper extends Component<PropsType, StateType> {
     let { baseRoute, namespace } = match.params as any;
     let { loading, currentChart } = this.state;
     if (loading) {
-      return <Loading />;
+      return <LoadingWrapper><Loading /></LoadingWrapper>;
     } else if (currentChart && baseRoute === "jobs") {
       return (
         <ExpandedJobChart
@@ -134,10 +134,8 @@ ExpandedChartWrapper.contextType = Context;
 
 export default withRouter(ExpandedChartWrapper);
 
-const NotFoundPlaceholder = styled.div`
-  display: flex;
-  align-items: center;
-  justify-content: center;
+const LoadingWrapper = styled.div`
   width: 100%;
   height: 100%;
+  margin-top: -50px;
 `;

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

@@ -11,7 +11,6 @@ import { Context } from "shared/Context";
 import api from "shared/api";
 
 import SaveButton from "components/SaveButton";
-import ConfirmOverlay from "components/ConfirmOverlay";
 import Loading from "components/Loading";
 import TitleSection from "components/TitleSection";
 import JobList from "./jobs/JobList";
@@ -39,7 +38,6 @@ type StateType = {
   tabContents: any;
   currentTab: string | null;
   websockets: Record<string, any>;
-  showDeleteOverlay: boolean;
   deleting: boolean;
   saveValuesStatus: string | null;
   formData: any;
@@ -57,7 +55,6 @@ class ExpandedJobChart extends Component<PropsType, StateType> {
     tabContents: [] as any,
     currentTab: null as string | null,
     websockets: {} as Record<string, any>,
-    showDeleteOverlay: false,
     deleting: false,
     saveValuesStatus: null as string | null,
     formData: {} as any,
@@ -474,9 +471,18 @@ class ExpandedJobChart extends Component<PropsType, StateType> {
               showSource={true}
               currentChart={this.state.currentChart}
               refreshChart={() => this.refreshChart(0)}
-              setShowDeleteOverlay={(x: boolean) =>
-                this.setState({ showDeleteOverlay: x })
-              }
+              setShowDeleteOverlay={(x: boolean) => {
+                let { setCurrentOverlay } = this.context;
+                if (x) {
+                  setCurrentOverlay({
+                    message: `Are you sure you want to delete ${this.state.currentChart.name}?`,
+                    onYes: this.handleUninstallChart,
+                    onNo: () => setCurrentOverlay(null),
+                  });
+                } else {
+                  setCurrentOverlay(null);
+                }
+              }}
               saveButtonText="Save Config"
             />
           )
@@ -528,9 +534,10 @@ class ExpandedJobChart extends Component<PropsType, StateType> {
   }
 
   handleUninstallChart = () => {
-    let { currentProject, currentCluster } = this.context;
+    let { currentProject, currentCluster, setCurrentOverlay } = this.context;
     let { currentChart } = this.state;
     this.setState({ deleting: true });
+    setCurrentOverlay(null);
     api
       .uninstallTemplate(
         "<token>",
@@ -544,22 +551,11 @@ class ExpandedJobChart extends Component<PropsType, StateType> {
         }
       )
       .then((res) => {
-        this.setState({ showDeleteOverlay: false });
         this.props.closeChart();
       })
       .catch(console.log);
   };
 
-  renderDeleteOverlay = () => {
-    if (this.state.deleting) {
-      return (
-        <DeleteOverlay>
-          <Loading />
-        </DeleteOverlay>
-      );
-    }
-  };
-
   render() {
     let { closeChart } = this.props;
     let { currentChart } = this.state;
@@ -568,14 +564,6 @@ class ExpandedJobChart extends Component<PropsType, StateType> {
     return (
       <>
         <StyledExpandedChart>
-          <ConfirmOverlay
-            show={this.state.showDeleteOverlay}
-            message={`Are you sure you want to delete ${currentChart.name}?`}
-            onYes={this.handleUninstallChart}
-            onNo={() => this.setState({ showDeleteOverlay: false })}
-          />
-          {this.renderDeleteOverlay()}
-
           <HeaderWrapper>
             <BackButton onClick={closeChart}>
               <BackButtonImg src={backArrow} />
@@ -599,31 +587,48 @@ class ExpandedJobChart extends Component<PropsType, StateType> {
             </InfoWrapper>
           </HeaderWrapper>
 
-          <BodyWrapper>
-            {(this.state.leftTabOptions?.length > 0 ||
-              this.state.formData.tabs?.length > 0 ||
-              this.state.rightTabOptions?.length > 0) && (
-              <PorterFormWrapper
-                formData={this.state.formData}
-                valuesToOverride={{
-                  namespace: chart.namespace,
-                  clusterId: this.props.currentCluster.id,
-                }}
-                renderTabContents={this.renderTabContents}
-                isReadOnly={
-                  this.state.imageIsPlaceholder ||
-                  !this.props.isAuthorized("job", "", ["get", "update"])
-                }
-                onSubmit={(formValues) =>
-                  this.handleSaveValues(formValues, false)
-                }
-                leftTabOptions={this.state.leftTabOptions}
-                rightTabOptions={this.state.rightTabOptions}
-                saveValuesStatus={this.state.saveValuesStatus}
-                saveButtonText="Save Config"
-              />
-            )}
-          </BodyWrapper>
+          {
+            this.state.deleting ? (
+              <>
+                <LineBreak />
+                <Placeholder>
+                  <TextWrap>
+                    <Header>
+                      <Spinner src={loading} /> Deleting "{currentChart.name}"
+                    </Header>
+                    You will be automatically redirected after deletion is complete.
+                  </TextWrap>
+                </Placeholder>
+              </>
+            ) : (
+              <BodyWrapper>
+                {(this.state.leftTabOptions?.length > 0 ||
+                  this.state.formData.tabs?.length > 0 ||
+                  this.state.rightTabOptions?.length > 0) && (
+                  <PorterFormWrapper
+                    formData={this.state.formData}
+                    valuesToOverride={{
+                      namespace: chart.namespace,
+                      clusterId: this.props.currentCluster.id,
+                    }}
+                    renderTabContents={this.renderTabContents}
+                    isReadOnly={
+                      this.state.imageIsPlaceholder ||
+                      !this.props.isAuthorized("job", "", ["get", "update"])
+                    }
+                    onSubmit={(formValues) => {
+                      console.log(formValues)
+                      this.handleSaveValues(formValues, false)
+                    }}
+                    leftTabOptions={this.state.leftTabOptions}
+                    rightTabOptions={this.state.rightTabOptions}
+                    saveValuesStatus={this.state.saveValuesStatus}
+                    saveButtonText="Save Config"
+                  />
+                )}
+              </BodyWrapper>
+            )
+          }
         </StyledExpandedChart>
       </>
     );
@@ -634,6 +639,13 @@ ExpandedJobChart.contextType = Context;
 
 export default withAuth(ExpandedJobChart);
 
+const LineBreak = styled.div`
+  width: calc(100% - 0px);
+  height: 2px;
+  background: #ffffff20;
+  margin: 15px 0px 55px;
+`;
+
 const ButtonWrapper = styled.div`
   margin: 5px 0 35px;
 `;
@@ -706,38 +718,6 @@ const TabWrapper = styled.div`
   overflow: hidden;
 `;
 
-const DeleteOverlay = styled.div`
-  position: absolute;
-  top: 0px;
-  opacity: 100%;
-  left: 0px;
-  width: 100%;
-  height: 100%;
-  z-index: 999;
-  display: flex;
-  padding-bottom: 30px;
-  align-items: center;
-  justify-content: center;
-  font-family: "Work Sans", sans-serif;
-  font-size: 18px;
-  font-weight: 500;
-  color: white;
-  flex-direction: column;
-  background: rgb(0, 0, 0, 0.73);
-  opacity: 0;
-  animation: lindEnter 0.2s;
-  animation-fill-mode: forwards;
-
-  @keyframes lindEnter {
-    from {
-      opacity: 0;
-    }
-    to {
-      opacity: 1;
-    }
-  }
-`;
-
 const HeaderWrapper = styled.div`
   position: relative;
 `;

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

@@ -52,7 +52,7 @@ const StyledGraphSection = styled.div`
   height: 50vh;
   font-size: 13px;
   overflow: hidden;
-  border-radius: 10px;
+  border-radius: 8px;
   border: 1px solid #ffffff33;
   animation: floatIn 0.3s;
   animation-timing-function: ease-out;

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

@@ -146,7 +146,7 @@ const StyledListSection = styled.div`
   height: 50vh;
   font-size: 13px;
   overflow: hidden;
-  border-radius: 10px;
+  border-radius: 8px;
   animation: floatIn 0.3s;
   animation-timing-function: ease-out;
   animation-fill-mode: forwards;

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

@@ -480,7 +480,7 @@ const StyledRevisionSection = styled.div`
   background: #ffffff11;
   margin: 25px 0px 18px;
   overflow: hidden;
-  border-radius: 5px;
+  border-radius: 8px;
   animation: ${(props: { showRevisions: boolean }) =>
     props.showRevisions ? "expandRevisions 0.3s" : ""};
   animation-timing-function: ease-out;

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

@@ -379,9 +379,9 @@ const StyledSettingsSection = styled.div<{ showSource: boolean }>`
   width: 100%;
   background: #ffffff11;
   padding: 0 35px;
-  padding-bottom: 50px;
+  padding-bottom: 15px;
   position: relative;
-  border-radius: 5px;
+  border-radius: 8px;
   overflow: auto;
   height: ${(props) => (props.showSource ? "calc(100% - 55px)" : "100%")};
 `;

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

@@ -111,7 +111,7 @@ ValuesYaml.contextType = Context;
 const Wrapper = styled.div`
   overflow: auto;
   height: calc(100% - 60px);
-  border-radius: 10px;
+  border-radius: 8px;
   border: 1px solid #ffffff33;
 `;
 
@@ -123,7 +123,7 @@ const StyledValuesYaml = styled.div`
   height: 50vh;
   font-size: 13px;
   overflow: hidden;
-  border-radius: 10px;
+  border-radius: 8px;
   animation: floatIn 0.3s;
   animation-timing-function: ease-out;
   animation-fill-mode: forwards;

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

@@ -112,8 +112,8 @@ export default withAuth(JobList);
 
 const Placeholder = styled.div`
   width: 100%;
-  min-height: 400px;
-  height: 50vh;
+  min-height: 250px;
+  height: 30vh;
   display: flex;
   align-items: center;
   justify-content: center;

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

@@ -684,12 +684,11 @@ const StyledMetricsSection = styled.div`
   width: 100%;
   min-height: 400px;
   height: 50vh;
-  overflow: hidden;
   display: flex;
   flex-direction: column;
   position: relative;
   font-size: 13px;
-  border-radius: 10px;
+  border-radius: 8px;
   border: 1px solid #ffffff33;
   padding: 18px 22px;
   animation: floatIn 0.3s;

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

@@ -158,7 +158,7 @@ const StyledStatusSection = styled.div`
   height: 50vh;
   font-size: 13px;
   overflow: hidden;
-  border-radius: 10px;
+  border-radius: 8px;
   animation: floatIn 0.3s;
   animation-timing-function: ease-out;
   animation-fill-mode: forwards;