Add User Profile Section (#6705)

- Replace AuthTypeSelector with OptionSelector for general use.
- Fix Scroll issue in GitSyncModal

app/client/src/components/ads/Dropdown.tsx

@@ -9,6 +9,8 @@ import SearchComponent from "components/designSystems/appsmith/SearchComponent";
 import { Colors } from "constants/Colors";
 import Spinner from "./Spinner";
 
+export type DropdownOnSelect = (value?: string, dropdownOption?: any) => void;
+
 export type DropdownOption = {
   label?: string;
   value?: string;
@@ -19,7 +21,7 @@ export type DropdownOption = {
   subText?: string;
   iconSize?: IconSize;
   iconColor?: string;
-  onSelect?: (value?: string, dropdownOption?: any) => void;
+  onSelect?: DropdownOnSelect;
   data?: any;
 };
 export interface DropdownSearchProps {
@@ -48,7 +50,7 @@ export type DropdownProps = CommonComponentProps &
   DropdownSearchProps & {
     options: DropdownOption[];
     selected: DropdownOption;
-    onSelect?: (value?: string, dropdownOption?: any) => void;
+    onSelect?: DropdownOnSelect;
     width?: string;
     height?: string;
     showLabelOnly?: boolean;

app/client/src/constants/messages.ts

@@ -429,3 +429,11 @@ export const CONNECT_TO_GIT = () => "Connect to Git";
 export const CONNECT_TO_GIT_SUBTITLE = () =>
   "Choose an existing empty repository to host your project and keep it in sync";
 export const REMOTE_URL_VIA = () => "REMOTE URL VIA";
+
+export const USER_PROFILE_SETTINGS_TITLE = () => "User Settings";
+
+export const AUTHOR_NAME = () => "AUTHOR NAME";
+export const AUTHOR_EMAIL = () => "AUTHOR EMAIL";
+export const SELECT_SSH_KEY = () => "SELECT SSH KEY";
+export const USER_NAME = () => "USER NAME";
+export const USER_PASSWORD = () => "PASSWORD";

app/client/src/pages/Editor/gitSync/GitConnection.tsx

@@ -1,17 +1,21 @@
-import React from "react";
+import React, { useState } from "react";
-import { Subtitle, Title } from "./components/StyledComponents";
+import { Subtitle, Title, Space } from "./components/StyledComponents";
 import {
   CONNECT_TO_GIT,
   CONNECT_TO_GIT_SUBTITLE,
   REMOTE_URL_VIA,
   createMessage,
 } from "constants/messages";
-import AuthTypeDropdown from "./components/AuthTypeDropdown";
+import OptionSelector from "./components/OptionSelector";
 import styled from "styled-components";
 import { getTypographyByKey } from "constants/DefaultTheme";
 import TextInput from "components/ads/TextInput";
 import { ReactComponent as CheckIcon } from "assets/icons/ads/check.svg";
 import { ReactComponent as LinkIcon } from "assets/icons/ads/link_2.svg";
+import UserGitProfileSettings from "./components/UserGitProfileSettings";
+import { DropdownOption } from "components/ads/Dropdown";
+import { AUTH_TYPE_OPTIONS } from "./constants";
+import { DropdownOnSelect } from "../../../components/ads/Dropdown";
 
 const UrlOptionContainer = styled.div`
   ${(props) => getTypographyByKey(props, "h6")};
@@ -37,14 +41,26 @@ const UrlContainer = styled.div`
   align-items: center;
 `;
 
-function GitConection() {
+function GitConnection() {
+  const [selectedAuthType, setSelectedAuthType] = useState<DropdownOption>(
+    AUTH_TYPE_OPTIONS[0],
+  );
+
+  const onSelectAuthType: DropdownOnSelect = (value, dropdownOption) => {
+    setSelectedAuthType(dropdownOption);
+  };
+
   return (
     <>
       <Title>{createMessage(CONNECT_TO_GIT)}</Title>
       <Subtitle>{createMessage(CONNECT_TO_GIT_SUBTITLE)}</Subtitle>
       <UrlOptionContainer>
         <span className="label">{`${createMessage(REMOTE_URL_VIA)} `}</span>
-        <AuthTypeDropdown />
+        <OptionSelector
+          onSelect={onSelectAuthType}
+          options={AUTH_TYPE_OPTIONS}
+          selected={selectedAuthType}
+        />
       </UrlOptionContainer>
       <UrlContainer>
         <TextInput
@@ -57,8 +73,10 @@ function GitConection() {
         />
         <LinkIcon />
       </UrlContainer>
+      <Space size={12} />
+      <UserGitProfileSettings authType={selectedAuthType.label || ""} />
     </>
   );
 }
 
-export default GitConection;
+export default GitConnection;

app/client/src/pages/Editor/gitSync/GitSyncModal.tsx

@@ -17,12 +17,16 @@ const Container = styled.div`
   width: 100%;
   display: flex;
   position: relative;
+  overflow-y: hidden;
 `;
 
 const BodyContainer = styled.div`
   flex: 3;
   padding-left: ${(props) => props.theme.spaces[12]}px;
   padding-top: ${(props) => props.theme.spaces[13]}px;
+  padding-bottom: ${(props) => props.theme.spaces[13]}px;
+  overflow-y: auto;
+  height: 100%;
 `;
 
 const MenuContainer = styled.div`

app/client/src/pages/Editor/gitSync/components/OptionSelector.tsx

@@ -7,7 +7,8 @@ import Dropdown, {
 import { ReactComponent as ChevronDown } from "assets/icons/ads/chevron-down.svg";
 import { Colors } from "constants/Colors";
 import styled from "styled-components";
-import { AuthTypeOptions } from "../constants";
+import { DropdownOption } from "components/ads/Dropdown";
+import { Classes as GitSyncClasses } from "pages/Editor/gitSync/constants";
 
 const SelectedValueNodeContainer = styled.div`
   color: ${Colors.CRUSTA};
@@ -37,15 +38,22 @@ const DropdownContainer = styled.div`
   }
 `;
 
-function SelectAuthType() {
+type OptionSelectorProps = {
+  options: DropdownOption[];
+  selected: DropdownOption;
+  onSelect?: (value?: string, dropdownOption?: any) => void;
+};
+
+function OptionSelector({ onSelect, options, selected }: OptionSelectorProps) {
   return (
-    <DropdownContainer>
+    <DropdownContainer className={GitSyncClasses.OPTION_SELECTOR_WRAPPER}>
       <Dropdown
         SelectedValueNode={SelectedValueNode}
         bgColor={"transparent"}
         className="auth-type-dropdown"
-        options={AuthTypeOptions}
+        onSelect={onSelect}
-        selected={AuthTypeOptions[0]}
+        options={options}
+        selected={selected}
         showDropIcon={false}
         showLabelOnly
       />
@@ -53,4 +61,4 @@ function SelectAuthType() {
   );
 }
 
-export default SelectAuthType;
+export default OptionSelector;

app/client/src/pages/Editor/gitSync/components/StyledComponents.tsx

@@ -8,3 +8,10 @@ export const Title = styled.h1`
 export const Subtitle = styled.p`
   ${(props) => getTypographyByKey(props, "p3")};
 `;
+
+export const Space = styled.div<{ size: number; horizontal?: boolean }>`
+  margin: ${(props) =>
+    props.horizontal
+      ? `0px ${props.theme.spaces[props.size]}px `
+      : `${props.theme.spaces[props.size]}px 0px`};
+`;

app/client/src/pages/Editor/gitSync/components/UserGitProfileSettings/index.tsx

@@ -0,0 +1,172 @@
+import React from "react";
+import { Title, Space } from "../StyledComponents";
+import {
+  SELECT_SSH_KEY,
+  createMessage,
+  USER_PROFILE_SETTINGS_TITLE,
+  AUTHOR_NAME,
+  AUTHOR_EMAIL,
+} from "constants/messages";
+import OptionSelector from "../OptionSelector";
+import styled from "styled-components";
+import { getTypographyByKey } from "constants/DefaultTheme";
+import TextInput from "components/ads/TextInput";
+import { AUTH_TYPE, Classes as GitSyncClasses } from "../../constants";
+import { USER_NAME, USER_PASSWORD } from "../../../../../constants/messages";
+import Dropdown from "components/ads/Dropdown";
+import Text, { TextType } from "../../../../../components/ads/Text";
+
+// Mock Data
+const HTTPS_PROFILE_OPTIONS = [{ label: "PROFILE 1" }, { label: "PROFILE 2" }];
+
+const SSH_PROFILE_OPTION = [{ label: "PROFILE 1" }, { label: "PROFILE 2" }];
+
+//
+const LabelContainer = styled.div`
+  ${(props) => getTypographyByKey(props, "h6")};
+  display: flex;
+  align-items: center;
+  margin-bottom: 8px;
+`;
+
+const InputContainer = styled.div`
+  width: 70%;
+  display: flex;
+  align-items: center;
+`;
+
+const TitleWrapper = styled.div`
+  display: flex;
+  flex-direction: row;
+
+  .${GitSyncClasses.OPTION_SELECTOR_WRAPPER} {
+    display: flex;
+    align-items: center;
+    padding-top: 5px;
+  }
+`;
+
+const OptionWrapper = styled.div<{
+  selected: boolean;
+}>`
+  padding: ${(props) => props.theme.spaces[2] + 1}px
+    ${(props) => props.theme.spaces[5]}px;
+  cursor: pointer;
+  display: flex;
+  align-items: center;
+
+  background-color: ${(props) =>
+    props.selected ? props.theme.colors.propertyPane.dropdownSelectBg : null};
+`;
+
+//  Child component
+type AuthConfigProps = {
+  authType: string;
+};
+
+function AuthConfig({ authType }: AuthConfigProps) {
+  switch (authType) {
+    case AUTH_TYPE.SSH:
+      return (
+        <>
+          <LabelContainer>
+            <span className="label">{createMessage(SELECT_SSH_KEY)}</span>
+          </LabelContainer>
+          <InputContainer>
+            <Dropdown
+              disabled={SSH_PROFILE_OPTION.length === 0}
+              onSelect={() => {
+                //
+              }}
+              // optionWidth="100%"
+              options={SSH_PROFILE_OPTION}
+              renderOption={({
+                isSelectedNode,
+                option,
+                optionClickHandler,
+              }) => (
+                <OptionWrapper
+                  onClick={() =>
+                    optionClickHandler && optionClickHandler(option)
+                  }
+                  selected={!!isSelectedNode}
+                >
+                  <Text type={TextType.P1}>{option.label}</Text>
+                </OptionWrapper>
+              )}
+              selected={{}}
+              showLabelOnly
+              width="100%"
+            />
+          </InputContainer>
+        </>
+      );
+    case AUTH_TYPE.HTTPS:
+      return (
+        <>
+          <LabelContainer>
+            <span className="label">{createMessage(USER_NAME)}</span>
+          </LabelContainer>
+          <InputContainer>
+            <TextInput fill />
+          </InputContainer>
+
+          <Space size={7} />
+
+          <LabelContainer>
+            <span className="label">{createMessage(USER_PASSWORD)}</span>
+          </LabelContainer>
+          <InputContainer>
+            <TextInput fill />
+          </InputContainer>
+        </>
+      );
+    default:
+      return null;
+  }
+}
+
+// Component
+type UserGitProfileSettingsProps = {
+  authType: string;
+};
+
+function UserGitProfileSettings({ authType }: UserGitProfileSettingsProps) {
+  return (
+    <>
+      <TitleWrapper>
+        <Title>{createMessage(USER_PROFILE_SETTINGS_TITLE)}</Title>
+        {authType === AUTH_TYPE.HTTPS ? (
+          <OptionSelector
+            options={HTTPS_PROFILE_OPTIONS}
+            selected={HTTPS_PROFILE_OPTIONS[0]}
+          />
+        ) : null}
+      </TitleWrapper>
+
+      <Space size={7} />
+
+      <AuthConfig authType={authType} />
+
+      <Space size={7} />
+
+      <LabelContainer>
+        <span className="label">{createMessage(AUTHOR_NAME)}</span>
+      </LabelContainer>
+      <InputContainer>
+        <TextInput fill />
+      </InputContainer>
+
+      <Space size={7} />
+
+      <LabelContainer>
+        <span className="label">{createMessage(AUTHOR_EMAIL)}</span>
+      </LabelContainer>
+      <InputContainer>
+        <TextInput fill />
+      </InputContainer>
+    </>
+  );
+}
+
+export default UserGitProfileSettings;

app/client/src/pages/Editor/gitSync/constants.ts

@@ -39,10 +39,16 @@ export const MENU_ITEMS: TabProp[] = [
   },
 ];
 
-export const AuthTypeOptions = [
+export enum AUTH_TYPE {
-  { label: "SSH", value: "SSH" },
+  SSH = "SSH",
-  { label: "HTTPS", value: "HTTPS" },
+  HTTPS = "HTTPS",
+}
+
+export const AUTH_TYPE_OPTIONS = [
+  { label: AUTH_TYPE.SSH, value: AUTH_TYPE.SSH },
+  { label: AUTH_TYPE.HTTPS, value: AUTH_TYPE.HTTPS },
 ];
 export const Classes = {
   GIT_SYNC_MODAL: "git-sync-modal",
+  OPTION_SELECTOR_WRAPPER: "option-wrapper",
 };