-
-
Key:
-
{val.key}
+ {value &&
+ value.map((val: { key: string; value: string }) => {
+ return (
+
+
+ Key:
+ {val.key}
+
+
+ Value:
+ {val.value}
+
-
- Value:
- {val.value}
-
-
- );
- })}
+ );
+ })}
);
}
diff --git a/app/client/src/pages/Editor/DataSourceEditor/RestAPIDatasourceForm.tsx b/app/client/src/pages/Editor/DataSourceEditor/RestAPIDatasourceForm.tsx
new file mode 100644
index 0000000000..731a5465a3
--- /dev/null
+++ b/app/client/src/pages/Editor/DataSourceEditor/RestAPIDatasourceForm.tsx
@@ -0,0 +1,442 @@
+import React from "react";
+import styled from "styled-components";
+import _ from "lodash";
+import { DATASOURCE_DB_FORM } from "constants/forms";
+import { DATA_SOURCES_EDITOR_URL } from "constants/routes";
+import FormControl from "../FormControl";
+import Collapsible from "./Collapsible";
+import history from "utils/history";
+import FormTitle from "./FormTitle";
+import { ControlProps } from "components/formControls/BaseControl";
+import Connected from "./Connected";
+import Button from "components/editorComponents/Button";
+import { Datasource } from "entities/Datasource";
+import { reduxForm, InjectedFormProps } from "redux-form";
+import { BaseButton } from "components/designSystems/blueprint/ButtonComponent";
+import AnalyticsUtil from "utils/AnalyticsUtil";
+import BackButton from "./BackButton";
+import Boxed from "components/editorComponents/Onboarding/Boxed";
+import { OnboardingStep } from "constants/OnboardingConstants";
+import { isHidden } from "components/formControls/utils";
+import log from "loglevel";
+
+interface DatasourceDBEditorProps {
+ onSave: (formValues: Datasource) => void;
+ onTest: (formValus: Datasource) => void;
+ handleDelete: (id: string) => void;
+ setDatasourceEditorMode: (id: string, viewMode: boolean) => void;
+ selectedPluginPackage: string;
+ isSaving: boolean;
+ isDeleting: boolean;
+ datasourceId: string;
+ applicationId: string;
+ pageId: string;
+ formData: Datasource;
+ isTesting: boolean;
+ formConfig: any[];
+ isNewDatasource: boolean;
+ pluginImage: string;
+ viewMode: boolean;
+ pluginType: string;
+}
+
+interface DatasourceDBEditorState {
+ viewMode: boolean;
+}
+
+type Props = DatasourceDBEditorProps &
+ InjectedFormProps
;
+
+const DBForm = styled.div`
+ padding: 20px;
+ margin-left: 10px;
+ margin-right: 0px;
+ height: calc(100vh - ${(props) => props.theme.headerHeight});
+ overflow: auto;
+ .backBtn {
+ padding-bottom: 1px;
+ cursor: pointer;
+ }
+ .backBtnText {
+ font-size: 16px;
+ font-weight: 500;
+ cursor: pointer;
+ }
+`;
+
+const PluginImage = styled.img`
+ height: 40px;
+ width: auto;
+`;
+
+export const FormTitleContainer = styled.div`
+ flex-direction: row;
+ display: flex;
+ align-items: center;
+`;
+
+export const Header = styled.div`
+ flex-direction: row;
+ display: flex;
+ align-items: center;
+ justify-content: space-between;
+ margin-top: 16px;
+`;
+
+const SaveButtonContainer = styled.div`
+ margin-top: 24px;
+ display: flex;
+ justify-content: flex-end;
+`;
+
+const ActionButton = styled(BaseButton)`
+ &&& {
+ max-width: 72px;
+ margin-right: 9px;
+ min-height: 32px;
+ }
+`;
+
+const StyledButton = styled(Button)`
+ &&&& {
+ width: 87px;
+ height: 32px;
+ }
+`;
+
+class DatasourceDBEditor extends React.Component<
+ Props,
+ DatasourceDBEditorState
+> {
+ requiredFields: Record;
+ configDetails: Record;
+ constructor(props: Props) {
+ super(props);
+
+ this.state = {
+ viewMode: true,
+ };
+ this.requiredFields = {};
+ this.configDetails = {};
+ }
+
+ componentDidMount() {
+ this.requiredFields = {};
+ this.configDetails = {};
+ }
+
+ componentDidUpdate(prevProps: Props) {
+ if (prevProps.datasourceId !== this.props.datasourceId) {
+ this.requiredFields = {};
+ this.configDetails = {};
+ this.props.setDatasourceEditorMode(this.props.datasourceId, true);
+ }
+ }
+
+ validate = () => {
+ const errors = {} as any;
+ const requiredFields = Object.keys(this.requiredFields);
+ const values = this.props.formData;
+
+ requiredFields.forEach((fieldConfigProperty) => {
+ const fieldConfig = this.requiredFields[fieldConfigProperty];
+ if (fieldConfig.controlType === "KEYVALUE_ARRAY") {
+ const configProperty = fieldConfig.configProperty.split("[*].");
+ const arrayValues = _.get(values, configProperty[0]);
+ const keyValueArrayErrors: Record[] = [];
+
+ arrayValues.forEach((value: any, index: number) => {
+ const objectKeys = Object.keys(value);
+ const keyValueErrors: Record = {};
+
+ if (!value[objectKeys[0]]) {
+ keyValueErrors[objectKeys[0]] = "This field is required";
+ keyValueArrayErrors[index] = keyValueErrors;
+ }
+ if (!value[objectKeys[1]]) {
+ keyValueErrors[objectKeys[1]] = "This field is required";
+ keyValueArrayErrors[index] = keyValueErrors;
+ }
+ });
+
+ if (keyValueArrayErrors.length) {
+ _.set(errors, configProperty[0], keyValueArrayErrors);
+ }
+ } else if (fieldConfig.controlType === "KEY_VAL_INPUT") {
+ const value = _.get(values, fieldConfigProperty, []);
+
+ if (value.length) {
+ const values = Object.values(value[0]);
+ const isNotBlank = values.every((value) => value);
+
+ if (!isNotBlank) {
+ _.set(errors, fieldConfigProperty, "This field is required");
+ }
+ }
+ } else {
+ const value = _.get(values, fieldConfigProperty);
+
+ if (!value) {
+ _.set(errors, fieldConfigProperty, "This field is required");
+ }
+ }
+ });
+
+ return !_.isEmpty(errors) || this.props.invalid;
+ };
+
+ render() {
+ const { formConfig } = this.props;
+ const content = this.renderDataSourceConfigForm(formConfig);
+ return {content};
+ }
+
+ isNewDatasource = () => {
+ const { datasourceId } = this.props;
+
+ return datasourceId.includes(":");
+ };
+
+ normalizeValues = () => {
+ let { formData } = this.props;
+ const checked: Record = {};
+ const configProperties = Object.keys(this.configDetails);
+
+ for (const configProperty of configProperties) {
+ const controlType = this.configDetails[configProperty];
+
+ if (controlType === "KEYVALUE_ARRAY") {
+ const properties = configProperty.split("[*].");
+
+ if (checked[properties[0]]) continue;
+
+ checked[properties[0]] = 1;
+ const values = _.get(formData, properties[0]);
+ const newValues: ({ [s: string]: unknown } | ArrayLike)[] = [];
+
+ values.forEach(
+ (object: { [s: string]: unknown } | ArrayLike) => {
+ const isEmpty = Object.values(object).every((x) => x === "");
+
+ if (!isEmpty) {
+ newValues.push(object);
+ }
+ },
+ );
+
+ if (newValues.length) {
+ formData = _.set(formData, properties[0], newValues);
+ } else {
+ formData = _.set(formData, properties[0], []);
+ }
+ } else if (controlType === "KEY_VAL_INPUT") {
+ if (checked[configProperty]) continue;
+
+ const values = _.get(formData, configProperty);
+ const newValues: ({ [s: string]: unknown } | ArrayLike)[] = [];
+
+ values.forEach(
+ (object: { [s: string]: unknown } | ArrayLike) => {
+ const isEmpty = Object.values(object).every((x) => x === "");
+
+ if (!isEmpty) {
+ newValues.push(object);
+ }
+ },
+ );
+
+ if (newValues.length) {
+ formData = _.set(formData, configProperty, newValues);
+ } else {
+ formData = _.set(formData, configProperty, []);
+ }
+ }
+ }
+
+ return formData;
+ };
+
+ save = () => {
+ const normalizedValues = this.normalizeValues();
+ AnalyticsUtil.logEvent("SAVE_DATA_SOURCE_CLICK", {
+ pageId: this.props.pageId,
+ appId: this.props.applicationId,
+ });
+ this.props.onSave(normalizedValues);
+ };
+
+ test = () => {
+ const normalizedValues = this.normalizeValues();
+ AnalyticsUtil.logEvent("TEST_DATA_SOURCE_CLICK", {
+ pageId: this.props.pageId,
+ appId: this.props.applicationId,
+ });
+ this.props.onTest(normalizedValues);
+ };
+
+ renderDataSourceConfigForm = (sections: any) => {
+ const {
+ isSaving,
+ applicationId,
+ pageId,
+ isTesting,
+ isDeleting,
+ datasourceId,
+ handleDelete,
+ } = this.props;
+ const { viewMode } = this.props;
+
+ return (
+
+ );
+ };
+
+ renderMainSection = (section: any, index: number) => {
+ if (isHidden(this.props.formData, section.hidden)) return null;
+ return (
+
+ {this.renderEachConfig(section)}
+
+ );
+ };
+
+ renderSingleConfig = (
+ config: ControlProps,
+ multipleConfig?: ControlProps[],
+ ) => {
+ multipleConfig = multipleConfig || [];
+ try {
+ this.setupConfig(config);
+ return (
+
+
+
+ );
+ } catch (e) {
+ log.error(e);
+ }
+ };
+
+ setupConfig = (config: ControlProps) => {
+ const { controlType, isRequired, configProperty } = config;
+ this.configDetails[configProperty] = controlType;
+
+ if (isRequired) {
+ this.requiredFields[configProperty] = config;
+ }
+ };
+
+ isKVArray = (children: Array) => {
+ if (!Array.isArray(children) || children.length < 2) return false;
+ return (
+ children[0].controlType && children[0].controlType === "KEYVALUE_ARRAY"
+ );
+ };
+
+ renderKVArray = (children: Array) => {
+ try {
+ // setup config for each child
+ children.forEach((c) => this.setupConfig(c));
+ // We pass last child for legacy reasons, to keep the logic here exactly same as before.
+ return this.renderSingleConfig(children[children.length - 1], children);
+ } catch (e) {
+ log.error(e);
+ }
+ };
+
+ renderEachConfig = (section: any) => {
+ return (
+
+ {_.map(section.children, (propertyControlOrSection: ControlProps) => {
+ // If the section is hidden, skip rendering
+ if (isHidden(this.props.formData, section.hidden)) return null;
+ if ("children" in propertyControlOrSection) {
+ const { children } = propertyControlOrSection;
+ if (this.isKVArray(children)) {
+ return this.renderKVArray(children);
+ }
+ return this.renderEachConfig(propertyControlOrSection);
+ } else {
+ return this.renderSingleConfig(propertyControlOrSection);
+ }
+ })}
+
+ );
+ };
+}
+
+export default reduxForm({
+ form: DATASOURCE_DB_FORM,
+})(DatasourceDBEditor);
diff --git a/app/client/src/pages/Editor/DataSourceEditor/index.tsx b/app/client/src/pages/Editor/DataSourceEditor/index.tsx
index 89616cf9d0..b8e46b2418 100644
--- a/app/client/src/pages/Editor/DataSourceEditor/index.tsx
+++ b/app/client/src/pages/Editor/DataSourceEditor/index.tsx
@@ -19,9 +19,18 @@ import {
import { DATASOURCE_DB_FORM } from "constants/forms";
import DatasourceHome from "./DatasourceHome";
import DataSourceEditorForm from "./DBForm";
+import RestAPIDatasourceForm from "./RestAPIDatasourceForm";
import { Datasource } from "entities/Datasource";
import { RouteComponentProps } from "react-router";
import EntityNotFoundPane from "pages/Editor/EntityNotFoundPane";
+import { PluginType } from "entities/Action";
+import { Spinner } from "@blueprintjs/core";
+import CenteredWrapper from "components/designSystems/appsmith/CenteredWrapper";
+import styled from "styled-components";
+
+export const LoadingContainer = styled(CenteredWrapper)`
+ height: 50%;
+`;
interface ReduxStateProps {
formData: Datasource;
@@ -92,40 +101,49 @@ class DataSourceEditor extends React.Component {
if (!pluginId && datasourceId) {
return ;
}
+ if (!datasourceId) {
+ return (
+
+ );
+ }
+ if (loadingFormConfigs) {
+ return (
+
+
+
+ );
+ }
+ const DatasourceForm =
+ pluginType === PluginType.API
+ ? RestAPIDatasourceForm
+ : DataSourceEditorForm;
return (
-
- {datasourceId ? (
-
- ) : (
-
- )}
-
+
);
}
}
diff --git a/app/client/src/pages/Editor/EditableAppName.tsx b/app/client/src/pages/Editor/EditableAppName.tsx
new file mode 100644
index 0000000000..560d8db2e6
--- /dev/null
+++ b/app/client/src/pages/Editor/EditableAppName.tsx
@@ -0,0 +1,70 @@
+import EditableText, { EditableTextProps } from "components/ads/EditableText";
+import React, { useState } from "react";
+import styled from "styled-components";
+import { Variant } from "components/ads/common";
+import { Toaster } from "components/ads/Toast";
+import { Classes } from "@blueprintjs/core";
+import { getTypographyByKey } from "constants/DefaultTheme";
+
+type EditableTextWrapperProps = EditableTextProps & {
+ isNewApp: boolean;
+};
+
+const Container = styled.div`
+ & .bp3-editable-text-content:hover {
+ text-decoration: underline;
+ }
+ & .${Classes.EDITABLE_TEXT} {
+ height: ${(props) => props.theme.smallHeaderHeight} !important;
+ display: flex;
+ align-items: center;
+ }
+ &&&& .${Classes.EDITABLE_TEXT}, &&&& .${Classes.EDITABLE_TEXT_EDITING} {
+ padding: 0 ${(props) => props.theme.spaces[0]}px;
+ }
+ &&&& .${Classes.EDITABLE_TEXT_CONTENT}, &&&& .${Classes.EDITABLE_TEXT_INPUT} {
+ display: inline;
+ ${(props) => getTypographyByKey(props, "h4")};
+ line-height: 19px !important;
+ padding: 0;
+ height: unset !important;
+ position: relative;
+ top: 1px;
+ width: unset !important;
+ }
+ &&&& .${Classes.EDITABLE_TEXT_CONTENT} {
+ min-width: 0;
+ }
+`;
+
+export default function EditableTextWrapper(props: EditableTextWrapperProps) {
+ const [isEditingDefault, setIsEditingDefault] = useState(props.isNewApp);
+
+ return (
+
+ {
+ props.onBlur(value);
+ setIsEditingDefault(false);
+ }}
+ className={props.className}
+ isInvalid={(value: string) => {
+ if (value.trim() === "") {
+ Toaster.show({
+ text: "Application name can't be empty",
+ variant: Variant.danger,
+ });
+ }
+ return false;
+ }}
+ hideEditIcon
+ />
+
+ );
+}
diff --git a/app/client/src/pages/Editor/EditorHeader.tsx b/app/client/src/pages/Editor/EditorHeader.tsx
index 3919f8eb82..138fca6d8e 100644
--- a/app/client/src/pages/Editor/EditorHeader.tsx
+++ b/app/client/src/pages/Editor/EditorHeader.tsx
@@ -9,13 +9,11 @@ import {
getApplicationViewerPageURL,
} from "constants/routes";
import AppInviteUsersForm from "pages/organization/AppInviteUsersForm";
-import Button from "components/editorComponents/Button";
import StyledHeader from "components/designSystems/appsmith/StyledHeader";
import AnalyticsUtil from "utils/AnalyticsUtil";
import HelpModal from "components/designSystems/appsmith/help/HelpModal";
import { FormDialogComponent } from "components/editorComponents/form/FormDialogComponent";
-import { Colors } from "constants/Colors";
-import AppsmithLogo from "assets/images/appsmith_logo_white.png";
+import AppsmithLogo from "assets/images/appsmith_logo_square.png";
import { Link } from "react-router-dom";
import { AppState } from "reducers";
import {
@@ -36,19 +34,49 @@ import {
getApplicationList,
getIsSavingAppName,
} from "selectors/applicationSelectors";
-import EditableTextWrapper from "components/ads/EditableTextWrapper";
+import EditableAppName from "./EditableAppName";
import Boxed from "components/editorComponents/Onboarding/Boxed";
import OnboardingToolTip from "components/editorComponents/Onboarding/Tooltip";
import { OnboardingStep } from "constants/OnboardingConstants";
import { Position } from "@blueprintjs/core";
import Indicator from "components/editorComponents/Onboarding/Indicator";
+import ProfileDropdown from "pages/common/ProfileDropdown";
+import { getCurrentUser } from "selectors/usersSelectors";
+import { ANONYMOUS_USERNAME } from "constants/userConstants";
+import Button, { Size } from "components/ads/Button";
+import { IconWrapper } from "components/ads/Icon";
+import { Profile } from "pages/common/ProfileImage";
+import { getTypographyByKey } from "constants/DefaultTheme";
const HeaderWrapper = styled(StyledHeader)`
- background: ${Colors.BALTIC_SEA};
- height: 48px;
- color: white;
+ padding-right: 0;
+ padding-left: ${(props) => props.theme.spaces[7]}px;
+ background-color: ${(props) => props.theme.colors.header.background};
+ height: ${(props) => props.theme.smallHeaderHeight};
flex-direction: row;
box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.05);
+ & .editable-application-name {
+ ${(props) => getTypographyByKey(props, "h4")}
+ color: ${(props) => props.theme.colors.header.appName};
+ }
+
+ & .header__application-share-btn {
+ background-color: ${(props) => props.theme.colors.header.background};
+ border-color: ${(props) => props.theme.colors.header.background};
+ // margin-right: ${(props) => props.theme.spaces[1]}px;
+ }
+
+ & .header__application-share-btn:hover {
+ color: ${(props) => props.theme.colors.header.shareBtnHighlight};
+ ${IconWrapper} path {
+ fill: ${(props) => props.theme.colors.header.shareBtnHighlight};
+ }
+ }
+
+ & ${Profile} {
+ width: 24px;
+ height: 24px;
+ }
`;
const HeaderSection = styled.div`
@@ -59,21 +87,16 @@ const HeaderSection = styled.div`
justify-content: flex-start;
}
:nth-child(2) {
- justify-content: center;
- flex-direction: column;
- }
- :nth-child(3) {
justify-content: flex-end;
}
`;
const AppsmithLogoImg = styled.img`
- max-width: 110px;
+ margin-right: ${(props) => props.theme.spaces[6]}px;
+ height: 24px;
`;
const SaveStatusContainer = styled.div`
- margin: 0 10px;
- border: 1px solid rgb(95, 105, 116);
border-radius: 50%;
width: 32px;
height: 32px;
@@ -83,34 +106,16 @@ const SaveStatusContainer = styled.div`
`;
const DeploySection = styled.div`
display: flex;
- align-self: flex-end;
`;
-const DeployButton = styled(Button)`
- height: 32px;
- margin: 5px 10px;
- margin-right: 0;
- border-top-right-radius: 0;
- border-bottom-right-radius: 0;
+const ProfileDropdownContainer = styled.div`
+ margin: 0 ${(props) => props.theme.spaces[7]}px;
`;
-const DeployLinkButton = styled(Button)`
- height: 32px;
- margin: 5px 10px;
- margin-left: 0;
- border-top-left-radius: 0;
- border-bottom-left-radius: 0;
- min-width: 20px !important;
- width: 20px !important;
- background-color: rgb(42, 195, 157) !important;
- border: none !important;
-`;
-
-const ShareButton = styled(Button)`
- height: 32px;
- margin: 5px 10px;
- color: white !important;
- border-color: rgb(95, 105, 116) !important;
+const StyledDeployButton = styled(Button)`
+ height: ${(props) => props.theme.smallHeaderHeight};
+ ${(props) => getTypographyByKey(props, "btnLarge")}
+ padding: ${(props) => props.theme.spaces[2]}px;
`;
type EditorHeaderProps = {
@@ -132,7 +137,6 @@ export const EditorHeader = (props: EditorHeaderProps) => {
isSaving,
pageSaveError,
pageId,
- isPublishing,
orgId,
applicationId,
publishApplication,
@@ -141,6 +145,7 @@ export const EditorHeader = (props: EditorHeaderProps) => {
const dispatch = useDispatch();
const isSavingName = useSelector(getIsSavingAppName);
const applicationList = useSelector(getApplicationList);
+ const user = useSelector(getCurrentUser);
const handlePublish = () => {
if (applicationId) {
@@ -189,23 +194,19 @@ export const EditorHeader = (props: EditorHeaderProps) => {
return (
-
+
-
-
-
- {currentApplication ? (
-
+ {currentApplication && (
+ {
})
}
/>
- ) : null}
- {/* {pageName} */}
-
-
+ )}
+
+
{saveStatusIcon}
-
- }
- />
- }
+
}
canOutsideClickClose={true}
@@ -284,32 +260,28 @@ export const EditorHeader = (props: EditorHeaderProps) => {
offset={{ left: 10 }}
theme={"light"}
>
-
- }
/>
+
}
link={getApplicationViewerPageURL(applicationId, pageId)}
/>
+ {user && user.username !== ANONYMOUS_USERNAME && (
+
+
+
+ )}
diff --git a/app/client/src/pages/Editor/MainContainer.tsx b/app/client/src/pages/Editor/MainContainer.tsx
index 0d6f6e9018..fa6014ebf0 100644
--- a/app/client/src/pages/Editor/MainContainer.tsx
+++ b/app/client/src/pages/Editor/MainContainer.tsx
@@ -11,7 +11,7 @@ const SentryRoute = Sentry.withSentryRouting(Route);
const Container = styled.div`
display: flex;
- height: calc(100vh - ${(props) => props.theme.headerHeight});
+ height: calc(100vh - ${(props) => props.theme.smallHeaderHeight});
`;
const EditorContainer = styled.div`
diff --git a/app/client/src/pages/Editor/QueryEditor/Form.tsx b/app/client/src/pages/Editor/QueryEditor/Form.tsx
index 93afb4f7e1..8fd89eab10 100644
--- a/app/client/src/pages/Editor/QueryEditor/Form.tsx
+++ b/app/client/src/pages/Editor/QueryEditor/Form.tsx
@@ -47,7 +47,7 @@ const QueryFormContainer = styled.form`
flex-direction: column;
padding: 20px 0px;
width: 100%;
- height: calc(100vh - ${(props) => props.theme.headerHeight});
+ height: calc(100vh - ${(props) => props.theme.smallHeaderHeight});
a {
font-size: 14px;
line-height: 20px;
diff --git a/app/client/src/pages/Editor/QueryEditor/QueryHomeScreen.tsx b/app/client/src/pages/Editor/QueryEditor/QueryHomeScreen.tsx
index 12da0f9d60..14a8bb9dd9 100644
--- a/app/client/src/pages/Editor/QueryEditor/QueryHomeScreen.tsx
+++ b/app/client/src/pages/Editor/QueryEditor/QueryHomeScreen.tsx
@@ -25,7 +25,7 @@ const QueryHomePage = styled.div`
overflow: auto;
display: flex;
flex-direction: column;
- height: calc(100vh - ${(props) => props.theme.headerHeight});
+ height: calc(100vh - ${(props) => props.theme.smallHeaderHeight});
.sectionHeader {
font-weight: ${(props) => props.theme.fontWeights[2]};
diff --git a/app/client/src/pages/Editor/WidgetsEditor.tsx b/app/client/src/pages/Editor/WidgetsEditor.tsx
index 73bbf15202..29bd33b415 100644
--- a/app/client/src/pages/Editor/WidgetsEditor.tsx
+++ b/app/client/src/pages/Editor/WidgetsEditor.tsx
@@ -31,7 +31,7 @@ const EditorWrapper = styled.div`
align-items: stretch;
justify-content: flex-start;
overflow: hidden;
- height: calc(100vh - ${(props) => props.theme.headerHeight});
+ height: calc(100vh - ${(props) => props.theme.smallHeaderHeight});
`;
const CanvasContainer = styled.section`
diff --git a/app/client/src/pages/Editor/index.tsx b/app/client/src/pages/Editor/index.tsx
index 0fbed1fd6d..116fe80f5e 100644
--- a/app/client/src/pages/Editor/index.tsx
+++ b/app/client/src/pages/Editor/index.tsx
@@ -186,7 +186,7 @@ class Editor extends Component {
public render() {
if (!this.props.isEditorInitialized || !this.state.registered) {
return (
-
+
);
diff --git a/app/client/src/pages/Editor/routes.tsx b/app/client/src/pages/Editor/routes.tsx
index d4aeaf2cf7..c00ee8492d 100644
--- a/app/client/src/pages/Editor/routes.tsx
+++ b/app/client/src/pages/Editor/routes.tsx
@@ -44,7 +44,7 @@ const Wrapper = styled.div<{ isVisible: boolean }>`
top: 0;
left: 0;
width: ${(props) => (!props.isVisible ? "0px" : "100%")};
- height: calc(100vh - ${(props) => props.theme.headerHeight});
+ height: calc(100vh - ${(props) => props.theme.smallHeaderHeight});
background-color: ${(props) =>
props.isVisible ? "rgba(0, 0, 0, 0.26)" : "transparent"};
z-index: ${(props) => (props.isVisible ? 2 : -1)};
diff --git a/app/client/src/pages/common/ProfileDropdown.tsx b/app/client/src/pages/common/ProfileDropdown.tsx
index 165763470e..2b0ed857d3 100644
--- a/app/client/src/pages/common/ProfileDropdown.tsx
+++ b/app/client/src/pages/common/ProfileDropdown.tsx
@@ -13,10 +13,13 @@ import {
} from "./CustomizedDropdown/dropdownHelpers";
import { ReduxActionTypes } from "constants/ReduxActionConstants";
import ProfileImage from "./ProfileImage";
+import { PopperModifiers } from "@blueprintjs/core";
type TagProps = CommonComponentProps & {
onClick?: (text: string) => void;
userName?: string;
+ hideThemeSwitch?: boolean;
+ modifiers?: PopperModifiers;
};
const ProfileMenuStyle = createGlobalStyle`
@@ -63,6 +66,7 @@ export default function ProfileDropdown(props: TagProps) {
className="profile-menu"
position={Position.BOTTOM}
target={Profile}
+ modifiers={props.modifiers}
>
{Profile}
@@ -73,8 +77,12 @@ export default function ProfileDropdown(props: TagProps) {