feat: move event category group edition to MUI

package.json

@@ -92,6 +92,7 @@
     "moment": "^2.29.1",
     "moment-duration-format": "^2.3.2",
     "moment-timezone": "^0.5.33",
+    "mui-color-input": "^9.0.0",
     "openstack-uicore-foundation": "5.0.34",
     "p-limit": "^6.1.0",
     "path-browserify": "^1.0.1",

src/actions/event-category-actions.js

@@ -489,7 +489,7 @@ export const saveEventCategoryGroup =
     const params = { access_token: accessToken };
 
     if (entity.id) {
-      putRequest(
+      return putRequest(
         createAction(UPDATE_EVENT_CATEGORY_GROUP),
         createAction(EVENT_CATEGORY_GROUP_UPDATED),
         `${window.API_BASE_URL}/api/v1/summits/${currentSummit.id}/track-groups/${entity.id}`,
@@ -503,30 +503,22 @@ export const saveEventCategoryGroup =
           )
         );
       });
-    } else {
-      const successMessage = {
-        title: T.translate("general.done"),
-        html: T.translate("edit_event_category_group.group_created"),
-        type: "success"
-      };
-
-      postRequest(
+    } 
+      return postRequest(
         createAction(UPDATE_EVENT_CATEGORY_GROUP),
         createAction(EVENT_CATEGORY_GROUP_ADDED),
         `${window.API_BASE_URL}/api/v1/summits/${currentSummit.id}/track-groups`,
         normalizedEntity,
         authErrorHandler,
         entity
-      )(params)(dispatch).then((payload) => {
+      )(params)(dispatch).then(() => {
         dispatch(
-          showMessage(successMessage, () => {
-            history.replace(
-              `/app/summits/${currentSummit.id}/event-category-groups/${payload.response.id}`
-            );
-          })
+          showSuccessMessage(
+            T.translate("edit_event_category_group.group_created")
+          )
         );
       });
-    }
+
   };
 
 export const deleteEventCategoryGroup =

src/components/mui/formik-inputs/mui-formik-color-input.js

@@ -0,0 +1,47 @@
+import React from "react";
+import PropTypes from "prop-types";
+import { useField } from "formik";
+import { MuiColorInput } from "mui-color-input";
+
+const COLOR_INPUT_SX = {
+  "& input": { visibility: "hidden" },
+  "& .MuiInputBase-root": { position: "relative", overflow: "hidden" },
+  "& .MuiInputAdornment-root": {
+    position: "absolute",
+    inset: 0,
+    maxHeight: "none",
+    margin: 0
+  },
+  "& .MuiColorInput-Button": {
+    width: "100%",
+    height: "100%",
+    borderRadius: "3px",
+    minWidth: 0
+  }
+};
+
+const MuiFormikColorInput = ({ name, ...props }) => {
+  const [field, , helpers] = useField(name);
+
+  const value = field.value?.startsWith("#")
+    ? field.value
+    : field.value
+    ? `#${field.value}`
+    : "";
+
+  return (
+    <MuiColorInput
+      {...props}
+      value={value}
+      onChange={(newColor) => helpers.setValue(newColor)}
+      format="hex"
+      sx={COLOR_INPUT_SX}
+    />
+  );
+};
+
+MuiFormikColorInput.propTypes = {
+  name: PropTypes.string.isRequired
+};
+
+export default MuiFormikColorInput;

src/i18n/en.json

@@ -1409,7 +1409,9 @@
     "group_created": "Activity Category Group created successfully.",
     "unlink_track_warning": "if you remove a category from the category group, any activities linked to that category will automatically be removed from the selection plan. Do you want to continue?",
     "placeholders": {
-      "select_class": "Select Class"
+      "select_class": "Select Class",
+      "search_categories": "Search and add categories",
+      "search_groups": "Search and add allowed groups"
     }
   },
   "location_list": {

src/layouts/event-category-group-layout.js

@@ -9,56 +9,34 @@
  * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
  * See the License for the specific language governing permissions and
  * limitations under the License.
- **/
+ * */
 
 import React from "react";
-import { Switch, Route, withRouter } from "react-router-dom";
+import { Switch, Route, Redirect, withRouter } from "react-router-dom";
 import T from "i18n-react/dist/i18n-react";
 import { Breadcrumb } from "react-breadcrumbs";
 import Restrict from "../routes/restrict";
 
-import EditEventCategoryGroupPage from "../pages/events/edit-event-category-group-page";
 import EventCategoryGroupListPage from "../pages/events/event-category-group-list-page";
-import NoMatchPage from "../pages/no-match-page";
 
-class EventCategoryGroupLayout extends React.Component {
-  render() {
-    const { match } = this.props;
-    return (
-      <div>
-        <Breadcrumb
-          data={{
-            title: T.translate(
-              "event_category_group_list.event_category_groups"
-            ),
-            pathname: match.url
-          }}
-        />
-
-        <Switch>
-          <Route
-            exact
-            strict
-            path={match.url}
-            component={EventCategoryGroupListPage}
-          />
-          <Route
-            exact
-            strict
-            path={`${match.url}/new`}
-            component={EditEventCategoryGroupPage}
-          />
-          <Route
-            exact
-            strict
-            path={`${match.url}/:group_id(\\d+)`}
-            component={EditEventCategoryGroupPage}
-          />
-          <Route component={NoMatchPage} />
-        </Switch>
-      </div>
-    );
-  }
-}
+const EventCategoryGroupLayout = ({ match }) => (
+  <div>
+    <Breadcrumb
+      data={{
+        title: T.translate("event_category_group_list.event_category_groups"),
+        pathname: match.url
+      }}
+    />
+    <Switch>
+      <Route
+        exact
+        strict
+        path={match.url}
+        component={EventCategoryGroupListPage}
+      />
+      <Redirect to={match.url} />
+    </Switch>
+  </div>
+);
 
 export default Restrict(withRouter(EventCategoryGroupLayout), "events");