feat(138): add errors to error toast

src/components/ErrorToast.jsx

@@ -8,6 +8,8 @@ import {
   dismissLabelsError,
   selectCommentsErrors,
   dismissCommentsError,
+  selectTagsErrors,
+  dismissTagsError,
 } from '../features/review/reviewSlice';
 import {
   selectProjectsErrors,
@@ -20,6 +22,8 @@ import {
   dismissCreateProjectError,
   selectManageLabelsErrors,
   dismissManageLabelsError,
+  selectProjectTagErrors,
+  dismissProjectTagErrors
 } from '../features/projects/projectsSlice';
 import {
   selectWirelessCamerasErrors,
@@ -57,6 +61,7 @@ import { selectManageUserErrors, dismissManageUsersError } from '../features/pro
 const ErrorToast = () => {
   const dispatch = useDispatch();
   const labelsErrors = useSelector(selectLabelsErrors);
+  const tagsErrors = useSelector(selectTagsErrors);
   const commentsErrors = useSelector(selectCommentsErrors);
   const projectsErrors = useSelector(selectProjectsErrors);
   const viewsErrors = useSelector(selectViewsErrors);
@@ -74,9 +79,12 @@ const ErrorToast = () => {
   const manageLabelsErrors = useSelector(selectManageLabelsErrors);
   const uploadErrors = useSelector(selectUploadErrors);
   const cameraSerialNumberErrors = useSelector(selectCameraSerialNumberErrors);
+  const projectTagErrors = useSelector(selectProjectTagErrors);
 
   const enrichedErrors = [
     enrichErrors(labelsErrors, 'Label Error', 'labels'),
+    enrichErrors(tagsErrors, 'Tag Error', 'tags'),
+    enrichErrors(projectTagErrors, 'Tag Error', 'projectTags'),
     enrichErrors(commentsErrors, 'Comment Error', 'comments'),
     enrichErrors(projectsErrors, 'Project Error', 'projects'),
     enrichErrors(viewsErrors, 'View Error', 'views'),
@@ -144,6 +152,8 @@ const ErrorToast = () => {
 
 const dismissErrorActions = {
   labels: (i) => dismissLabelsError(i),
+  tags: (i) => dismissTagsError(i),
+  projectTags: (i) => dismissProjectTagErrors(i),
   comments: (i) => dismissCommentsError(i),
   projects: (i) => dismissProjectsError(i),
   createProject: (i) => dismissCreateProjectError(i),

src/features/projects/ManageTagsModal/EditTag.jsx

@@ -47,13 +47,14 @@ const ColorSwatch = styled('button', {
 
 const createTagNameSchema = (currentName, allNames) => {
   return Yup.string()
-    .required('Enter a label name.')
-    .matches(/^[a-zA-Z0-9_. -]*$/, "Labels can't contain special characters")
-    .test('unique', 'A label with this name already exists.', (val) => {
+    .required('Enter a tag name.')
+    .matches(/^[a-zA-Z0-9_. -]*$/, "Tags can't contain special characters")
+    .test('unique', 'A tag with this name already exists.', (val) => {
+      const allNamesLowerCase = allNames.map((n) => n.toLowerCase())
       if (val?.toLowerCase() === currentName.toLowerCase()) {
         // name hasn't changed
         return true;
-      } else if (!allNames.includes(val?.toLowerCase())) {
+      } else if (!allNamesLowerCase.includes(val?.toLowerCase())) {
         // name hasn't already been used
         return true;
       } else {
@@ -155,7 +156,6 @@ export const EditTag = ({
   const [color, setColor] = useState(currentColor);
   const [tempColor, setTempColor] = useState(currentColor);
 
-  const tagNameSchema = createTagNameSchema(currentName, allTagNames);
 
   const [nameError, setNameError] = useState("");
   const [colorError, setColorError] = useState("");
@@ -191,6 +191,9 @@ export const EditTag = ({
   const onConfirmEdit = () => {
     let validatedName = "";
     let validatedColor = "";
+
+    const tagNameSchema = createTagNameSchema(currentName, allTagNames);
+
     // If the user typed in a color, tempColor !== color
     const submittedColor = tempColor !== color ? tempColor : color;
     try {

src/features/projects/projectsSlice.js

@@ -432,6 +432,11 @@ export const projectsSlice = createSlice({
       state.loadingStates.projectTags = ls;
     },
 
+    dismissProjectTagErrors: (state, { payload }) => {
+      const index = payload;
+      state.loadingStates.projectTags.errors.splice(index, 1);
+    },
+
     setModalOpen: (state, { payload }) => {
       state.modalOpen = payload;
     },
@@ -487,6 +492,7 @@ export const {
   setSelectedProjAndView,
   setUnsavedViewChanges,
   dismissProjectsError,
+  dismissProjectTagErrors,
   createProjectStart,
   createProjectSuccess,
   createProjectFailure,
@@ -915,5 +921,6 @@ export const selectModelOptionsLoading = (state) =>
 export const selectProjectLabelsLoading = (state) => state.projects.loadingStates.projectLabels;
 export const selectManageLabelsErrors = (state) =>
   state.projects.loadingStates.projectLabels.errors;
+export const selectProjectTagErrors = (state) => state.projects.loadingStates.projectTags.errors;
 
 export default projectsSlice.reducer;

src/features/review/reviewSlice.js

@@ -206,6 +206,11 @@ export const reviewSlice = createSlice({
       state.loadingStates.labels.errors.splice(index, 1);
     },
 
+    dismissTagsError: (state, { payload }) => {
+      const index = payload;
+      state.loadingStates.tags.errors.splice(index, 1);
+    },
+
     dismissCommentsError: (state, { payload }) => {
       const index = payload;
       state.loadingStates.comments.errors.splice(index, 1);
@@ -256,6 +261,7 @@ export const {
   editTagFailure,
   editTagSuccess,
   dismissLabelsError,
+  dismissTagsError,
   dismissCommentsError,
 } = reviewSlice.actions;