Skip to content

Don't show Bucket Name input error until field is touched #2316

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 3 commits into from
Sep 16, 2022
Merged

Don't show Bucket Name input error until field is touched #2316

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
71e6986
Don't show Bucket Name input error until field is touched
kaankabalak Sep 15, 2022
10a31e1
Reset isDirty when user exits page and fix Create button behavior
kaankabalak Sep 16, 2022
de2a0bf
Merge branch 'master' into add-bucket-error
bexsoft Sep 16, 2022
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
16 changes: 13 additions & 3 deletions portal-ui/src/screens/Console/Buckets/ListBuckets/AddBucket/AddBucket.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -45,6 +45,8 @@ import { selDistSet, selSiteRep } from "../../../../../systemSlice";
import {
resetForm,
setEnableObjectLocking,
setIsDirty,
setName,
setQuota,
setQuotaSize,
setQuotaUnit,
Expand Down Expand Up @@ -119,6 +121,7 @@ const AddBucket = ({ classes }: IsetProps) => {
"^((25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)(.|$)){4}$"
);
const bucketName = useSelector((state: AppState) => state.addBucket.name);
const isDirty = useSelector((state: AppState) => state.addBucket.isDirty);
const [validationResult, setValidationResult] = useState<boolean[]>([]);
const errorList = validationResult.filter((v) => !v);
const hasErrors = errorList.length > 0;
Expand Down Expand Up @@ -166,7 +169,7 @@ const AddBucket = ({ classes }: IsetProps) => {

useEffect(() => {
const bucketNameErrors = [
!(bucketName.length < 3 || bucketName.length > 63),
!(isDirty && (bucketName.length < 3 || bucketName.length > 63)),
validBucketCharacters.test(bucketName),
!(
bucketName.includes(".-") ||
Expand All @@ -180,9 +183,11 @@ const AddBucket = ({ classes }: IsetProps) => {
];
setValidationResult(bucketNameErrors);
// eslint-disable-next-line react-hooks/exhaustive-deps
}, [bucketName]);
}, [bucketName, isDirty]);

useEffect(() => {
dispatch(setName(""));
dispatch(setIsDirty(false));
const fetchRecords = () => {
api
.invoke("GET", `/api/v1/buckets`)
Expand Down Expand Up @@ -475,7 +480,12 @@ const AddBucket = ({ classes }: IsetProps) => {
type="submit"
variant="callAction"
color="primary"
disabled={addLoading || invalidFields.length > 0 || hasErrors}
disabled={
addLoading ||
invalidFields.length > 0 ||
!isDirty ||
hasErrors
}
label={"Create Bucket"}
/>
</Grid>
Expand Down
8 changes: 5 additions & 3 deletions portal-ui/src/screens/Console/Buckets/ListBuckets/AddBucket/AddBucketName.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -15,7 +15,7 @@
// along with this program. If not, see <http://www.gnu.org/licenses/>.

import React from "react";
import { setName } from "./addBucketsSlice";
import { setName, setIsDirty } from "./addBucketsSlice";
import InputBoxWrapper from "../../../Common/FormComponents/InputBoxWrapper/InputBoxWrapper";
import { useSelector } from "react-redux";
import { AppState, useAppDispatch } from "../../../../../store";
Expand All @@ -28,8 +28,10 @@ const AddBucketName = ({ hasErrors }: { hasErrors: boolean }) => {
<InputBoxWrapper
id="bucket-name"
name="bucket-name"
error={hasErrors ? "Invalid bucket Name" : ""}
autoFocus={true}
error={hasErrors ? "Invalid bucket name" : ""}
onFocus={() => {
dispatch(setIsDirty(true));
}}
onChange={(event: React.ChangeEvent<HTMLInputElement>) => {
dispatch(setName(event.target.value));
}}
Expand Down
8 changes: 7 additions & 1 deletion portal-ui/src/screens/Console/Buckets/ListBuckets/AddBucket/addBucketsSlice.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -19,6 +19,7 @@ import { addBucketAsync } from "./addBucketThunks";

export interface AddBucketState {
loading: boolean;
isDirty: boolean;
invalidFields: string[];
name: string;
versioningEnabled: boolean;
Expand All @@ -36,7 +37,8 @@ export interface AddBucketState {

const initialState: AddBucketState = {
loading: false,
invalidFields: ["name"],
isDirty: false,
invalidFields: [],
name: "",
versioningEnabled: false,
lockingEnabled: false,
Expand All @@ -55,6 +57,9 @@ export const addBucketsSlice = createSlice({
name: "addBuckets",
initialState,
reducers: {
setIsDirty: (state, action: PayloadAction<boolean>) => {
state.isDirty = action.payload;
},
setName: (state, action: PayloadAction<string>) => {
state.name = action.payload;

Expand Down Expand Up @@ -177,6 +182,7 @@ export const addBucketsSlice = createSlice({

export const {
setName,
setIsDirty,
setVersioning,
setEnableObjectLocking,
setQuota,
Expand Down
3 changes: 3 additions & 0 deletions portal-ui/src/screens/Console/Common/FormComponents/InputBoxWrapper/InputBoxWrapper.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -41,6 +41,7 @@ interface InputBoxProps {
classes: any;
onChange: (e: React.ChangeEvent<HTMLInputElement>) => void;
onKeyPress?: (e: any) => void;
onFocus?: () => void;
value: string | boolean;
id: string;
name: string;
Expand Down Expand Up @@ -133,6 +134,7 @@ const InputBoxWrapper = ({
classes,
className = "",
onKeyPress,
onFocus,
}: InputBoxProps) => {
let inputProps: any = { "data-index": index, ...extraInputProps };

Expand Down Expand Up @@ -198,6 +200,7 @@ const InputBoxWrapper = ({
placeholder={placeholder}
className={classes.inputRebase}
onKeyPress={onKeyPress}
onFocus={onFocus}
/>
{overlayIcon && (
<div
Expand Down