#2436 - integrate settings endpoint

web-ui/src/api/settings.js

@@ -0,0 +1,15 @@
+import { resolve } from './api.js';
+
+const settingsURL = '/services/settings';
+
+export const getAllOptions = async cookie => {
+  return resolve({
+    method: 'GET',
+    url: settingsURL + `/options`,
+    headers: {
+      'X-CSRF-Header': cookie,
+      Accept: 'application/json',
+      'Content-Type': 'application/json;charset=UTF-8'
+    }
+  });
+};

web-ui/src/components/member_selector/member_selector_dialog/MemberSelectorDialog.jsx

@@ -456,10 +456,7 @@ const MemberSelectorDialog = ({
               {checked.size} selected
             </Typography>
           </div>
-          <Button
-            color="inherit"
-            onClick={handleSubmit}
-          >
+          <Button color="inherit" onClick={handleSubmit}>
             Save
           </Button>
         </Toolbar>

web-ui/src/components/reviews/TeamReviews.jsx

@@ -599,7 +599,7 @@ const TeamReviews = ({ onBack, periodId }) => {
     return null; // no validtation errors
   };
 
-  const updateReviewPeriodStatus = async (reviewStatus) => {
+  const updateReviewPeriodStatus = async reviewStatus => {
     try {
       const res = await resolve({
         method: 'PUT',
@@ -631,7 +631,7 @@ const TeamReviews = ({ onBack, periodId }) => {
         console.log(reviewee.name, 'is reviewed by', reviewer.name);
       }
     }
-  }
+  };
 
   const requestApproval = async () => {
     const msg = validateReviewPeriod(period);
@@ -652,9 +652,9 @@ const TeamReviews = ({ onBack, periodId }) => {
           ? 'Are you sure you want to launch the review period?'
           : unapproved.length === 1
             ? 'There is one visible, unapproved review assignment. ' +
-            'Would you like to approve it and launch this review period?'
+              'Would you like to approve it and launch this review period?'
             : `There are ${unapproved.length} visible, unapproved review assignments. ` +
-            'Would you like to approve all of them and launch this review period?'
+              'Would you like to approve all of them and launch this review period?'
       );
       setConfirmationDialogOpen(true);
     }

web-ui/src/components/settings/types/boolean.jsx

@@ -7,23 +7,23 @@ import { createLabelId } from '../../../helpers/strings.js';
  *
  * @component
  * @param {Object} props
- * @param {string} props.label - The label for the settings component.
+ * @param {string} props.name - The label for the settings component.
  * @param {string} [props.description] - The description for the settings component.
  * @param {boolean} props.value - The value of the settings component.
  * @param {Function} props.handleChange - The function to handle the change event of the settings component.
  * @returns {JSX.Element} The rendered boolean settings component.
  */
-const SettingsBoolean = ({ label, description, value, handleChange }) => {
-  const labelId = createLabelId(label);
+const SettingsBoolean = ({ name, description, value, handleChange }) => {
+  const labelId = createLabelId(name);
 
   return (
     <div className="settings-type">
       <label htmlFor={labelId}>
         <Typography variant="h5" gutterBottom>
-          {label}
+          {name}
         </Typography>
       </label>
-      {description ?? <p>{description}</p>}
+      {description && <p>{description}</p>}
       <Switch
         id={labelId}
         className="settings-control"

web-ui/src/components/settings/types/boolean.stories.jsx

@@ -20,7 +20,7 @@ const Template = args => {
 
 export const Boolean = Template.bind({});
 Boolean.args = {
-  label: 'Boolean Control',
+  name: 'Boolean Control',
   description: 'A control to hold a boolean value',
   handleChange: event => console.log(`BOOLEAN ${event.target.checked}`)
 };

web-ui/src/components/settings/types/color.jsx

@@ -7,23 +7,23 @@ import { createLabelId } from '../../../helpers/strings.js';
  *
  * @component
  * @param {Object} props
- * @param {string} props.label - The label for the setting.
+ * @param {string} props.name - The name for the setting.
  * @param {string} [props.description] - The description for the setting (optional).
  * @param {string} props.value - The current value of the setting.
  * @param {function} props.handleChange - The function to handle changes to the setting value (optional).
  * @returns {JSX.Element} The rendered component.
  */
-const SettingsColor = ({ label, description, value, handleChange }) => {
-  const labelId = createLabelId(label);
+const SettingsColor = ({ name, description, value, handleChange }) => {
+  const labelId = createLabelId(name);
 
   return (
     <div className="settings-type">
       <label htmlFor={labelId}>
         <Typography variant="h5" gutterBottom>
-          {label}
+          {name}
         </Typography>
       </label>
-      {description ?? <p>{description}</p>}
+      {description && <p>{description}</p>}
       <input
         id={labelId}
         className="settings-control"

web-ui/src/components/settings/types/color.stories.jsx

@@ -20,7 +20,7 @@ const Template = args => {
 
 export const Color = Template.bind({});
 Color.args = {
-  label: 'Color Control',
+  name: 'Color Control',
   description: 'A control to hold a color value',
   value: '#2c519e',
   handleChange: event => console.log(`COLOR: ${event.target.value}`)

web-ui/src/components/settings/types/file.jsx

@@ -8,32 +8,32 @@ import { createLabelId } from '../../../helpers/strings.js';
  *
  * @component
  * @param {Object} props - The component props.
- * @param {string} props.label - The label of the file settings.
+ * @param {string} props.name - The name of the file settings.
  * @param {string} [props.description] - The description of the file settings.
  * @param {Object} props.fileRef - The reference to the file input element.
  * @param {Function} props.handleFile - The function to handle file upload.
  * @returns {JSX.Element} The rendered component.
  */
-const SettingsFile = ({ fileRef, handleFile, label, description }) => {
-  const labelId = createLabelId(label);
+const SettingsFile = ({ fileRef, handleFunction, name, description }) => {
+  const labelId = createLabelId(name);
 
   const handleClick = event => {
     fileRef.current.click();
   };
 
   const handleChange = event => {
     const fileUploaded = event.target.files[0];
-    handleFile(fileUploaded);
+    handleFunction(fileUploaded);
   };
 
   return (
     <div className="settings-type">
       <label htmlFor={labelId}>
         <Typography variant="h5" gutterBottom>
-          {label}
+          {name}
         </Typography>
       </label>
-      {description ?? <p>{description}</p>}
+      {description && <p>{description}</p>}
       <div className="settings-control">
         <Button onClick={handleClick}>
           <AddCircle />

web-ui/src/components/settings/types/file.stories.jsx

@@ -22,7 +22,7 @@ const Template = args => {
 
 export const File = Template.bind({});
 File.args = {
-  label: 'File Control',
+  name: 'File Control',
   description: 'A control to upload a File',
   fileRef,
   handleFile: event => console.log(`File: ${event.target.value}`)

web-ui/src/components/settings/types/number.jsx

@@ -7,23 +7,23 @@ import { createLabelId } from '../../../helpers/strings.js';
  *
  * @component
  * @param {Object} props
- * @param {string} props.label - The label for the number input field.
+ * @param {string} props.name - The name for the number input field.
  * @param {string} [props.description] - The description for the input field (optional).
  * @param {number} props.value - The current value of the number input field.
  * @param {function} props.handleChange - The callback function to handle value changes.
  * @returns {JSX.Element} - The rendered component.
  */
-const SettingsNumber = ({ label, description, value, handleChange }) => {
-  const labelId = createLabelId(label);
+const SettingsNumber = ({ name, description, value, handleChange }) => {
+  const labelId = createLabelId(name);
 
   return (
     <div className="settings-type">
       <label htmlFor={labelId}>
         <Typography variant="h5" gutterBottom>
-          {label}
+          {name}
         </Typography>
       </label>
-      {description ?? <p>{description}</p>}
+      {description && <p>{description}</p>}
       <Input
         id={labelId}
         className="settings-control"

web-ui/src/components/settings/types/number.stories.jsx

@@ -20,6 +20,6 @@ const Template = args => {
 
 export const Number = Template.bind({});
 Number.args = {
-  label: 'Number Control',
+  name: 'Number Control',
   description: 'A control to hold a numerical value'
 };

web-ui/src/components/settings/types/string.jsx

@@ -7,36 +7,36 @@ import { createLabelId } from '../../../helpers/strings.js';
  *
  * @component
  * @param {Object} props
- * @param {string} props.label - The label for the input field.
+ * @param {string} props.name - The name for the input field.
  * @param {string} [props.description] - The description for the input field (optional).
  * @param {string} props.value - The current value of the input field.
  * @param {string} [props.placeholder] - The placeholder text for the input field (optional).
  * @param {function} props.handleChange - The function to handle input field changes.
  * @returns {JSX.Element} - The rendered component.
  */
 const SettingsString = ({
-  label,
+  name,
   description,
   value,
   placeholder,
   handleChange
 }) => {
-  const labelId = createLabelId(label);
+  const labelId = createLabelId(name);
 
   return (
     <div className="settings-type">
       <label htmlFor={labelId}>
         <Typography variant="h5" gutterBottom>
-          {label}
+          {name}
         </Typography>
       </label>
-      {description ?? <p>{description}</p>}
+      {description && <p>{description}</p>}
       <Input
         id={labelId}
         className="settings-control"
         type="text"
         value={value}
-        placeholder={placeholder ?? `Enter ${label}`}
+        placeholder={placeholder ?? `Enter ${name}`}
         onChange={handleChange}
       />
     </div>

web-ui/src/components/settings/types/string.stories.jsx

@@ -20,6 +20,6 @@ const Template = args => {
 
 export const String = Template.bind({});
 String.args = {
-  label: 'String Control',
+  name: 'SETTINGS_NAME',
   description: 'A control to hold a string value'
 };

web-ui/src/pages/PulsePage.jsx

@@ -2,7 +2,6 @@ import { format } from 'date-fns';
 import React, { useContext, useEffect, useState } from 'react';
 import { useHistory } from 'react-router-dom';
 import { Button, Typography } from '@mui/material';
-
 import { resolve } from '../api/api.js';
 import Pulse from '../components/pulse/Pulse.jsx';
 import { AppContext } from '../context/AppContext';