Skip to content

Commit ab3fdd4

Browse files
author
Rishabh Rathod
authored
Add User Profile Section (#6705)
- Replace AuthTypeSelector with OptionSelector for general use. - Fix Scroll issue in GitSyncModal
1 parent 9677a4f commit ab3fdd4

File tree

8 files changed

+242
-17
lines changed

8 files changed

+242
-17
lines changed

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

Lines changed: 4 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -9,6 +9,8 @@ import SearchComponent from "components/designSystems/appsmith/SearchComponent";
99
import { Colors } from "constants/Colors";
1010
import Spinner from "./Spinner";
1111

12+
export type DropdownOnSelect = (value?: string, dropdownOption?: any) => void;
13+
1214
export type DropdownOption = {
1315
label?: string;
1416
value?: string;
@@ -19,7 +21,7 @@ export type DropdownOption = {
1921
subText?: string;
2022
iconSize?: IconSize;
2123
iconColor?: string;
22-
onSelect?: (value?: string, dropdownOption?: any) => void;
24+
onSelect?: DropdownOnSelect;
2325
data?: any;
2426
};
2527
export interface DropdownSearchProps {
@@ -48,7 +50,7 @@ export type DropdownProps = CommonComponentProps &
4850
DropdownSearchProps & {
4951
options: DropdownOption[];
5052
selected: DropdownOption;
51-
onSelect?: (value?: string, dropdownOption?: any) => void;
53+
onSelect?: DropdownOnSelect;
5254
width?: string;
5355
height?: string;
5456
showLabelOnly?: boolean;

‎app/client/src/constants/messages.ts‎

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -429,3 +429,11 @@ export const CONNECT_TO_GIT = () => "Connect to Git";
429429
export const CONNECT_TO_GIT_SUBTITLE = () =>
430430
"Choose an existing empty repository to host your project and keep it in sync";
431431
export const REMOTE_URL_VIA = () => "REMOTE URL VIA";
432+
433+
export const USER_PROFILE_SETTINGS_TITLE = () => "User Settings";
434+
435+
export const AUTHOR_NAME = () => "AUTHOR NAME";
436+
export const AUTHOR_EMAIL = () => "AUTHOR EMAIL";
437+
export const SELECT_SSH_KEY = () => "SELECT SSH KEY";
438+
export const USER_NAME = () => "USER NAME";
439+
export const USER_PASSWORD = () => "PASSWORD";

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

Lines changed: 24 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -1,17 +1,21 @@
1-
import React from "react";
2-
import { Subtitle, Title } from "./components/StyledComponents";
1+
import React, { useState } from "react";
2+
import { Subtitle, Title, Space } from "./components/StyledComponents";
33
import {
44
CONNECT_TO_GIT,
55
CONNECT_TO_GIT_SUBTITLE,
66
REMOTE_URL_VIA,
77
createMessage,
88
} from "constants/messages";
9-
import AuthTypeDropdown from "./components/AuthTypeDropdown";
9+
import OptionSelector from "./components/OptionSelector";
1010
import styled from "styled-components";
1111
import { getTypographyByKey } from "constants/DefaultTheme";
1212
import TextInput from "components/ads/TextInput";
1313
import { ReactComponent as CheckIcon } from "assets/icons/ads/check.svg";
1414
import { ReactComponent as LinkIcon } from "assets/icons/ads/link_2.svg";
15+
import UserGitProfileSettings from "./components/UserGitProfileSettings";
16+
import { DropdownOption } from "components/ads/Dropdown";
17+
import { AUTH_TYPE_OPTIONS } from "./constants";
18+
import { DropdownOnSelect } from "../../../components/ads/Dropdown";
1519

1620
const UrlOptionContainer = styled.div`
1721
${(props) => getTypographyByKey(props, "h6")};
@@ -37,14 +41,26 @@ const UrlContainer = styled.div`
3741
align-items: center;
3842
`;
3943

40-
function GitConection() {
44+
function GitConnection() {
45+
const [selectedAuthType, setSelectedAuthType] = useState<DropdownOption>(
46+
AUTH_TYPE_OPTIONS[0],
47+
);
48+
49+
const onSelectAuthType: DropdownOnSelect = (value, dropdownOption) => {
50+
setSelectedAuthType(dropdownOption);
51+
};
52+
4153
return (
4254
<>
4355
<Title>{createMessage(CONNECT_TO_GIT)}</Title>
4456
<Subtitle>{createMessage(CONNECT_TO_GIT_SUBTITLE)}</Subtitle>
4557
<UrlOptionContainer>
4658
<span className="label">{`${createMessage(REMOTE_URL_VIA)} `}</span>
47-
<AuthTypeDropdown />
59+
<OptionSelector
60+
onSelect={onSelectAuthType}
61+
options={AUTH_TYPE_OPTIONS}
62+
selected={selectedAuthType}
63+
/>
4864
</UrlOptionContainer>
4965
<UrlContainer>
5066
<TextInput
@@ -57,8 +73,10 @@ function GitConection() {
5773
/>
5874
<LinkIcon />
5975
</UrlContainer>
76+
<Space size={12} />
77+
<UserGitProfileSettings authType={selectedAuthType.label || ""} />
6078
</>
6179
);
6280
}
6381

64-
export default GitConection;
82+
export default GitConnection;

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

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -17,12 +17,16 @@ const Container = styled.div`
1717
width: 100%;
1818
display: flex;
1919
position: relative;
20+
overflow-y: hidden;
2021
`;
2122

2223
const BodyContainer = styled.div`
2324
flex: 3;
2425
padding-left: ${(props) => props.theme.spaces[12]}px;
2526
padding-top: ${(props) => props.theme.spaces[13]}px;
27+
padding-bottom: ${(props) => props.theme.spaces[13]}px;
28+
overflow-y: auto;
29+
height: 100%;
2630
`;
2731

2832
const MenuContainer = styled.div`

app/client/src/pages/Editor/gitSync/components/AuthTypeDropdown.tsx renamed to app/client/src/pages/Editor/gitSync/components/OptionSelector.tsx

Lines changed: 14 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -7,7 +7,8 @@ import Dropdown, {
77
import { ReactComponent as ChevronDown } from "assets/icons/ads/chevron-down.svg";
88
import { Colors } from "constants/Colors";
99
import styled from "styled-components";
10-
import { AuthTypeOptions } from "../constants";
10+
import { DropdownOption } from "components/ads/Dropdown";
11+
import { Classes as GitSyncClasses } from "pages/Editor/gitSync/constants";
1112

1213
const SelectedValueNodeContainer = styled.div`
1314
color: ${Colors.CRUSTA};
@@ -37,20 +38,27 @@ const DropdownContainer = styled.div`
3738
}
3839
`;
3940

40-
function SelectAuthType() {
41+
type OptionSelectorProps = {
42+
options: DropdownOption[];
43+
selected: DropdownOption;
44+
onSelect?: (value?: string, dropdownOption?: any) => void;
45+
};
46+
47+
function OptionSelector({ onSelect, options, selected }: OptionSelectorProps) {
4148
return (
42-
<DropdownContainer>
49+
<DropdownContainer className={GitSyncClasses.OPTION_SELECTOR_WRAPPER}>
4350
<Dropdown
4451
SelectedValueNode={SelectedValueNode}
4552
bgColor={"transparent"}
4653
className="auth-type-dropdown"
47-
options={AuthTypeOptions}
48-
selected={AuthTypeOptions[0]}
54+
onSelect={onSelect}
55+
options={options}
56+
selected={selected}
4957
showDropIcon={false}
5058
showLabelOnly
5159
/>
5260
</DropdownContainer>
5361
);
5462
}
5563

56-
export default SelectAuthType;
64+
export default OptionSelector;

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

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -8,3 +8,10 @@ export const Title = styled.h1`
88
export const Subtitle = styled.p`
99
${(props) => getTypographyByKey(props, "p3")};
1010
`;
11+
12+
export const Space = styled.div<{ size: number; horizontal?: boolean }>`
13+
margin: ${(props) =>
14+
props.horizontal
15+
? `0px ${props.theme.spaces[props.size]}px `
16+
: `${props.theme.spaces[props.size]}px 0px`};
17+
`;

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

Lines changed: 172 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,172 @@
1+
import React from "react";
2+
import { Title, Space } from "../StyledComponents";
3+
import {
4+
SELECT_SSH_KEY,
5+
createMessage,
6+
USER_PROFILE_SETTINGS_TITLE,
7+
AUTHOR_NAME,
8+
AUTHOR_EMAIL,
9+
} from "constants/messages";
10+
import OptionSelector from "../OptionSelector";
11+
import styled from "styled-components";
12+
import { getTypographyByKey } from "constants/DefaultTheme";
13+
import TextInput from "components/ads/TextInput";
14+
import { AUTH_TYPE, Classes as GitSyncClasses } from "../../constants";
15+
import { USER_NAME, USER_PASSWORD } from "../../../../../constants/messages";
16+
import Dropdown from "components/ads/Dropdown";
17+
import Text, { TextType } from "../../../../../components/ads/Text";
18+
19+
// Mock Data
20+
const HTTPS_PROFILE_OPTIONS = [{ label: "PROFILE 1" }, { label: "PROFILE 2" }];
21+
22+
const SSH_PROFILE_OPTION = [{ label: "PROFILE 1" }, { label: "PROFILE 2" }];
23+
24+
//
25+
const LabelContainer = styled.div`
26+
${(props) => getTypographyByKey(props, "h6")};
27+
display: flex;
28+
align-items: center;
29+
margin-bottom: 8px;
30+
`;
31+
32+
const InputContainer = styled.div`
33+
width: 70%;
34+
display: flex;
35+
align-items: center;
36+
`;
37+
38+
const TitleWrapper = styled.div`
39+
display: flex;
40+
flex-direction: row;
41+
42+
.${GitSyncClasses.OPTION_SELECTOR_WRAPPER} {
43+
display: flex;
44+
align-items: center;
45+
padding-top: 5px;
46+
}
47+
`;
48+
49+
const OptionWrapper = styled.div<{
50+
selected: boolean;
51+
}>`
52+
padding: ${(props) => props.theme.spaces[2] + 1}px
53+
${(props) => props.theme.spaces[5]}px;
54+
cursor: pointer;
55+
display: flex;
56+
align-items: center;
57+
58+
background-color: ${(props) =>
59+
props.selected ? props.theme.colors.propertyPane.dropdownSelectBg : null};
60+
`;
61+
62+
// Child component
63+
type AuthConfigProps = {
64+
authType: string;
65+
};
66+
67+
function AuthConfig({ authType }: AuthConfigProps) {
68+
switch (authType) {
69+
case AUTH_TYPE.SSH:
70+
return (
71+
<>
72+
<LabelContainer>
73+
<span className="label">{createMessage(SELECT_SSH_KEY)}</span>
74+
</LabelContainer>
75+
<InputContainer>
76+
<Dropdown
77+
disabled={SSH_PROFILE_OPTION.length === 0}
78+
onSelect={() => {
79+
//
80+
}}
81+
// optionWidth="100%"
82+
options={SSH_PROFILE_OPTION}
83+
renderOption={({
84+
isSelectedNode,
85+
option,
86+
optionClickHandler,
87+
}) => (
88+
<OptionWrapper
89+
onClick={() =>
90+
optionClickHandler && optionClickHandler(option)
91+
}
92+
selected={!!isSelectedNode}
93+
>
94+
<Text type={TextType.P1}>{option.label}</Text>
95+
</OptionWrapper>
96+
)}
97+
selected={{}}
98+
showLabelOnly
99+
width="100%"
100+
/>
101+
</InputContainer>
102+
</>
103+
);
104+
case AUTH_TYPE.HTTPS:
105+
return (
106+
<>
107+
<LabelContainer>
108+
<span className="label">{createMessage(USER_NAME)}</span>
109+
</LabelContainer>
110+
<InputContainer>
111+
<TextInput fill />
112+
</InputContainer>
113+
114+
<Space size={7} />
115+
116+
<LabelContainer>
117+
<span className="label">{createMessage(USER_PASSWORD)}</span>
118+
</LabelContainer>
119+
<InputContainer>
120+
<TextInput fill />
121+
</InputContainer>
122+
</>
123+
);
124+
default:
125+
return null;
126+
}
127+
}
128+
129+
// Component
130+
type UserGitProfileSettingsProps = {
131+
authType: string;
132+
};
133+
134+
function UserGitProfileSettings({ authType }: UserGitProfileSettingsProps) {
135+
return (
136+
<>
137+
<TitleWrapper>
138+
<Title>{createMessage(USER_PROFILE_SETTINGS_TITLE)}</Title>
139+
{authType === AUTH_TYPE.HTTPS ? (
140+
<OptionSelector
141+
options={HTTPS_PROFILE_OPTIONS}
142+
selected={HTTPS_PROFILE_OPTIONS[0]}
143+
/>
144+
) : null}
145+
</TitleWrapper>
146+
147+
<Space size={7} />
148+
149+
<AuthConfig authType={authType} />
150+
151+
<Space size={7} />
152+
153+
<LabelContainer>
154+
<span className="label">{createMessage(AUTHOR_NAME)}</span>
155+
</LabelContainer>
156+
<InputContainer>
157+
<TextInput fill />
158+
</InputContainer>
159+
160+
<Space size={7} />
161+
162+
<LabelContainer>
163+
<span className="label">{createMessage(AUTHOR_EMAIL)}</span>
164+
</LabelContainer>
165+
<InputContainer>
166+
<TextInput fill />
167+
</InputContainer>
168+
</>
169+
);
170+
}
171+
172+
export default UserGitProfileSettings;

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

Lines changed: 9 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -39,10 +39,16 @@ export const MENU_ITEMS: TabProp[] = [
3939
},
4040
];
4141

42-
export const AuthTypeOptions = [
43-
{ label: "SSH", value: "SSH" },
44-
{ label: "HTTPS", value: "HTTPS" },
42+
export enum AUTH_TYPE {
43+
SSH = "SSH",
44+
HTTPS = "HTTPS",
45+
}
46+
47+
export const AUTH_TYPE_OPTIONS = [
48+
{ label: AUTH_TYPE.SSH, value: AUTH_TYPE.SSH },
49+
{ label: AUTH_TYPE.HTTPS, value: AUTH_TYPE.HTTPS },
4550
];
4651
export const Classes = {
4752
GIT_SYNC_MODAL: "git-sync-modal",
53+
OPTION_SELECTOR_WRAPPER: "option-wrapper",
4854
};

0 commit comments

Comments
 (0)