diff --git a/frontend/src/metabase/actions/containers/ActionCreator/ActionCreator.styled.tsx b/frontend/src/metabase/actions/containers/ActionCreator/ActionCreator.styled.tsx
index 3022298b1649ac99c554aa8c60bc2925960ae2e3..4d35ad5b321c7a96834c22636e1cd2b3c611e8f8 100644
--- a/frontend/src/metabase/actions/containers/ActionCreator/ActionCreator.styled.tsx
+++ b/frontend/src/metabase/actions/containers/ActionCreator/ActionCreator.styled.tsx
@@ -1,4 +1,5 @@
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;
+ }
`;
diff --git a/frontend/src/metabase/actions/containers/ActionCreator/FormCreator/FormCreator.styled.tsx b/frontend/src/metabase/actions/containers/ActionCreator/FormCreator/FormCreator.styled.tsx
index 8c31ca9a722ccc806a62ee165ca23ae5ca802296..37de6cb0610fbbe9a89e067771f2703347a2d7f9 100644
--- a/frontend/src/metabase/actions/containers/ActionCreator/FormCreator/FormCreator.styled.tsx
+++ b/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`
diff --git a/frontend/src/metabase/actions/containers/ActionCreator/FormCreator/FormCreator.tsx b/frontend/src/metabase/actions/containers/ActionCreator/FormCreator/FormCreator.tsx
index d60d3f031f90cc695dc35d26a543c22fc25188dc..23d79cad9f03926605889d568278a57df883d2ad 100644
--- a/frontend/src/metabase/actions/containers/ActionCreator/FormCreator/FormCreator.tsx
+++ b/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>
diff --git a/frontend/src/metabase/actions/containers/ActionCreator/InlineActionSettings.styled.tsx b/frontend/src/metabase/actions/containers/ActionCreator/InlineActionSettings.styled.tsx
index 2998d151960d81a5fd226bf3ee42b78cf455fca6..527e55c22038a03937e3c37a77e73281035cce32 100644
--- a/frontend/src/metabase/actions/containers/ActionCreator/InlineActionSettings.styled.tsx
+++ b/frontend/src/metabase/actions/containers/ActionCreator/InlineActionSettings.styled.tsx
@@ -1,19 +1,4 @@
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;
diff --git a/frontend/src/metabase/actions/containers/ActionCreator/InlineActionSettings.tsx b/frontend/src/metabase/actions/containers/ActionCreator/InlineActionSettings.tsx
index f4f79c5338311b5b51c91744e553a1da01b1737d..7604e9a59802eef49daef72ffffc536b84708029 100644
--- a/frontend/src/metabase/actions/containers/ActionCreator/InlineActionSettings.tsx
+++ b/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>
);
};
diff --git a/frontend/src/metabase/actions/containers/ActionCreator/InlineDataReference.styled.tsx b/frontend/src/metabase/actions/containers/ActionCreator/InlineDataReference.styled.tsx
deleted file mode 100644
index db0da0e91331cc79c48bf1bce3ea5a5d9bbc36f7..0000000000000000000000000000000000000000
--- a/frontend/src/metabase/actions/containers/ActionCreator/InlineDataReference.styled.tsx
+++ /dev/null
@@ -1,20 +0,0 @@
-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")};
- }
-`;
diff --git a/frontend/src/metabase/actions/containers/ActionCreator/InlineDataReference.tsx b/frontend/src/metabase/actions/containers/ActionCreator/InlineDataReference.tsx
index ac08583e0241719933988a5f9fd5d934c66e66cc..7245fd4bff15bc866c122b1da9c6f5fa85dad59f 100644
--- a/frontend/src/metabase/actions/containers/ActionCreator/InlineDataReference.tsx
+++ b/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}
+ />
);
};
diff --git a/frontend/src/metabase/query_builder/components/SidebarContent/SidebarContent.tsx b/frontend/src/metabase/query_builder/components/SidebarContent/SidebarContent.tsx
index 542bd7c97504fab60d48b21061098d0cf88fede5..afdb98187723b52a53efd2e31f4e99c77d71d5ba 100644
--- a/frontend/src/metabase/query_builder/components/SidebarContent/SidebarContent.tsx
+++ b/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,
});