Add overlay to disable build settings on previous revisions

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

@@ -52,9 +52,10 @@ type UpdateBuildconfigResponse = {
 
 type Props = {
   chart: ChartTypeWithExtendedConfig;
+  isPreviousVersion: boolean;
 };
 
-const BuildSettingsTab: React.FC<Props> = ({ chart }) => {
+const BuildSettingsTab: React.FC<Props> = ({ chart, isPreviousVersion }) => {
   const { currentCluster, currentProject, setCurrentError } = useContext(
     Context
   );
@@ -174,7 +175,13 @@ const BuildSettingsTab: React.FC<Props> = ({ chart }) => {
 
   return (
     <Wrapper>
-      <StyledSettingsSection>
+      {isPreviousVersion ? (
+        <DisabledOverlay>
+          Build config is disabled when reviewing past versions. Please go to
+          the current revision to update your app build configuration.
+        </DisabledOverlay>
+      ) : null}
+      <StyledSettingsSection blurContent={isPreviousVersion}>
         <Heading isAtTop>Build step environment variables:</Heading>
         <KeyValueArray
           values={envVariables}
@@ -534,6 +541,19 @@ const BuildpackConfigSection: React.FC<{
   );
 };
 
+const DisabledOverlay = styled.div`
+  position: absolute;
+  width: 100%;
+  height: inherit;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background: #00000099;
+  z-index: 1000;
+  border-radius: 8px;
+  padding: 0 35px;
+  text-align: center;
+`;
 const fadeIn = keyframes`
   from {
     opacity: 0;
@@ -604,12 +624,13 @@ const BuildpackConfigurationContainer = styled.div`
 `;
 
 const Wrapper = styled.div`
+  position: relative;
   width: 100%;
-  padding-bottom: 65px;
+  margin-bottom: 65px;
   height: 100%;
 `;
 
-const StyledSettingsSection = styled.div`
+const StyledSettingsSection = styled.div<{ blurContent: boolean }>`
   width: 100%;
   background: #ffffff11;
   padding: 0 35px;
@@ -618,6 +639,7 @@ const StyledSettingsSection = styled.div`
   position: relative;
   border-radius: 8px;
   height: calc(100% - 55px);
+  ${(props) => (props.blurContent ? "filter: blur(5px);" : "")}
 `;
 
 const StyledCard = styled.div`

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

@@ -517,7 +517,7 @@ const ExpandedChart: React.FC<Props> = (props) => {
           />
         );
       case "build-settings":
-        return <BuildSettingsTab chart={chart} />;
+        return <BuildSettingsTab chart={chart} isPreviousVersion={isPreview} />;
       default:
     }
   };