Merge pull request #27773 from edx/aakbar/revert-PROD-1473

Revert "feat: Add Help Center search in Contact Us"

lms/djangoapps/support/static/support/jsx/single_support_form.jsx

@@ -5,6 +5,9 @@
 import PropTypes from 'prop-types';
 import React from 'react';
 import ReactDOM from 'react-dom';
+import { StatusAlert } from '@edx/paragon';
+
+import StringUtils from 'edx-ui-toolkit/js/utils/string-utils';
 
 import ShowErrors from './errors_list';
 import LoggedInUser from './logged_in_user';
@@ -25,15 +28,11 @@ class RenderForm extends React.Component {
     this.userInformation = this.props.context.user;
     const course = this.userInformation ? this.userInformation.course_id : '';
     this.courseDiscussionURL = '/courses/{course_id}/discussion/forum';
-    this.learnerSupportCenterURL = 'https://support.edx.org/';
     this.submitButton = null;
     this.state = {
       currentRequest: null,
       errorList: initialFormErrors,
       success: false,
-      activeSuggestion: 0,
-      suggestions: [],
-      typingTimeout: 0,
       formData: {
         course,
         subject: '',
@@ -48,17 +47,7 @@ class RenderForm extends React.Component {
     };
     this.handleClick = this.handleClick.bind(this);
     this.reDirectUser = this.reDirectUser.bind(this);
-    this.handleInputChange = this.handleInputChange.bind(this);
     this.formOnChangeCallback = this.formOnChangeCallback.bind(this);
-    this.handleSearchButton = this.handleSearchButton.bind(this);
-    this.onKeyDown = this.onKeyDown.bind(this);
-    this.handleSuggestionClick = this.handleSuggestionClick.bind(this);
-    this.ignoreBlur = false;
-    this.handleBlur = this.handleBlur.bind(this);
-  }
-
-  setIgnoreBlur(ignore) {
-    this.ignoreBlur = ignore;
   }
 
   getFormDataFromState() {
@@ -122,12 +111,12 @@ class RenderForm extends React.Component {
   handleClick(event) {
     event.preventDefault();
     this.submitButton = event.currentTarget;
-    this.submitButton.setAttribute('disabled', true);
+    this.submitButton.setAttribute("disabled", true);
     const formData = this.getFormDataFromState();
     this.clearErrorState();
     this.validateFormData(formData);
     if (this.formHasErrors()) {
-      this.submitButton.removeAttribute('disabled');
+      this.submitButton.removeAttribute("disabled");
       return this.scrollToTop();
     }
     this.createZendeskTicket(formData);
@@ -153,18 +142,18 @@ class RenderForm extends React.Component {
     request.send(JSON.stringify(data));
     request.onreadystatechange = function success() {
       if (request.readyState === 4) {
-        this.submitButton.removeAttribute('disabled');
+        this.submitButton.removeAttribute("disabled");
         if (request.status === 201) {
-          this.setState({
-            success: true,
-          });
+            this.setState({
+                success: true,
+            });
         }
       }
     }.bind(this);
 
     request.onerror = function error() {
       this.updateErrorInState('request', this.formValidationErrors.request);
-      this.submitButton.removeAttribute('disabled');
+      this.submitButton.removeAttribute("disabled");
       this.scrollToTop();
     }.bind(this);
   }
@@ -194,71 +183,8 @@ class RenderForm extends React.Component {
     );
   }
 
-  async handleInputChange(event) {
-    event.preventDefault();
-    const queryString = event.target.value;
-    if (this.typingTimeout) { clearTimeout(this.typingTimeout); }
-    this.typingTimeout = setTimeout(async () => {
-      if (queryString.length > 2) {
-        let suggestions = [];
-        console.log(this);
-        await fetch(`${this.learnerSupportCenterURL}/hc/api/internal/instant_search.json?query=${queryString}&locale=en-us`, { headers: {
-          'Content-Type': 'application/json',
-        } }).then((response) => {
-          suggestions = response.json.results;
-          this.setState({ suggestions });
-        });
-      } else {
-        this.setState({
-          suggestions: [],
-          activeSuggestion: 0,
-        });
-      }
-    }, 500);
-  }
-
-  onKeyDown(event) {
-    const { activeSuggestion, suggestions } = this.state;
-    const enterKeyCode = 13,
-      upArrowKeyCode = 38,
-      downArrowKeyCode = 40;
-
-    if (event.keyCode === enterKeyCode) {
-      window.location.href = this.learnerSupportCenterURL + suggestions[activeSuggestion].url;
-    } else if (event.keyCode === upArrowKeyCode) {
-      (activeSuggestion === 0) ?
-        this.setState({ activeSuggestion: suggestions.length - 1 }) :
-        this.setState({ activeSuggestion: activeSuggestion - 1 });
-    } else if (event.keyCode === downArrowKeyCode) {
-      (activeSuggestion + 1 === suggestions.length) ?
-        this.setState({ activeSuggestion: 0 }) :
-        this.setState({ activeSuggestion: activeSuggestion + 1 });
-    }
-  }
-
-  handleBlur(event) {
-    if (!this.ignoreBlur) {
-      this.setState({
-        suggestions: [],
-        activeSuggestion: 0,
-      });
-    }
-  }
-
-  handleSearchButton(query) {
-    const queryString = query.replace(' ', '+');
-
-    window.location.href = `${this.learnerSupportCenterURL}/hc/en-us/search?&query=${queryString}`;
-  }
-
-  handleSuggestionClick(url) {
-    window.location.href = this.learnerSupportCenterURL + url;
-  }
-
   renderSupportForm() {
-    const { activeSuggestion, suggestions } = this.state;
-    let userElement,
-      suggestionsListComponent = null;
+    let userElement;
     if (this.userInformation) {
       userElement = (<LoggedInUser
         userInformation={this.userInformation}
@@ -276,23 +202,6 @@ class RenderForm extends React.Component {
         supportEmail={this.props.context.supportEmail}
       />);
     }
-    if (suggestions.length) {
-      suggestionsListComponent = (
-        <ul className="suggestions">
-          {suggestions.map((suggestion, index) => (
-            <li
-              className={index === activeSuggestion ? 'suggestion-active' : null}
-              key={index}
-              onMouseDown={() => this.setIgnoreBlur(true)}
-              onClick={() => this.handleSuggestionClick(suggestion.url)}
-              onMouseOver={() => this.setState({ activeSuggestion: index })}
-            >
-              <div dangerouslySetInnerHTML={{ __html: suggestion.title }} />
-            </li>
-            ))}
-        </ul>
-      );
-    }
 
     return (
       <div className="contact-us-wrapper">
@@ -316,32 +225,16 @@ class RenderForm extends React.Component {
         </div>
 
         <div className="row">
-          <div className="col-sm-8">
-            <input name="utf8" type="hidden" value="✓" />
-            <input
-              type="search"
-              className="form-control"
-              id="query"
-              placeholder="Search the Learner Help Center"
-              autoComplete="off"
-              onChange={this.handleInputChange}
-              onKeyDown={this.onKeyDown}
-              onBlur={this.handleBlur}
-            />
-          </div>
-          <div className="col-sm-4">
-            <button
-              className="btn btn-primary btn-submit btn"
-              type="button"
-              onClick={() => this.handleSearchButton(document.getElementById('query').value)}
+          <div className="col-sm-12">
+            <a
+              href={this.props.context.marketingUrl}
+              className="btn btn-secondary help-button"
             >
-              Search
-            </button>
-          </div>
-        </div>
-        <div className="row">
-          <div className="col-sm-8">
-            {suggestionsListComponent}
+              {StringUtils.interpolate(
+                gettext('Search the {platform} Help Center'),
+                { platform: this.props.context.platformName },
+              )}
+            </a>
           </div>
         </div>
 

lms/static/sass/_build-lms-v1.scss

@@ -75,7 +75,6 @@
 
 // search
 @import 'search/search';
-@import 'search/instant-search';
 
 // news
 @import 'notifications';

lms/static/sass/search/_instant-search.scss

@@ -1,31 +0,0 @@
-$default-border-color: #ccc;
-
-.suggestions {
-  border: 1px solid #default-border-color;
-  border-radius: 4px;
-  border-top-width: 0;
-  list-style: none;
-  margin-top: 0;
-  overflow-y: auto;
-  padding-left: 0;
-}
-
-.suggestions li {
-  padding: 0.5rem;
-}
-
-$input-background-color: #000000;
-$input-text-color: #ffffff;
-
-.suggestion-active,
-.suggestions li:hover {
-  background-color: $input-background-color;
-  color: $input-text-color;
-  cursor: pointer;
-}
-
-$li-border-color: #999;
-
-.suggestions li:not(:last-of-type) {
-  border-bottom: 1px solid $li-border-color;
-}