implemented working tooltip/help message and better styling

maproulette · Aug 22, 2023 · 1f538a9 · 1f538a9
1 parent 84364e5
commit 1f538a9
Show file tree

Hide file tree

Showing 6 changed files with 39 additions and 9 deletions.
diff --git a/src/components/Custom/RJSFFormFieldAdapter/RJSFFormFieldAdapter.js b/src/components/Custom/RJSFFormFieldAdapter/RJSFFormFieldAdapter.js
@@ -61,7 +61,6 @@ export const CustomArrayFieldTemplate = props => {
   const addLabel = props.uiSchema["ui:addLabel"] ||
     <FormattedMessage {...messages.addPriorityRuleLabel} />
   const deleteLabel = props.uiSchema["ui:deleteLabel"]
-
   const itemFields = _map(props.items, element =>
     <div
       key={element.index}
@@ -96,7 +95,7 @@ export const CustomArrayFieldTemplate = props => {
       {props.canAdd &&
        <div className="array-field__block-controls">
          <button
-           className="mr-button mr-button mr-button--small"
+           className="mr-button mr-button--small"
            onClick={props.onAddClick}
          >
            {addLabel}

diff --git a/src/lang/en-US.json b/src/lang/en-US.json
@@ -1186,6 +1186,7 @@
   "Profile.form.notificationSubscriptions.label": "Notification Subscriptions",
   "Profile.form.seeTagFixSuggestions.description": "User will see tag fix suggestions if they are provided.",
   "Profile.form.seeTagFixSuggestions.label": "See Tag Fix Suggestions",
+  "Profile.form.systemNotifications.description": "This is a test system notifications help label",
   "Profile.form.uniqueCustomBasemap.error": "Custom Basemap names must be unique",
   "Profile.form.yes.label": "Yes",
   "Profile.noUser": "User not found or you are unauthorized to view this user.",

diff --git a/src/pages/Profile/Messages.js b/src/pages/Profile/Messages.js
@@ -204,6 +204,11 @@ export default defineMessages({
                     "or as a daily digest)"
   },
 
+  systemNotificationsDescription: {
+    id: "Profile.form.systemNotifications.description",
+    defaultMessage: "This is a test system notifications help label",
+  },
+
   yesLabel: {
     id: "Profile.form.yes.label",
     defaultMessage: "Yes",

diff --git a/src/pages/Profile/UserSettings/NotificationSettingsSchema.js b/src/pages/Profile/UserSettings/NotificationSettingsSchema.js
@@ -16,6 +16,7 @@ import {
 } from "../../../services/Notification/NotificationSubscription/NotificationSubscription";
 import MarkdownContent from "../../../components/MarkdownContent/MarkdownContent";
 import messages from "../Messages";
+import { CustomFieldTemplate } from '../../../components/Custom/RJSFFormFieldAdapter/RJSFFormFieldAdapter';
 
 const createSubscriptionInput = (
   name,
@@ -26,6 +27,7 @@ const createSubscriptionInput = (
   defaultSelection,
 ) => {
   return {
+    name: name,
     title: `${
       notificationLabels[`${name}Long`] || notificationLabels[name]
     } ${intl.formatMessage(messages.notificationLabel)}`,
@@ -37,6 +39,7 @@ const createSubscriptionInput = (
 };
 
 export const transformErrors = (intl) => (errors) => {
+  console.log('errors', errors)
   return errors.map(error => {
     if (error.name === "format") {
       const formatMessage = intl.formatMessage(messages.errorFormatMessage)
@@ -92,14 +95,24 @@ export const jsSchema = (intl) => {
     );
   });
 
+
+  const notificationObject = {}
+  items.forEach((item, i) => {
+    notificationObject[i] = item
+  })
+
   return {
     $schema: "http://json-schema.org/draft-07/schema#",
     type: "object",
     properties: {
+      // notificationSubscriptions: {
+      //   title: intl.formatMessage(messages.notificationSubscriptionsLabel),
+      //   type: "array",
+      //   items: items,
+      // },
       notificationSubscriptions: {
         title: intl.formatMessage(messages.notificationSubscriptionsLabel),
-        type: "array",
-        items: items,
+        properties: notificationObject,
       },
       email: {
         title: intl.formatMessage(messages.emailLabel),
@@ -134,11 +147,15 @@ export const uiSchema = (intl) => {
 
     notificationSubscriptions: {
       classNames: "no-legend notification-subscriptions",
+        0: {
+          "ui:help": intl.formatMessage(messages.systemNotificationsDescription),
+          "ui:FieldTemplate": CustomFieldTemplate,
+          },
+      },
       "ui:options": {
         orderable: false,
         removable: false,
       },
-        },
       "ui:order": ["email", "notificationSubscriptions"],
       "ui:showTitle": false,
 

diff --git a/src/pages/Profile/UserSettings/UserSettings.js b/src/pages/Profile/UserSettings/UserSettings.js
@@ -34,7 +34,7 @@ import {
   CustomSelectWidget,
   NoFieldsetObjectFieldTemplate,
   CustomArrayFieldTemplate,
-  CustomNotificationSettingsArrayFieldTemplate,
+  CustomFieldTemplate
 } from "../../../components/Custom/RJSFFormFieldAdapter/RJSFFormFieldAdapter";
 import {
   jsSchema as settingsJsSchema,
@@ -63,7 +63,7 @@ class UserSettings extends Component {
     if (!this.areBasemapNamesUnique(settings.customBasemaps)) {
       return;
     }
-
+    console.log('settings in save settings', settings)
     this.setState({ isSaving: true, saveComplete: false });
 
     const editableUser = AsEditableUser(_cloneDeep(settings));
@@ -138,7 +138,6 @@ class UserSettings extends Component {
     if (_isEmpty(settings)) {
       return;
     }
-
     this.setState({ isSaving: true, saveComplete: false });
     this.props
       .updateNotificationSubscriptions(this.props.user.id, settings)
@@ -192,6 +191,8 @@ class UserSettings extends Component {
       saveComplete: false,
     });
 
+    console.log(formData)
+
     const subscriptionsObject = _fromPairs(
       _map(formData.notificationSubscriptions, (setting, index) => [
         keysWithCountTypes[index],
@@ -240,7 +241,7 @@ class UserSettings extends Component {
         this.props.loadCompleteUser(this.props.user.id);
       }
     }
-    console.log(this.state)
+    // console.log(this.state)
   }
 
   render() {
@@ -364,6 +365,9 @@ class UserSettings extends Component {
             this.notificationsChangeHandler(userSettings, params)
           }
           ObjectFieldTemplate={NoFieldsetObjectFieldTemplate}
+          // ArrayFieldTemplate={testCustomArrayFieldTemplate}
+          // FieldTemplate={CustomFieldTemplate}
+          // CustomFields={customFields}
         >
           <div className="form-controls" />
         </Form>

diff --git a/src/styles/components/forms.css b/src/styles/components/forms.css
@@ -65,6 +65,10 @@
               @apply mr-mb-0;
             }
           }
+
+          .control-label {
+            @apply mr-cursor-default
+          }
         }
 
       }
-Original file line number
+Diff line change
@@ Expand Up / @@ -65,6 +65,10 @@ @@
                   @apply mr-mb-0;
                 }
               }
+              .control-label {
+                @apply mr-cursor-default
+              }
             }
           }
@@ Expand Down @@