Fix action editor UI issues (#28540)

* Update empty state

* Clean up layout

* Bring back sticky headers

frontend/src/metabase/actions/containers/ActionCreator/ActionCreator.styled.tsx

 import styled from "@emotion/styled";
+import SidebarContent from "metabase/query_builder/components/SidebarContent";
 import { color } from "metabase/lib/colors";
 import { space } from "metabase/styled-components/theme";
 
@@ -46,7 +47,25 @@ export const ModalLeft = styled.div`
 `;
 
 export const ModalRight = styled.div`
-  position: relative;
   display: flex;
-  overflow-y: auto;
+  position: relative;
+  overflow-y: hidden;
+
+  ${SidebarContent.Root}, ${SidebarContent.Content} {
+    width: 100%;
+    height: 100%;
+  }
+
+  ${SidebarContent.Content} {
+    overflow-y: auto;
+  }
+
+  ${SidebarContent.Header.Root} {
+    position: sticky;
+    top: 0;
+    padding: 1.5rem 1.5rem 0.5rem 1.5rem;
+    margin: 0;
+    background-color: ${color("white")};
+    z-index: 5;
+  }
 `;

frontend/src/metabase/actions/containers/ActionCreator/FormCreator/FormCreator.styled.tsx

@@ -34,7 +34,7 @@ export const EmptyFormPlaceholderWrapper = styled.div`
   flex-direction: column;
   justify-content: center;
   height: 100%;
-  padding: 5rem;
+  padding: 3rem;
 `;
 
 export const ExplainerTitle = styled.h3`

frontend/src/metabase/actions/containers/ActionCreator/FormCreator/FormCreator.tsx

@@ -50,7 +50,7 @@ function FormCreator({
 
   if (!sortedParams.length) {
     return (
-      <SidebarContent title={t`Action parameters`}>
+      <SidebarContent>
         <FormContainer>
           <EmptyFormPlaceholder />
         </FormContainer>

frontend/src/metabase/actions/containers/ActionCreator/InlineActionSettings.styled.tsx

 import styled from "@emotion/styled";
-import { color } from "metabase/lib/colors";
-
-import SidebarContent from "metabase/query_builder/components/SidebarContent";
-
-export const ActionSettingsContainer = styled.div`
-  width: 100%;
-
-  ${SidebarContent.Header.Root} {
-    position: sticky;
-    top: 0;
-    padding: 1.5rem 1.5rem 0.5rem 1.5rem;
-    margin: 0;
-    background-color: ${color("white")};
-  }
-`;
 
 export const ActionSettingsContent = styled.div`
   margin: 1rem 1.5rem;

frontend/src/metabase/actions/containers/ActionCreator/InlineActionSettings.tsx

@@ -29,7 +29,6 @@ import CopyWidget from "metabase/components/CopyWidget";
 
 import { isSavedAction } from "../../utils";
 import {
-  ActionSettingsContainer,
   ActionSettingsContent,
   CopyWidgetContainer,
 } from "./InlineActionSettings.styled";
@@ -124,54 +123,52 @@ const InlineActionSettings = ({
   };
 
   return (
-    <ActionSettingsContainer>
-      <SidebarContent title={t`Action settings`} onClose={onClose}>
-        <ActionSettingsContent>
-          {action && hasSharingPermission && (
-            <FormField
-              title={t`Make public`}
-              description={t`Creates a publicly shareable link to this action form.`}
-              orientation="horizontal"
-              htmlFor={`${id}-public`}
-            >
-              <Toggle
-                id={`${id}-public`}
-                value={action.public_uuid != null}
-                onChange={handleTogglePublic}
-              />
-            </FormField>
-          )}
-          {action?.public_uuid && hasSharingPermission && (
-            <CopyWidgetContainer>
-              <CopyWidget
-                value={Urls.publicAction(siteUrl, action.public_uuid)}
-                aria-label={t`Public action form URL`}
-              />
-            </CopyWidgetContainer>
-          )}
-          {isModalOpen && (
-            <Modal>
-              <ConfirmContent
-                title={t`Disable this public link?`}
-                content={t`This will cause the existing link to stop working. You can re-enable it, but when you do it will be a different link.`}
-                onAction={handleDisablePublicLink}
-                onClose={closeModal}
-              />
-            </Modal>
-          )}
-          <FormField title={t`Success message`} htmlFor={`${id}-message`}>
-            <TextArea
-              id={`${id}-message`}
-              value={formSettings.successMessage ?? ""}
-              placeholder={t`Action ran successfully`}
-              fullWidth
-              disabled={!isEditable}
-              onChange={handleSuccessMessageChange}
+    <SidebarContent title={t`Action settings`} onClose={onClose}>
+      <ActionSettingsContent>
+        {action && hasSharingPermission && (
+          <FormField
+            title={t`Make public`}
+            description={t`Creates a publicly shareable link to this action form.`}
+            orientation="horizontal"
+            htmlFor={`${id}-public`}
+          >
+            <Toggle
+              id={`${id}-public`}
+              value={action.public_uuid != null}
+              onChange={handleTogglePublic}
             />
           </FormField>
-        </ActionSettingsContent>
-      </SidebarContent>
-    </ActionSettingsContainer>
+        )}
+        {action?.public_uuid && hasSharingPermission && (
+          <CopyWidgetContainer>
+            <CopyWidget
+              value={Urls.publicAction(siteUrl, action.public_uuid)}
+              aria-label={t`Public action form URL`}
+            />
+          </CopyWidgetContainer>
+        )}
+        {isModalOpen && (
+          <Modal>
+            <ConfirmContent
+              title={t`Disable this public link?`}
+              content={t`This will cause the existing link to stop working. You can re-enable it, but when you do it will be a different link.`}
+              onAction={handleDisablePublicLink}
+              onClose={closeModal}
+            />
+          </Modal>
+        )}
+        <FormField title={t`Success message`} htmlFor={`${id}-message`}>
+          <TextArea
+            id={`${id}-message`}
+            value={formSettings.successMessage ?? ""}
+            placeholder={t`Action ran successfully`}
+            fullWidth
+            disabled={!isEditable}
+            onChange={handleSuccessMessageChange}
+          />
+        </FormField>
+      </ActionSettingsContent>
+    </SidebarContent>
   );
 };
 

frontend/src/metabase/actions/containers/ActionCreator/InlineDataReference.styled.tsx

-import styled from "@emotion/styled";
-import { color } from "metabase/lib/colors";
-
-import SidebarContent from "metabase/query_builder/components/SidebarContent";
-
-export const DataReferenceContainer = styled.div`
-  overflow: hidden;
-  position: relative;
-  width: 100%;
-  height: 100%;
-  background-color: ${color("white")};
-
-  ${SidebarContent.Header.Root} {
-    position: sticky;
-    top: 0;
-    padding: 1.5rem 1.5rem 0.5rem 1.5rem;
-    margin: 0;
-    background-color: ${color("white")};
-  }
-`;

frontend/src/metabase/actions/containers/ActionCreator/InlineDataReference.tsx

@@ -6,8 +6,6 @@ import Button from "metabase/core/components/Button";
 
 import DataReference from "metabase/query_builder/components/dataref/DataReference";
 
-import { DataReferenceContainer } from "./InlineDataReference.styled";
-
 export const DataReferenceInline = ({ onClose }: { onClose: () => void }) => {
   const [dataRefStack, setDataRefStack] = useState<any[]>([]);
 
@@ -20,14 +18,12 @@ export const DataReferenceInline = ({ onClose }: { onClose: () => void }) => {
   };
 
   return (
-    <DataReferenceContainer>
-      <DataReference
-        dataReferenceStack={dataRefStack}
-        popDataReferenceStack={popRefStack}
-        pushDataReferenceStack={pushRefStack}
-        onClose={onClose}
-      />
-    </DataReferenceContainer>
+    <DataReference
+      dataReferenceStack={dataRefStack}
+      popDataReferenceStack={popRefStack}
+      pushDataReferenceStack={pushRefStack}
+      onClose={onClose}
+    />
   );
 };
 

frontend/src/metabase/query_builder/components/SidebarContent/SidebarContent.tsx

@@ -56,5 +56,7 @@ function SidebarContent({
 }
 
 export default Object.assign(SidebarContent, {
+  Root: SidebarContentRoot,
   Header: SidebarHeader,
+  Content: SidebarContentMain,
 });