Protei/PromucFlow_constructor
2
0
Fork 0
Code Issues Pull Requests Actions 2 Packages Projects Releases Wiki Activity

Fix spacing of fields in org settings: fixes (#3612) (#3681)

Browse Source 
* add row colums styling to organisation settings fields

* add tests to make sure the grid layout is rendered

* added margin to make spacing look similar to before

* remove negative margin and reduce width

* added jest tests to make sure component mounts and that it has correct styles

* revert unnecessary changes related to cypress tests

* added strict checking for null to avoid ts errors

* use early returns on file empty

Co-authored-by: Hetu Nandu <hetunandu@gmail.com>

* use early returns on file empty

Co-authored-by: Hetu Nandu <hetunandu@gmail.com>

* fixed typo

* added findbytext for sync call

* removed unused imports

Co-authored-by: Hetu Nandu <hetunandu@gmail.com>
This commit is contained in:
Kaushik Varanasi 2021-04-08 11:20:26 +05:30 committed by GitHub
parent 41e44eed30
commit c37adc0a4d
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
3 changed files with 135 additions and 65 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

12
app/client/src/components/ads/FilePicker.tsx
View File

@ -194,9 +194,10 @@ const FilePickerComponent = (props: FilePickerProps) => {
function onDrop(monitor: DropTargetMonitor) {
if (monitor) {
const files = monitor.getItem().files;
if (files) {
handleFileUpload(files);
if (!files) {
return;
}
handleFileUpload(files);
}
}
@ -221,10 +222,11 @@ const FilePickerComponent = (props: FilePickerProps) => {
const file = files && files[0];
let fileSize = 0;
if (file) {
fileSize = Math.floor(file.size / 1024);
setFileInfo({ name: file.name, size: fileSize });
if (!file) {
return;
}
fileSize = Math.floor(file.size / 1024);
setFileInfo({ name: file.name, size: fileSize });
if (fileSize < 250) {
if (bgRef.current) {

160
app/client/src/pages/organization/General.tsx
View File

@ -24,7 +24,7 @@ import FilePicker, {
import { getIsFetchingApplications } from "selectors/applicationSelectors";
const InputLabelWrapper = styled.div`
width: 200px;
width: 150px;
display: flex;
align-items: center;
`;
@ -54,6 +54,18 @@ const FilePickerLoader = styled.div`
border-radius: 0;
`;
// testing
export const Row = styled.div`
margin: 0;
padding: 0;
display: flex;
`;
export const Col = styled.div`
margin: 0;
padding: 0;
`;
export function GeneralSettings() {
const { orgId } = useParams<{ orgId: string }>();
const dispatch = useDispatch();
@ -121,75 +133,103 @@ export function GeneralSettings() {
return (
<>
<SettingsHeading type={TextType.H2}>General</SettingsHeading>
<SettingsHeading type={TextType.H2}>
<Row>
<Col>General</Col>
</Row>
</SettingsHeading>
<SettingWrapper>
<InputLabelWrapper>
<Text type={TextType.H4}>Organization Name</Text>
</InputLabelWrapper>
{isFetchingApplications && (
<Loader className={Classes.SKELETON}></Loader>
)}
{!isFetchingApplications && (
<TextInput
validator={notEmptyValidator}
placeholder="Organization Name"
onChange={onWorkspaceNameChange}
defaultValue={currentOrg && currentOrg.name}
cypressSelector="t--org-name-input"
></TextInput>
)}
<Row>
<Col>
<InputLabelWrapper>
<Text type={TextType.H4}>Organization Name</Text>
</InputLabelWrapper>
</Col>
<Col>
{isFetchingApplications && (
<Loader className={Classes.SKELETON}></Loader>
)}
{!isFetchingApplications && (
<TextInput
validator={notEmptyValidator}
placeholder="Organization Name"
onChange={onWorkspaceNameChange}
defaultValue={currentOrg && currentOrg.name}
cypressSelector="t--org-name-input"
></TextInput>
)}
</Col>
</Row>
</SettingWrapper>
<SettingWrapper>
<InputLabelWrapper>
<Text type={TextType.H4}>Upload Logo</Text>
</InputLabelWrapper>
{isFetchingOrg && (
<FilePickerLoader className={Classes.SKELETON}></FilePickerLoader>
)}
{!isFetchingOrg && (
<FilePicker
url={currentOrg && currentOrg.logoUrl}
fileUploader={FileUploader}
onFileRemoved={DeleteLogo}
logoUploadError={logoUploadError.message}
/>
)}
<Row className="t--organization-settings-filepicker">
<Col>
<InputLabelWrapper>
<Text type={TextType.H4}>Upload Logo</Text>
</InputLabelWrapper>
</Col>
<Col>
{isFetchingOrg && (
<FilePickerLoader className={Classes.SKELETON}></FilePickerLoader>
)}
{!isFetchingOrg && (
<FilePicker
url={currentOrg && currentOrg.logoUrl}
fileUploader={FileUploader}
onFileRemoved={DeleteLogo}
logoUploadError={logoUploadError.message}
/>
)}
</Col>
</Row>
</SettingWrapper>
<SettingWrapper>
<InputLabelWrapper>
<Text type={TextType.H4}>Website</Text>
</InputLabelWrapper>
{isFetchingApplications && (
<Loader className={Classes.SKELETON}></Loader>
)}
{!isFetchingApplications && (
<TextInput
placeholder="Your website"
onChange={onWebsiteChange}
defaultValue={(currentOrg && currentOrg.website) || ""}
cypressSelector="t--org-website-input"
></TextInput>
)}
<Row>
<Col>
<InputLabelWrapper>
<Text type={TextType.H4}>Website</Text>
</InputLabelWrapper>
</Col>
<Col>
{isFetchingApplications && (
<Loader className={Classes.SKELETON}></Loader>
)}
{!isFetchingApplications && (
<TextInput
placeholder="Your website"
onChange={onWebsiteChange}
defaultValue={(currentOrg && currentOrg.website) || ""}
cypressSelector="t--org-website-input"
></TextInput>
)}
</Col>
</Row>
</SettingWrapper>
<SettingWrapper>
<InputLabelWrapper>
<Text type={TextType.H4}>Email</Text>
</InputLabelWrapper>
{isFetchingApplications && (
<Loader className={Classes.SKELETON}></Loader>
)}
{!isFetchingApplications && (
<TextInput
validator={emailValidator}
placeholder="Email"
onChange={onEmailChange}
defaultValue={(currentOrg && currentOrg.email) || ""}
cypressSelector="t--org-email-input"
></TextInput>
)}
<Row>
<Col>
<InputLabelWrapper>
<Text type={TextType.H4}>Email</Text>
</InputLabelWrapper>
</Col>
<Col>
{isFetchingApplications && (
<Loader className={Classes.SKELETON}></Loader>
)}
{!isFetchingApplications && (
<TextInput
validator={emailValidator}
placeholder="Email"
onChange={onEmailChange}
defaultValue={(currentOrg && currentOrg.email) || ""}
cypressSelector="t--org-email-input"
></TextInput>
)}
</Col>
</Row>
</SettingWrapper>
</>
);

28
app/client/src/pages/organization/__tests__/OrganizationSettingsForm.test.tsx Normal file
View File

@ -0,0 +1,28 @@
import React from "react";
import { unmountComponentAtNode } from "react-dom";
import { render } from "test/testUtils";
import "@testing-library/jest-dom";
import { GeneralSettings } from "../General";
let container: any = null;
describe("Application Settings", () => {
beforeEach(async () => {
// setup a DOM element as a render target
container = document.createElement("div");
document.body.appendChild(container);
});
it("checks that organization settings have correct styling", async (done) => {
const { findByText } = render(<GeneralSettings />);
const orgNameField = await findByText("Organization Name");
expect(orgNameField.closest("div")).toHaveStyle({ width: "150px;" });
await done();
});
afterEach(() => {
// cleanup on exiting
unmountComponentAtNode(container);
container.remove();
container = null;
});
});