Style Tipline settings area menu to better match the Check UI (#2105)

* begin to style tipline settings area menu to better match the Check UI

* add unrelated missing form layout class

* sort prop types to be a good citizen

* [smoke tests] Run all smoke tests for this branch

* [smoke tests] Run all smoke tests for this branch

src/app/components/cds/buttons-checkboxes-chips/ButtonMain.module.css

@@ -307,7 +307,7 @@
 
   &.theme-black:not([type='button']:disabled):not([type='submit']:disabled) {
     &.contained {
-      @mixin main-button-contained-theme var(--color-gray-15), var(--color-gray-59), var(--color-white-100), var(--color-white-100);
+      @mixin main-button-contained-theme var(--color-gray-15), var(--color-gray-37), var(--color-white-100), var(--color-white-100);
     }
 
     &.outlined {

src/app/components/team/Newsletter/NewsletterHeader.js

@@ -1,10 +1,10 @@
-/* eslint-disable react/sort-prop-types */
 import React from 'react';
 import PropTypes from 'prop-types';
 import { FormattedMessage, defineMessages, injectIntl, intlShape } from 'react-intl';
 import Select from '../../cds/inputs/Select';
 import LimitedTextField from '../../layout/inputs/LimitedTextField';
 import Upload from '../../cds/inputs/Upload';
+import inputStyles from '../../../styles/css/inputs.module.css';
 import styles from './NewsletterComponent.module.css';
 
 const messages = defineMessages({
@@ -58,7 +58,7 @@ const NewsletterHeader = ({
   setFile,
   setFileName,
 }) => (
-  <div>
+  <div className={inputStyles['form-fieldset-field']}>
     <Select
       className={styles.select}
       disabled={disabled}
@@ -134,16 +134,16 @@ NewsletterHeader.defaultProps = {
 };
 
 NewsletterHeader.propTypes = {
-  disabled: PropTypes.bool,
   availableHeaderTypes: PropTypes.arrayOf(PropTypes.string),
+  disabled: PropTypes.bool,
+  error: PropTypes.bool,
+  fileName: PropTypes.string,
   headerType: PropTypes.oneOf(['', 'none', 'link_preview', 'image', 'video', 'audio']),
+  intl: intlShape.isRequired,
+  overlayText: PropTypes.string,
   setFile: PropTypes.func.isRequired,
   setFileName: PropTypes.func.isRequired,
-  fileName: PropTypes.string,
-  overlayText: PropTypes.string,
   onUpdateField: PropTypes.func.isRequired,
-  intl: intlShape.isRequired,
-  error: PropTypes.bool,
 };
 
 export default injectIntl(NewsletterHeader);

src/app/components/team/SmoochBot/SmoochBot.module.css

@@ -0,0 +1,29 @@
+.smoochBotMenu {
+  margin: 0 0 32px;
+
+  li {
+    margin: 0 0 8px;
+
+    .smoochBotMenuButton {
+      border-radius: var(--border-radius-max);
+      justify-content: start;
+      width: 100%;
+    }
+  }
+
+  > .smoochBotMenuResource {
+    border-top: 1px solid var(--color-gray-88);
+    margin: 16px 0 8px;
+    padding: 16px 0 0;
+  }
+
+  .smoochBotMenuResource ~ .smoochBotMenuResource {
+    border: 0;
+    margin: 0 0 8px;
+    padding: 0;
+  }
+}
+
+.smoochbot-component-input {
+  min-width: 500px;
+}

src/app/components/team/SmoochBot/SmoochBotConfig.js

@@ -1,4 +1,3 @@
-/* eslint-disable react/sort-prop-types */
 import React from 'react';
 import PropTypes from 'prop-types';
 import { FormattedMessage } from 'react-intl';
@@ -7,7 +6,6 @@ import SmoochBotResourceEditor from './SmoochBotResourceEditor';
 import SmoochBotSettings from './SmoochBotSettings';
 import SmoochBotContentAndTranslation from './SmoochBotContentAndTranslation';
 import SmoochBotMainMenu from './SmoochBotMainMenu';
-import { ToggleButton, ToggleButtonGroup } from '../../cds/inputs/ToggleButtonGroup';
 import ButtonMain from '../../cds/buttons-checkboxes-chips/ButtonMain';
 import AddIcon from '../../../icons/add.svg';
 import createEnvironment from '../../../relay/EnvironmentModern';
@@ -23,7 +21,6 @@ const SmoochBotConfig = (props) => {
     userRole,
     value,
   } = props;
-  const [currentTab, setCurrentTab] = React.useState('bot');
   const defaultOption = 'smooch_content';
   const [currentOption, setCurrentOption] = React.useState(defaultOption);
   const team = props?.currentUser?.current_team;
@@ -76,13 +73,6 @@ const SmoochBotConfig = (props) => {
     props.onChange(newValue);
   };
 
-  const handleChangeTab = (event, newTab) => {
-    if (currentResource && newTab === 'settings') {
-      onEditingResource(false);
-    }
-    setCurrentTab(newTab);
-  };
-
   const handleChangeImage = (file) => {
     const updatedValue = Object.assign({}, value);
     if (file) {
@@ -130,92 +120,74 @@ const SmoochBotConfig = (props) => {
 
   return (
     <React.Fragment>
-      { userRole === 'admin' ?
-        <div className={styles['tipline-settings-toggle']}>
-          <ToggleButtonGroup
-            exclusive
-            value={currentTab}
-            variant="contained"
-            onChange={handleChangeTab}
-          >
-            <ToggleButton key="1" value="bot">
-              <FormattedMessage defaultMessage="Design your bot" description="Title of tipline settings page" id="smoochBot.designYourBot" />
-            </ToggleButton>
-            <ToggleButton key="2" value="settings">
-              <FormattedMessage defaultMessage="Settings" description="Tab label to click to see the settings area" id="smoochBot.settings" />
-            </ToggleButton>
-          </ToggleButtonGroup>
-        </div>
-        : null
-      }
-      { currentTab === 'bot' ?
-        <React.Fragment>
-          <div className={styles['bot-designer']}>
-            <div className={styles['bot-designer-menu']}>
-              <SmoochBotSidebar
-                currentOption={currentOption}
+      <React.Fragment>
+        <div className={styles['bot-designer']}>
+          <div className={styles['bot-designer-menu']}>
+            <SmoochBotSidebar
+              currentOption={currentOption}
+              resources={resources}
+              userRole={userRole}
+              onClick={handleSelectOption}
+            />
+            <ButtonMain
+              iconLeft={<AddIcon />}
+              label={
+                <FormattedMessage
+                  defaultMessage="New Tipline Resource"
+                  description="Button label to add a resource to this bot"
+                  id="smoochBot.addResource"
+                />
+              }
+              size="default"
+              theme="text"
+              variant="contained"
+              onClick={() => {
+                handleSelectOption('resource_new');
+              }}
+            />
+          </div>
+          <div className={styles['bot-designer-content']}>
+            { currentResource ?
+              <SmoochBotResourceEditor
+                environment={environment}
+                key={currentResource.id}
+                language={currentLanguage}
+                resource={currentResource}
+                onCreate={(newResource) => { handleSelectOption(`resource_${newResource.dbid}`); }}
+                onDelete={() => { handleSelectOption(defaultOption); }}
+              /> : null }
+            { currentOption === 'smooch_content' ?
+              <SmoochBotContentAndTranslation
+                key={currentLanguage}
+                value={value.smooch_workflows[currentWorkflowIndex]}
+                onChangeImage={handleChangeImage}
+                onChangeMessage={handleChangeMessage}
+                onChangeStateMessage={handleChangeStateMessage}
+              /> : null }
+            { currentOption === 'smooch_main_menu' ?
+              <SmoochBotMainMenu
+                currentLanguage={currentLanguage}
+                currentUser={props.currentUser}
+                enabledIntegrations={props.enabledIntegrations}
+                hasUnsavedChanges={hasUnsavedChanges}
+                key={currentLanguage}
+                languages={languages.filter(f => f !== currentLanguage)}
                 resources={resources}
-                onClick={handleSelectOption}
-              />
-              <ButtonMain
-                iconLeft={<AddIcon />}
-                label={
-                  <FormattedMessage
-                    defaultMessage="Resource"
-                    description="Button label to add a resource to this bot"
-                    id="smoochBot.addResource"
-                  />
-                }
-                size="default"
-                theme="text"
-                variant="contained"
-                onClick={() => {
-                  handleSelectOption('resource_new');
-                }}
-              />
-            </div>
-            <div className={styles['bot-designer-content']}>
-              { currentResource ?
-                <SmoochBotResourceEditor
-                  environment={environment}
-                  key={currentResource.id}
-                  language={currentLanguage}
-                  resource={currentResource}
-                  onCreate={(newResource) => { handleSelectOption(`resource_${newResource.dbid}`); }}
-                  onDelete={() => { handleSelectOption(defaultOption); }}
-                /> : null }
-              { currentOption === 'smooch_content' ?
-                <SmoochBotContentAndTranslation
-                  key={currentLanguage}
-                  value={value.smooch_workflows[currentWorkflowIndex]}
-                  onChangeImage={handleChangeImage}
-                  onChangeMessage={handleChangeMessage}
-                  onChangeStateMessage={handleChangeStateMessage}
-                /> : null }
-              { currentOption === 'smooch_main_menu' ?
-                <SmoochBotMainMenu
-                  currentLanguage={currentLanguage}
-                  currentUser={props.currentUser}
-                  enabledIntegrations={props.enabledIntegrations}
-                  hasUnsavedChanges={hasUnsavedChanges}
-                  key={currentLanguage}
-                  languages={languages.filter(f => f !== currentLanguage)}
-                  resources={resources}
-                  value={value.smooch_workflows[currentWorkflowIndex]}
-                  onChange={handleChangeMenu}
-                /> : null }
-            </div>
+                value={value.smooch_workflows[currentWorkflowIndex]}
+                onChange={handleChangeMenu}
+              /> : null }
+            { currentOption === 'smooch_settings' ?
+              <SmoochBotSettings
+                currentUser={props.currentUser}
+                enabledIntegrations={props.enabledIntegrations}
+                installationId={props.installationId}
+                schema={settingsSchema}
+                settings={settings}
+                onChange={handleUpdateSetting}
+              /> : null }
           </div>
-        </React.Fragment> : null }
-      { currentTab === 'settings' ?
-        <SmoochBotSettings
-          currentUser={props.currentUser}
-          enabledIntegrations={props.enabledIntegrations}
-          installationId={props.installationId}
-          schema={settingsSchema}
-          settings={settings}
-          onChange={handleUpdateSetting}
-        /> : null }
+        </div>
+      </React.Fragment>
     </React.Fragment>
   );
 };
@@ -225,16 +197,16 @@ SmoochBotConfig.defaultProps = {
 };
 
 SmoochBotConfig.propTypes = {
-  installationId: PropTypes.string.isRequired,
-  value: PropTypes.object.isRequired, // saved settings for the Smooch Bot
-  onChange: PropTypes.func.isRequired, // called after "save" is clicked
-  schema: PropTypes.object.isRequired,
   currentUser: PropTypes.object.isRequired,
-  userRole: PropTypes.string.isRequired,
   enabledIntegrations: PropTypes.object.isRequired,
+  hasUnsavedChanges: PropTypes.bool.isRequired,
+  installationId: PropTypes.string.isRequired,
   resources: PropTypes.arrayOf(PropTypes.object),
+  schema: PropTypes.object.isRequired,
+  userRole: PropTypes.string.isRequired,
+  value: PropTypes.object.isRequired, // saved settings for the Smooch Bot
+  onChange: PropTypes.func.isRequired, // called after "save" is clicked
   onEditingResource: PropTypes.func.isRequired,
-  hasUnsavedChanges: PropTypes.bool.isRequired,
 };
 
 export default SmoochBotConfig;

src/app/components/team/SmoochBot/SmoochBotIntegrationButton.js

@@ -1,4 +1,3 @@
-/* eslint-disable react/sort-prop-types */
 import React from 'react';
 import PropTypes from 'prop-types';
 import { commitMutation, graphql } from 'react-relay/compat';
@@ -18,7 +17,7 @@ const useStyles = makeStyles(theme => ({
   smoochBotIntegrationButton: {
     margin: theme.spacing(1),
     background: 'var(--color-gray-88)',
-    minWidth: 262,
+    minWidth: 255,
     justifyContent: 'space-between',
     '&:hover': {
       background: 'var(--color-gray-88)',
@@ -424,24 +423,24 @@ SmoochBotIntegrationButton.defaultProps = {
 };
 
 SmoochBotIntegrationButton.propTypes = {
+  deprecationNotice: PropTypes.node, // or null
+  disabled: PropTypes.bool.isRequired,
+  helpUrl: PropTypes.string.isRequired,
+  icon: PropTypes.node.isRequired,
+  info: PropTypes.node, // or null
   installationId: PropTypes.string.isRequired,
-  type: PropTypes.string.isRequired,
+  intl: intlShape.isRequired,
   label: PropTypes.string.isRequired,
-  url: PropTypes.string, // if null, "params" must be provided
-  skipUrlConfirmation: PropTypes.bool,
+  online: PropTypes.bool.isRequired,
   params: PropTypes.arrayOf(PropTypes.shape({
     label: PropTypes.object, // <FormattedMessage />
     key: PropTypes.string,
   })), // if null, "url" must be provided
-  online: PropTypes.bool.isRequired,
-  info: PropTypes.node, // or null
-  deprecationNotice: PropTypes.node, // or null
-  disabled: PropTypes.bool.isRequired,
-  icon: PropTypes.node.isRequired,
   permanentDisconnection: PropTypes.bool,
-  helpUrl: PropTypes.string.isRequired,
-  intl: intlShape.isRequired,
   readOnly: PropTypes.bool,
+  skipUrlConfirmation: PropTypes.bool,
+  type: PropTypes.string.isRequired,
+  url: PropTypes.string, // if null, "params" must be provided
 };
 
 export default withSetFlashMessage(injectIntl(SmoochBotIntegrationButton));