feat: make flow editor read only when published

packages/web/src/components/PowerInput/index.tsx

@@ -38,6 +38,7 @@ type PowerInputProps = {
   description?: string;
   docUrl?: string;
   clickToCopy?: boolean;
+  disabled?: boolean;
 }
 
 const PowerInput = (props: PowerInputProps) => {
@@ -49,6 +50,7 @@ const PowerInput = (props: PowerInputProps) => {
     label,
     required,
     description,
+    disabled,
   } = props;
   const priorStepsWithExecutions = React.useContext(StepExecutionsContext);
   const editorRef = React.useRef<HTMLDivElement | null>(null);
@@ -161,11 +163,11 @@ const PowerInput = (props: PowerInputProps) => {
           <ClickAwayListener onClickAway={() => setSearch(null)}>
             {/* ref-able single child for ClickAwayListener */}
             <div style={{ width: '100%' }}>
-              <FakeInput>
+              <FakeInput disabled={disabled}>
                 <InputLabelWrapper>
                   <InputLabel
                     shrink={true}
-                    // focused
+                    disabled={disabled}
                     variant="outlined"
                     sx={{ bgcolor: 'white', display: 'inline-block', px: .75 }}
                   >
@@ -174,6 +176,7 @@ const PowerInput = (props: PowerInputProps) => {
                 </InputLabelWrapper>
 
                 <Editable
+                  readOnly={disabled}
                   style={{ width: '100%' }}
                   renderElement={renderElement}
                   onKeyDown={onKeyDown}

packages/web/src/components/PowerInput/style.ts

@@ -7,7 +7,7 @@ export const InputLabelWrapper = styled('div')`
   left: -6px;
 `;
 
-export const FakeInput = styled('div')`
+export const FakeInput = styled('div', { shouldForwardProp: prop => prop !== 'disabled'})<{ disabled?: boolean }>`
   border: 1px solid #eee;
   min-height: 52px;
   width: 100%;
@@ -17,6 +17,11 @@ export const FakeInput = styled('div')`
   border-color: rgba(0, 0, 0, 0.23);
   position: relative;
 
+  ${({ disabled, theme }) => !!disabled && `
+    color: ${theme.palette.action.disabled},
+    border-color: ${theme.palette.action.disabled},
+  `}
+
   &:hover {
     border-color: ${({ theme }) => theme.palette.text.primary};
   }