Skip to content
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

Jump to bottom

UI update: regex checking for Project Name/Tag inputs in edit metadata modal #319

Merged
merged 16 commits into from
Jun 26, 2024
Merged

UI update: regex checking for Project Name/Tag inputs in edit metadata modal #319

Show file tree
Hide file tree
Changes from 11 commits
Commits
Show all changes
16 commits
Select commit Hold shift + click to select a range
3980978
Merge pull request #296 from pepkit/dev
khoroshevskyi Feb 9, 2024
7a6a64c
Merge pull request #299 from pepkit/dev
nleroy917 Feb 22, 2024
367ae24
Merge pull request #302 from pepkit/dev
khoroshevskyi Feb 26, 2024
ea0fc47
added regex checking (alphanumeric, _, -) for updating project name a…
sanghoonio Jun 17, 2024
0acf9b2
added check project name and tag on paste
sanghoonio Jun 17, 2024
cfb32cd
switch to useEffect()
sanghoonio Jun 18, 2024
ac4a07f
add case for when name or tag are empty
sanghoonio Jun 18, 2024
1fbfb82
removed useEffect() and set variable instead. updated regex check in …
sanghoonio Jun 20, 2024
ad1521a
remove unused import
nleroy917 Jun 21, 2024
91bef9c
remove some unused imports
nleroy917 Jun 21, 2024
6c8fcee
use react-hook-form for edit-project-meta components. update text-sec…
sanghoonio Jun 24, 2024
23b0791
added name and tag error messages for fork modal. added combined erro…
sanghoonio Jun 25, 2024
2983f32
updated combined name, tag error messages
sanghoonio Jun 26, 2024
0e1d43b
project component ui
sanghoonio Jun 26, 2024
a4f2032
minor height adjustment
sanghoonio Jun 26, 2024
b93909f
color adjustments
sanghoonio Jun 26, 2024
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
43 changes: 38 additions & 5 deletions web/src/components/forms/blank-project-form.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,7 +6,6 @@ import { Controller, useForm } from 'react-hook-form';
import { Sample } from '../../../types';
import { useBlankProjectFormMutation } from '../../hooks/mutations/useBlankProjectFormMutation';
import { useSession } from '../../hooks/useSession';
import { GitHubAvatar } from '../badges/github-avatar';
import { ProjectConfigEditor } from '../project/project-config';
import { SampleTable } from '../tables/sample-table';
import { SchemaDropdown } from './components/schemas-databio-dropdown';
Expand Down Expand Up @@ -40,6 +39,7 @@ export const BlankProjectForm: FC<Props> = ({ onHide, defaultNamespace }) => {
control,
formState: { isValid, errors },
} = useForm<BlankProjectInputs>({
mode: 'onChange',
defaultValues: {
is_private: false,
namespace: defaultNamespace || user?.login || '',
Expand Down Expand Up @@ -119,8 +119,8 @@ sample_table: samples.csv
{...register('project_name', {
required: true,
pattern: {
value: /^\S+$/,
message: 'No spaces allowed.',
value: /^[a-zA-Z0-9_-]+$/,
message: "Project Name must contain only alphanumeric characters, '-', or '_'.",
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This is awesome, I didn't know this was possible with react-hook-form!

Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more. 

// instantiate form
const {
    reset: resetForm,
    register,
    control,
    watch,
    setValue,
    formState: { isValid, errors },
  } = useForm<FromFileInputs>({
    mode: 'onChange',  <<<---------- had to add this for it to work
    defaultValues: {
      is_private: false,
      pep_schema: 'pep/2.1.0',
      namespace: defaultNamespace || user?.login || '',
    },
  });

So I added that mode: 'onChange' line to make it work but wasn't sure if it would cause lag if it started checking after every single input. Is this negligible with react/our use case or is it something we have to worry about?

},
})}
id="blank-project-name"
Expand All @@ -129,9 +129,42 @@ sample_table: samples.csv
placeholder="name"
/>
<span className="mx-1 mb-1">:</span>
<input {...register('tag')} id="blank_tag" type="text" className="form-control" placeholder="default" />
<input
{...register('tag', {
required: false,
pattern: {
value: /^[a-zA-Z0-9_-]+$/,
message: "Project Tag must contain only alphanumeric characters, '-', or '_'.",
},
})}
id="blank_tag"
type="text"
className="form-control"
placeholder="default"
/>
</span>
<ErrorMessage errors={errors} name="project_name" render={({ message }) => <p>{message}</p>} />
<ErrorMessage
errors={errors}
name="project_name"
render={({ message }) =>
message ? (
<p className="text-danger pt-1" style={{ fontSize: '.75em' }}>
{message}
</p>
) : null
}
/>
<ErrorMessage
errors={errors}
name="tag"
render={({ message }) =>
message ? (
<p className="text-danger pt-1" style={{ fontSize: '.75em' }}>
{message}
</p>
) : null
}
/>
<textarea
id="blank_description"
className="form-control mt-3"
Expand Down
42 changes: 38 additions & 4 deletions web/src/components/forms/edit-project-meta.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,3 +1,4 @@
import { ErrorMessage } from '@hookform/error-message';
import { FC, useEffect } from 'react';
import { Controller, useForm } from 'react-hook-form';
import toast from 'react-hot-toast';
Expand Down Expand Up @@ -41,8 +42,9 @@ export const ProjectMetaEditForm: FC<Props> = ({
control,
setValue,
reset: resetForm,
formState: { isValid, isDirty },
formState: { isValid, isDirty, errors },
} = useForm<FormValues>({
mode: 'onChange',
defaultValues: {
name: name,
description: projectInfo?.description || '',
Expand Down Expand Up @@ -119,6 +121,17 @@ export const ProjectMetaEditForm: FC<Props> = ({
}
}, [newPop]);

const isBadName = newName
? /[^0-9a-zA-Z_-]/.test(newName)
? "Project Name must contain only alphanumeric characters, '-', or '_'."
: null
: 'Project Name must not be empty.';
const isBadTag = newTag
? /[^0-9a-zA-Z_-]/.test(newTag)
? "Project Tag must contain only alphanumeric characters, '-', or '_'."
: null
: 'Project Tag must not be empty.';

return (
<form>
<div className="mb-3 form-check form-switch">
Expand All @@ -144,13 +157,23 @@ export const ProjectMetaEditForm: FC<Props> = ({
Project Name
</label>
<input
{...register('name')}
placeholder="Project name"
type="text"
className="form-control"
id="project-name"
aria-describedby="pep-name-help"
{...register('name', {
required: {
value: true,
message: "Project Name must not be empty.",
},
pattern: {
value: /^[a-zA-Z0-9_-]+$/,
message: "Project Name must contain only alphanumeric characters, '-', or '_'.",
},
})}
/>
<ErrorMessage errors={errors} name="name" render={({ message }) => message ? (<p className='text-danger pt-1' style={{fontSize: '.75em'}}>{message}</p>) : null} />
</div>
<div className="mb-3">
<label htmlFor="schema-tag" className="form-label">
Expand Down Expand Up @@ -179,12 +202,23 @@ export const ProjectMetaEditForm: FC<Props> = ({
Project Tag
</label>
<input
{...register('tag')}
// {...register('tag')}
type="text"
className="form-control"
id="project-tag"
aria-describedby="pep-name-help"
{...register('tag', {
required: {
value: true,
message: "Project Tag must not be empty.",
},
pattern: {
value: /^[a-zA-Z0-9_-]+$/,
message: "Project Tag must contain only alphanumeric characters, '-', or '_'.",
},
})}
/>
<ErrorMessage errors={errors} name="tag" render={({ message }) => message ? (<p className='text-danger pt-1' style={{fontSize: '.75em'}}>{message}</p>) : null} />
</div>
<div className="mb-3">
<label htmlFor="project-description" className="form-label">
Expand Down Expand Up @@ -219,7 +253,7 @@ export const ProjectMetaEditForm: FC<Props> = ({
<button
onClick={() => mutation.mutate()}
id="metadata-save-btn"
disabled={(!isDirty && isValid) || mutation.isPending}
disabled={(!isDirty && isValid) || isBadName || isBadTag || mutation.isPending}
type="button"
className="btn btn-success me-1"
>
Expand Down
17 changes: 13 additions & 4 deletions web/src/components/forms/pop-form.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -35,6 +35,7 @@ export const PopForm: FC<Props> = ({ onHide, defaultNamespace }) => {
control,
formState: { isValid, errors },
} = useForm<POPInputs>({
mode: 'onChange',
defaultValues: {
is_private: false,
namespace: defaultNamespace || user?.login || '',
Expand Down Expand Up @@ -103,8 +104,8 @@ export const PopForm: FC<Props> = ({ onHide, defaultNamespace }) => {
{...register('project_name', {
required: true,
pattern: {
value: /^\S+$/,
message: 'No spaces allowed.',
value: /^[a-zA-Z0-9_-]+$/,
message: "Project Name must contain only alphanumeric characters, '-', or '_'.",
},
})}
id="blank-project-name"
Expand All @@ -113,9 +114,17 @@ export const PopForm: FC<Props> = ({ onHide, defaultNamespace }) => {
placeholder="name"
/>
<span className="mx-1 mb-1">:</span>
<input {...register('tag')} id="blank_tag" type="text" className="form-control" placeholder="default" />
<input {...register('tag', {
required: false,
pattern: {
value: /^[a-zA-Z0-9_-]+$/,
message: "Project Tag must contain only alphanumeric characters, '-', or '_'.",
},
})}
id="blank_tag" type="text" className="form-control" placeholder="default" />
</span>
<ErrorMessage errors={errors} name="project_name" render={({ message }) => <p>{message}</p>} />
<ErrorMessage errors={errors} name="project_name" render={({ message }) => message ? (<p className='text-danger pt-1' style={{fontSize: '.75em'}}>{message}</p>) : null} />
<ErrorMessage errors={errors} name="tag" render={({ message }) => message ? (<p className='text-danger pt-1' style={{fontSize: '.75em'}}>{message}</p>) : null} />
<textarea
id="blank_description"
className="form-control mt-3"
Expand Down
17 changes: 13 additions & 4 deletions web/src/components/forms/project-upload-form.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -37,6 +37,7 @@ export const ProjectUploadForm: FC<Props> = ({ onHide, defaultNamespace }) => {
setValue,
formState: { isValid, errors },
} = useForm<FromFileInputs>({
mode: 'onChange',
defaultValues: {
is_private: false,
pep_schema: 'pep/2.1.0',
Expand Down Expand Up @@ -109,15 +110,23 @@ export const ProjectUploadForm: FC<Props> = ({ onHide, defaultNamespace }) => {
{...register('name', {
required: true,
pattern: {
value: /^\S+$/,
message: 'No spaces allowed.',
value: /^[a-zA-Z0-9_-]+$/,
message: "Project Name must contain only alphanumeric characters, '-', or '_'.",
},
})}
/>
<span className="mx-1 mb-1">:</span>
<input id="tag" type="text" className="form-control" placeholder="default" {...register('tag')} />
<input id="tag" type="text" className="form-control" placeholder="default" {...register('tag', {
required: false,
pattern: {
value: /^[a-zA-Z0-9_-]+$/,
message: "Project Tag must contain only alphanumeric characters, '-', or '_'.",
},
})}
/>
</span>
<ErrorMessage errors={errors} name="name" render={({ message }) => <p>{message}</p>} />
<ErrorMessage errors={errors} name="name" render={({ message }) => message ? (<p className='text-danger pt-1' style={{fontSize: '.75em'}}>{message}</p>) : null} />
<ErrorMessage errors={errors} name="tag" render={({ message }) => message ? (<p className='text-danger pt-1' style={{fontSize: '.75em'}}>{message}</p>): null} />
<textarea
id="description"
className="form-control mt-3"
Expand Down
Loading