Skip to content

Commit 4dd60cc

Browse files
microbit-matt-hillsdonmicrobit-matt-hillsdon
authored
Relax create file lowercase validation check (#1031)
Allow lowercase names as it's just a PEP8 check. Some rearrangement to keep the message in an "ok" case. Also fixes issue where the create button is enabled for a blank name until you first type (no harm came from this). See #1026
1 parent 7562853 commit 4dd60cc

File tree

7 files changed

+129
-68
lines changed

7 files changed

+129
-68
lines changed

‎src/common/InputDialog.tsx‎

Lines changed: 16 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -17,12 +17,17 @@ import { ThemeTypings } from "@chakra-ui/styled-system";
1717
import { ReactNode, useCallback, useRef, useState } from "react";
1818
import { FormattedMessage } from "react-intl";
1919

20+
export interface InputValidationResult {
21+
ok: boolean;
22+
message?: string;
23+
}
24+
2025
export interface InputDialogBody<T> {
2126
value: T;
2227
setValue: (value: T) => void;
23-
error: string | undefined;
24-
setError: (error: string | undefined) => void;
25-
validate: (value: T) => string | undefined;
28+
validationResult: InputValidationResult;
29+
setValidationResult: (value: InputValidationResult) => void;
30+
validate: (value: T) => InputValidationResult;
2631
}
2732

2833
type ValueOrCancelled<T> = T | undefined;
@@ -33,13 +38,13 @@ export interface InputDialogProps<T> {
3338
initialValue: T;
3439
actionLabel: string;
3540
size?: ThemeTypings["components"]["Modal"]["sizes"];
36-
validate?: (input: T) => string | undefined;
41+
validate?: (input: T) => InputValidationResult;
3742
customFocus?: boolean;
3843
finalFocusRef?: React.RefObject<HTMLButtonElement>;
3944
callback: (value: ValueOrCancelled<T>) => void;
4045
}
4146

42-
const noValidation = () => undefined;
47+
const noValidation = () => ({ ok: true });
4348

4449
/**
4550
* General purpose input dialog.
@@ -56,12 +61,13 @@ export const InputDialog = <T,>({
5661
callback,
5762
}: InputDialogProps<T>) => {
5863
const [value, setValue] = useState(initialValue);
59-
const [error, setError] = useState<string | undefined>(undefined);
64+
const [validationResult, setValidationResult] =
65+
useState<InputValidationResult>(validate(initialValue));
6066
const leastDestructiveRef = useRef<HTMLButtonElement>(null);
6167
const onCancel = useCallback(() => callback(undefined), [callback]);
6268
const handleSubmit = (e: React.FormEvent) => {
6369
e.preventDefault();
64-
if (!error) {
70+
if (validationResult.ok) {
6571
callback(value);
6672
}
6773
};
@@ -87,8 +93,8 @@ export const InputDialog = <T,>({
8793
<Body
8894
value={value}
8995
setValue={setValue}
90-
error={error}
91-
setError={setError}
96+
validationResult={validationResult}
97+
setValidationResult={setValidationResult}
9298
validate={validate}
9399
/>
94100
</Box>
@@ -102,7 +108,7 @@ export const InputDialog = <T,>({
102108
variant="solid"
103109
onClick={handleSubmit}
104110
ml={3}
105-
isDisabled={Boolean(error)}
111+
isDisabled={!validationResult.ok}
106112
>
107113
{actionLabel}
108114
</Button>

‎src/project/ChooseMainScriptQuestion.test.tsx‎

Lines changed: 7 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -11,6 +11,7 @@ import ChooseMainScriptQuestion, {
1111
import { MainScriptChoice } from "./project-actions";
1212
import { stubIntl as intl } from "../messages/testing";
1313
import FixedTranslationProvider from "../messages/FixedTranslationProvider";
14+
import { InputValidationResult } from "../common/InputDialog";
1415

1516
describe("ChooseMainScriptQuestion", () => {
1617
const data = () => Promise.resolve(new Uint8Array([0]));
@@ -19,13 +20,13 @@ describe("ChooseMainScriptQuestion", () => {
1920
const setValue = jest.fn() as jest.MockedFunction<
2021
(x: MainScriptChoice | undefined) => void
2122
>;
22-
const setError = jest.fn() as jest.MockedFunction<
23-
(x: string | undefined) => void
23+
const setValidationResult = jest.fn() as jest.MockedFunction<
24+
(x: InputValidationResult) => void
2425
>;
2526
const currentFiles = new Set(["main.py", "magic.py"]);
2627

2728
afterEach(() => {
28-
setError.mockClear();
29+
setValidationResult.mockClear();
2930
setValue.mockClear();
3031
});
3132

@@ -36,13 +37,13 @@ describe("ChooseMainScriptQuestion", () => {
3637
return render(
3738
<FixedTranslationProvider>
3839
<ChooseMainScriptQuestion
39-
error={undefined}
40-
setError={setError}
40+
validationResult={{ ok: true }}
41+
setValidationResult={setValidationResult}
4142
setValue={setValue}
4243
currentFiles={currentFiles}
4344
value={{ main: choice }}
4445
inputs={inputs}
45-
validate={() => undefined}
46+
validate={() => ({ ok: true })}
4647
/>
4748
</FixedTranslationProvider>
4849
);

‎src/project/NewFileNameQuestion.tsx‎

Lines changed: 22 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -10,16 +10,17 @@ import {
1010
FormLabel,
1111
} from "@chakra-ui/form-control";
1212
import { Input } from "@chakra-ui/input";
13+
import { Text } from "@chakra-ui/react";
1314
import { ReactNode, useEffect, useRef } from "react";
1415
import { FormattedMessage } from "react-intl";
1516
import { InputDialogBody } from "../common/InputDialog";
1617

1718
interface NewFileNameQuestionProps extends InputDialogBody<string> {}
1819

1920
const NewFileNameQuestion = ({
20-
error,
21+
validationResult,
2122
value,
22-
setError,
23+
setValidationResult,
2324
setValue,
2425
validate,
2526
}: NewFileNameQuestionProps) => {
@@ -30,7 +31,7 @@ const NewFileNameQuestion = ({
3031
}
3132
}, []);
3233
return (
33-
<FormControl id="fileName" isRequired isInvalid={Boolean(error)}>
34+
<FormControl id="fileName" isRequired isInvalid={!validationResult.ok}>
3435
<FormLabel>
3536
<FormattedMessage id="name-text" />
3637
</FormLabel>
@@ -41,7 +42,7 @@ const NewFileNameQuestion = ({
4142
onChange={(e) => {
4243
const value = e.target.value;
4344
setValue(value);
44-
setError(validate(value));
45+
setValidationResult(validate(value));
4546
}}
4647
autoComplete="off"
4748
autoCorrect="off"
@@ -56,7 +57,23 @@ const NewFileNameQuestion = ({
5657
}}
5758
/>
5859
</FormHelperText>
59-
<FormErrorMessage>{error}</FormErrorMessage>
60+
{validationResult.message && !validationResult.ok && (
61+
<FormErrorMessage>{validationResult.message}</FormErrorMessage>
62+
)}
63+
{validationResult.message && validationResult.ok && (
64+
// FormErrorMessage does not display when the field is valid so we need
65+
// an equivalent for warning feedback.
66+
<Text
67+
id="fileName-feedback"
68+
aria-live="polite"
69+
fontSize="sm"
70+
color="red.500"
71+
lineHeight="normal"
72+
mt={2}
73+
>
74+
{validationResult.message}
75+
</Text>
76+
)}
6077
</FormControl>
6178
);
6279
};

‎src/project/ProjectNameQuestion.tsx‎

Lines changed: 5 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -17,9 +17,9 @@ import { InputDialogBody } from "../common/InputDialog";
1717
interface ProjectNameQuestionProps extends InputDialogBody<string> {}
1818

1919
const ProjectNameQuestion = ({
20-
error,
20+
validationResult,
2121
value,
22-
setError,
22+
setValidationResult,
2323
setValue,
2424
validate,
2525
}: ProjectNameQuestionProps) => {
@@ -31,7 +31,7 @@ const ProjectNameQuestion = ({
3131
}
3232
}, []);
3333
return (
34-
<FormControl id="fileName" isRequired isInvalid={Boolean(error)}>
34+
<FormControl id="fileName" isRequired isInvalid={!validationResult.ok}>
3535
<FormLabel>
3636
<FormattedMessage id="name-text" />
3737
</FormLabel>
@@ -42,15 +42,13 @@ const ProjectNameQuestion = ({
4242
onChange={(e) => {
4343
const value = e.target.value;
4444
setValue(value);
45-
setError(validate(value));
45+
setValidationResult(validate(value));
4646
}}
4747
></Input>
4848
<FormHelperText color="gray.700">
4949
<FormattedMessage id="name-used-when" />
5050
</FormHelperText>
51-
<FormErrorMessage>
52-
<FormattedMessage id={error} />
53-
</FormErrorMessage>
51+
<FormErrorMessage>{validationResult.message}</FormErrorMessage>
5452
</FormControl>
5553
);
5654
};

‎src/project/project-actions.tsx‎

Lines changed: 7 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -755,8 +755,13 @@ export class ProjectActions {
755755
finalFocusRef={finalFocusRef}
756756
validate={(name: string) =>
757757
name.trim().length === 0
758-
? this.intl.formatMessage({ id: "project-name-not-empty" })
759-
: undefined
758+
? {
759+
ok: false,
760+
message: this.intl.formatMessage({
761+
id: "project-name-not-empty",
762+
}),
763+
}
764+
: { ok: true }
760765
}
761766
/>
762767
));

‎src/project/project-utils.test.ts‎

Lines changed: 33 additions & 22 deletions
Original file line numberDiff line numberDiff line change
@@ -12,47 +12,58 @@ describe("validateNewFilename", () => {
1212
const exists = (filename: string) => filename === "main.py";
1313

1414
it("requires non-empty name", () => {
15-
expect(validateNewFilename("", exists, intl)).toEqual(
16-
"file-name-not-empty"
17-
);
15+
expect(validateNewFilename("", exists, intl)).toEqual({
16+
ok: false,
17+
message: "file-name-not-empty",
18+
});
1819
});
1920
it("length", () => {
20-
expect(validateNewFilename("a".repeat(121), exists, intl)).toEqual(
21-
"file-name-length"
22-
);
23-
expect(validateNewFilename("a".repeat(120), exists, intl)).toBeUndefined();
21+
expect(validateNewFilename("a".repeat(121), exists, intl)).toEqual({
22+
ok: false,
23+
message: "file-name-length",
24+
});
25+
expect(validateNewFilename("a".repeat(120), exists, intl)).toEqual({
26+
ok: true,
27+
});
2428
});
2529
it("no error for Python extensions", () => {
26-
expect(validateNewFilename("foo.py", exists, intl)).toBeUndefined();
30+
expect(validateNewFilename("foo.py", exists, intl)).toEqual({ ok: true });
2731
});
2832
it("errors for spaces", () => {
2933
expect(validateNewFilename("spaces are not allowed", exists, intl)).toEqual(
30-
"file-name-whitespace"
34+
{
35+
ok: false,
36+
message: "file-name-whitespace",
37+
}
3138
);
3239
});
3340
it("errors for other invalid chars", () => {
34-
expect(validateNewFilename("wow!64", exists, intl)).toEqual(
35-
"file-name-invalid-character"
36-
);
41+
expect(validateNewFilename("wow!64", exists, intl)).toEqual({
42+
ok: false,
43+
message: "file-name-invalid-character",
44+
});
3745
});
3846
it("errors for leading number", () => {
39-
expect(validateNewFilename("99greenbottles", exists, intl)).toEqual(
40-
"file-name-start-number"
41-
);
47+
expect(validateNewFilename("99greenbottles", exists, intl)).toEqual({
48+
ok: false,
49+
message: "file-name-start-number",
50+
});
4251
});
4352
it("errors for uppercase", () => {
44-
expect(validateNewFilename("OHNO", exists, intl)).toEqual(
45-
"file-name-lowercase-only"
46-
);
53+
expect(validateNewFilename("OHNO", exists, intl)).toEqual({
54+
ok: true,
55+
message: "file-name-lowercase-only",
56+
});
4757
});
4858
it("errors for file clashes", () => {
49-
expect(validateNewFilename("main", exists, intl)).toEqual(
50-
"file-already-exists"
51-
);
59+
expect(validateNewFilename("main", exists, intl)).toEqual({
60+
ok: false,
61+
message: "file-already-exists",
62+
});
5263
});
5364
it("accepts valid names", () => {
5465
expect(
5566
validateNewFilename("underscores_are_allowed", exists, intl)
56-
).toBeUndefined();
67+
).toEqual({ ok: true });
5768
});
5869
});

0 commit comments

Comments
 (0)