Merge pull request #130 from topcoder-platform/dev

[PROD] Post Release Patch 1.5.2

Author: nkumar-topcoder

config/dev.js

@@ -9,11 +9,6 @@ module.exports = {
    */
   CONNECT_WEBSITE_URL: "https://connect.topcoder-dev.com",
 
-  /**
-   * Email to request extension
-   */
-  EMAIL_REQUEST_EXTENSION: "[email protected]",
-
   API: {
     V5: "https://api.topcoder-dev.com/v5",
     V3: "https://api.topcoder-dev.com/v3",

config/prod.js

@@ -9,11 +9,6 @@ module.exports = {
    */
   CONNECT_WEBSITE_URL: "https://connect.topcoder.com",
 
-  /**
-   * Email to request extension
-   */
-  EMAIL_REQUEST_EXTENSION: "[email protected]",
-
   API: {
     V5: "https://api.topcoder.com/v5",
     V3: "https://api.topcoder.com/v3",

src/components/EmailPopup/actions/index.js

@@ -0,0 +1,21 @@
+/**
+ * Report popup actions
+ */
+import { ACTION_TYPE } from "constants";
+
+/**
+ * Action to create an email popup and open it
+ * @param {Object} popupOptions Options to customize popup appearance and behaviour
+ * @param {Object} data Data to send to server with email text
+ */
+export const openEmailPopup = (popupOptions, data) => ({
+  type: ACTION_TYPE.OPEN_EMAIL_POPUP,
+  payload: { popupOptions, data },
+});
+
+/**
+ * Action to close an email popup
+ */
+export const closeEmailPopup = () => ({
+  type: ACTION_TYPE.CLOSE_EMAIL_POPUP,
+});

src/components/EmailPopup/hooks/useEmailPopup.js

@@ -0,0 +1,20 @@
+/**
+ * Use email popup hook
+ */
+
+import { useDispatch } from "react-redux";
+import { openEmailPopup } from "../actions";
+
+/**
+ * Hook to allow email popup to be opened by any other component
+ * (as long as it is mounted somewhere in the tree)
+ *
+ * @returns func A wrapper around the open report dispatch
+ */
+export const useEmailPopup = () => {
+  const dispatch = useDispatch();
+
+  return (popupOptions, data) => {
+    dispatch(openEmailPopup(popupOptions, data));
+  };
+};

src/components/ReportPopup/index.jsx renamed to src/components/EmailPopup/index.jsx

@@ -1,45 +1,51 @@
 /**
- * A report popup used to report issues with teams or team members
+ * An email popup used to format and send emails for reporting issues
+ * and requesting extensions
  */
 
 import React, { useCallback, useState } from "react";
+import _ from "lodash";
 import { useSelector, useDispatch } from "react-redux";
 import { toastr } from "react-redux-toastr";
-import { closeReport } from "./actions";
+import { closeEmailPopup } from "./actions";
 import BaseModal from "components/BaseModal";
 import TextArea from "components/TextArea";
 import Button from "../Button";
-import { postReport } from "services/teams";
+import { postEmail } from "services/teams";
 import CenteredSpinner from "components/CenteredSpinner";
 
-function ReportPopup() {
-  const { isOpen, teamName, teamId, memberHandle } = useSelector(
-    (state) => state.reportPopup
+function EmailPopup() {
+  const { isOpen, popupOptions, data } = useSelector(
+    (state) => state.emailPopup
   );
 
   const dispatch = useDispatch();
   const [textVal, setTextVal] = useState("");
   const [isLoading, setIsLoading] = useState(false);
 
-  const submitReport = () => {
+  const submitEmail = () => {
     setIsLoading(true);
 
-    postReport(teamName, teamId, textVal, memberHandle)
+    const postData = _.merge({}, data);
+
+    _.set(postData, popupOptions.textDataField, textVal);
+
+    postEmail(postData)
       .then(() => {
         setIsLoading(false);
         closeModal();
-        toastr.success("Report submitted successfully");
+        toastr.success(popupOptions.successTitle);
       })
       .catch((err) => {
         setIsLoading(false);
 
-        toastr.error("Report failed", err.message);
+        toastr.error(popupOptions.errorTitle, err.message);
       });
   };
 
   const button = (
     <Button
-      onClick={() => submitReport()}
+      onClick={submitEmail}
       size="medium"
       isSubmit
       disabled={textVal.trim().length < 1 || isLoading}
@@ -49,17 +55,15 @@ function ReportPopup() {
   );
 
   const closeModal = useCallback(() => {
-    dispatch(closeReport());
+    dispatch(closeEmailPopup());
     setTextVal("");
   }, [dispatch]);
 
   return (
     <BaseModal
       open={isOpen}
       onClose={closeModal}
-      title={`Issue Report - ${teamName}${
-        memberHandle ? " - " + memberHandle : ""
-      }`}
+      title={popupOptions.title}
       button={button}
       disabled={isLoading}
     >
@@ -69,11 +73,11 @@ function ReportPopup() {
         <TextArea
           value={textVal}
           onChange={setTextVal}
-          placeholder="Describe your issue"
+          placeholder={popupOptions.textPlaceholder}
         />
       )}
     </BaseModal>
   );
 }
 
-export default ReportPopup;
+export default EmailPopup;

src/components/ReportPopup/reducers/index.js renamed to src/components/EmailPopup/reducers/index.js

@@ -1,26 +1,29 @@
 /**
- * Reducer for Report popup
+ * Reducer for Email popup
  */
 
 import { ACTION_TYPE } from "constants";
 
 const initialState = {
-  teamName: undefined,
-  teamId: undefined,
-  memberHandle: undefined,
   isOpen: false,
+  popupOptions: {
+    title: "",
+    textPlaceholder: "",
+    textDataField: "",
+  },
+  data: null,
 };
 
 const reducer = (state = initialState, action) => {
   switch (action.type) {
-    case ACTION_TYPE.OPEN_REPORT:
+    case ACTION_TYPE.OPEN_EMAIL_POPUP:
       return {
         ...state,
         ...action.payload,
         isOpen: true,
       };
 
-    case ACTION_TYPE.CLOSE_REPORT:
+    case ACTION_TYPE.CLOSE_EMAIL_POPUP:
       return {
         ...state,
         isOpen: false,

src/components/FormField/index.jsx

@@ -64,6 +64,7 @@ const FormField = ({ field }) => {
             <MarkdownEditor
               placeholder={field.placeholder}
               value={input?.value ?? ""}
+              disabled={field.disabled}
               onChange={input.onChange}
               onBlur={input.onBlur}
               onFocus={input.onFocus}

src/components/MarkdownEditor/index.jsx

@@ -6,7 +6,9 @@ import React, { useCallback, useRef } from "react";
 import PropTypes from "prop-types";
 import cn from "classnames";
 import TuiEditor from "../TuiEditor";
+import MarkdownEditorViewer from "../MarkdownEditorViewer";
 import styles from "./styles.module.scss";
+import { DISABLED_DESCRIPTION_MESSAGE } from "constants";
 
 const MarkdownEditor = (props) => {
   const editorElement = useRef(null);
@@ -15,6 +17,14 @@ const MarkdownEditor = (props) => {
     const markdown = editorElement.current.editorInst.getMarkdown();
     props.onChange(markdown);
   }, [props.onChange]);
+  if (props.disabled) {
+    return (
+      <div styleName="editor-viewer">
+        <MarkdownEditorViewer {...props} />
+        <div styleName="message">{DISABLED_DESCRIPTION_MESSAGE}</div>
+      </div>
+    );
+  }
 
   return (
     <div className={cn(styles["editor-container"], props.className)}>
@@ -23,13 +33,32 @@ const MarkdownEditor = (props) => {
         ref={editorElement}
         onChange={onChange}
         initialValue={props.value}
+        toolbarItems={[
+          'heading',
+          'bold',
+          'italic',
+          'strike',
+          'code',
+          'divider',
+          'quote',
+          'codeblock',
+          'hr',
+          'divider',
+          'ul',
+          'ol',
+          'divider',
+          'image',
+          'link',
+        ]}
+        plugins={[]}
       />
     </div>
   );
 };
 
 MarkdownEditor.propTypes = {
   value: PropTypes.string,
+  disabled: PropTypes.bool,
   className: PropTypes.string,
   onChange: PropTypes.func,
   onFocus: PropTypes.func,

src/components/MarkdownEditor/styles.module.scss

@@ -1,5 +1,31 @@
 @import "styles/include";
 
+.editor-viewer {
+    > div:first-child {
+      border: 1px solid #aaaaab;
+      border-radius: 4px;
+      overflow: hidden;
+      box-sizing: border-box;
+      padding: 16px 25px 0px 25px;
+      height: 280px;
+      overflow-y: auto;
+    }
+    .message {
+      @include font-roboto;
+
+      width: 100%;
+      text-align: center;
+      min-height: 40px;
+      line-height: 20px;
+      padding: 9px 10px;
+      margin: 10px 0 5px;
+      font-size: 14px;
+      color: #ff5b52;
+      border: 1px solid #ffd5d1;
+      cursor: auto;
+      outline: none;
+    }
+}
 .editor-container {
   :global {
     // reset style for heading list in  headings selection popup
@@ -10,12 +36,6 @@
       }
     }
 
-    .tui-editor-contents {
-      b {
-        font-weight: bold;
-      }
-    }
-
     // reset border color
     .tui-editor-defaultUI {
       border: 1px solid #aaaaab;

src/components/ReportPopup/actions/index.js

@@ -2,29 +2,9 @@
  * TC Form utilty
  */
 import _ from "lodash";
+import { getSelectOptionByValue } from "utils/helpers";
 import { FORM_FIELD_TYPE } from "../../constants";
 
-/**
- * Returns the option from list of option by value
- *
- * @param {any} value value of option
- * @param {[{ label: string, value: any }]} selectOptions list of option
- *
- * @returns {{ label: string, value: any }} select option
- */
-const getSelectOptionByValue = (value, selectOptions) => {
-  const option = _.find(selectOptions, { value });
-
-  if (!option) {
-    return {
-      label: `Unsuppored value: ${value}`,
-      value,
-    };
-  }
-
-  return option;
-};
-
 /**
  * Extract value from field by type
  * @param {any} value value