use pre-released features

webapp/components/user_settings/manage_command_hooks.jsx

@@ -4,9 +4,13 @@
 import LoadingScreen from '../loading_screen.jsx';
 
 import * as Client from 'utils/client.jsx';
+import * as Utils from 'utils/utils.jsx';
+import Constants from 'utils/constants.jsx';
 
 import {intlShape, injectIntl, defineMessages, FormattedMessage, FormattedHTMLMessage} from 'react-intl';
 
+const PreReleaseFeatures = Constants.PRE_RELEASE_FEATURES;
+
 const holders = defineMessages({
     requestTypePost: {
         id: 'user.settings.cmds.request_type_post',
@@ -277,11 +281,9 @@ export default class ManageCommandCmds extends React.Component {
                 );
             }
 
-            cmds.push(
+            let slashCommandAutocompleteDiv;
-                <div
+            if (Utils.isFeatureEnabled(PreReleaseFeatures.SLASHCMD_AUTOCMP)) {
-                    key={cmd.id}
+                slashCommandAutocompleteDiv = (
-                    className='webhook__item webcmd__item'
-                >
                     <div className='padding-top x2'>
                         <strong>
                             <FormattedMessage
@@ -290,6 +292,15 @@ export default class ManageCommandCmds extends React.Component {
                             />
                         </strong><span className='word-break--all'>{cmd.external_management ? this.props.intl.formatMessage(holders.autocompleteYes) : this.props.intl.formatMessage(holders.autocompleteNo)}</span>
                     </div>
+                );
+            }
+
+            cmds.push(
+                <div
+                    key={cmd.id}
+                    className='webhook__item webcmd__item'
+                >
+                    {slashCommandAutocompleteDiv}
                     {triggerDiv}
                     <div className='padding-top x2 webcmd__url'>
                         <strong>
@@ -433,21 +444,9 @@ export default class ManageCommandCmds extends React.Component {
 
         const disableButton = this.state.cmd.url === '' || (this.state.cmd.trigger === '' && !this.state.external_management);
 
-        return (
+        let slashCommandAutocompleteCheckbox;
-            <div key='addCommandCmd'>
+        if (Utils.isFeatureEnabled(PreReleaseFeatures.SLASHCMD_AUTOCMP)) {
-                <FormattedHTMLMessage
+            slashCommandAutocompleteCheckbox = (
-                    id='user.settings.cmds.add_desc'
-                    defaultMessage='Create slash commands to send events to external integrations and receive a response. For example typing `/patient Joe Smith` could bring back search results from your internal health records management system for the name “Joe Smith”.  Please see <a href="http://docs.mattermost.com/developer/slash-commands.html">Slash commands documentation</a>  for detailed instructions. View all slash commands configured on this team below.'
-                />
-                <div><label className='control-label padding-top x2'>
-                    <FormattedMessage
-                        id='user.settings.cmds.add_new'
-                        defaultMessage='Add a new command'
-                    />
-                </label></div>
-                <div className='padding-top divider-light'></div>
-                <div className='padding-top'>
-
                 <div className='padding-top x2'>
                     <label className='control-label'>
                         <FormattedMessage
@@ -472,7 +471,26 @@ export default class ManageCommandCmds extends React.Component {
                     </div>
                 </div>
 
+            );
+        }
+
+        return (
+            <div key='addCommandCmd'>
+                <FormattedHTMLMessage
+                    id='user.settings.cmds.add_desc'
+                    defaultMessage='Create slash commands to send events to external integrations and receive a response. For example typing `/patient Joe Smith` could bring back search results from your internal health records management system for the name “Joe Smith”.  Please see <a href="http://docs.mattermost.com/developer/slash-commands.html">Slash commands documentation</a>  for detailed instructions. View all slash commands configured on this team below.'
+                />
+                <div><label className='control-label padding-top x2'>
+                    <FormattedMessage
+                        id='user.settings.cmds.add_new'
+                        defaultMessage='Add a new command'
+                    />
+                </label></div>
+                <div className='padding-top divider-light'></div>
+                <div className='padding-top'>
+
                     <div className='padding-top x2'>
+                        {slashCommandAutocompleteCheckbox}
                         <label className='control-label'>
                             <FormattedMessage
                                 id='user.settings.cmds.trigger'

webapp/components/user_settings/user_settings_advanced.jsx

@@ -51,6 +51,10 @@ const holders = defineMessages({
     EMBED_TOGGLE: {
         id: 'user.settings.advance.embed_toggle',
         defaultMessage: 'Show toggle for all embed previews'
+    },
+    SLASHCMD_AUTOCMP: {
+        id: 'user.settings.advance.slashCmd_autocmp',
+        defaultMessage: 'Enable external application to offer slash command autocomplete'
     }
 });
 

webapp/i18n/en.json

@@ -1091,6 +1091,7 @@
   "tutorial_tip.seen": "Seen this before? ",
   "upload_overlay.info": "Drop a file to upload it.",
   "user.settings.advance.embed_preview": "Show preview snippet of links below message",
+  "user.settings.advance.slashCmd_autocmp": "Enable external application to offer slash command autocomplete",
   "user.settings.advance.embed_toggle": "Show toggle for all embed previews",
   "user.settings.advance.enabled": "enabled",
   "user.settings.advance.feature": " Feature ",

webapp/utils/constants.jsx

@@ -560,6 +560,10 @@ export default {
         EMBED_TOGGLE: {
             label: 'embed_toggle',
             description: 'Show toggle for all embed previews'
+        },
+        SLASHCMD_AUTOCMP: {
+            label: 'slashCmd_autocmp',
+            description: 'Enable external application to offer slash command autocomplete'
         }
     },
     OVERLAY_TIME_DELAY: 400,