renderRecommentBtn

src/client/js/components/Admin/MarkdownSetting/WhiteListInput.jsx

@@ -9,20 +9,37 @@ import AppContainer from '../../../services/AppContainer';
 
 class WhiteListInput extends React.Component {
 
+  renderRecommendBtn() {
+    const { t } = this.props;
+
+    return (
+      <p id="btn-import-tags" className="btn btn-xs btn-primary">
+        { t('markdown_setting.import_recommended', 'tags') }
+      </p>
+    );
+  }
+
   render() {
     const { t, customizable } = this.props;
 
+
     return (
       <>
         <div className="m-t-15">
-          { t('markdown_setting.Tag names') }
+          <div className="d-flex justify-content-between">
+            { t('markdown_setting.Tag names') }
+            {customizable && this.renderRecommendBtn()}
+          </div>
           {/* TODO GW-304 fetch correct defaultValue */}
-          <textarea className="form-control xss-list" name="recommendedTags" rows="6" cols="40" readOnly={customizable} defaultValue="recommendedWhitelist.tags" />
+          <textarea className="form-control xss-list" name="recommendedTags" rows="6" cols="40" readOnly={!customizable} defaultValue="recommendedWhitelist.tags" />
         </div>
         <div className="m-t-15">
-          { t('markdown_setting.Tag attributes') }
+          <div className="d-flex justify-content-between">
+            { t('markdown_setting.Tag attributes') }
+            {customizable && this.renderRecommendBtn()}
+          </div>
           {/* TODO GW-304 fetch correct defaultValue */}
-          <textarea className="form-control xss-list" name="recommendedAttrs" rows="6" cols="40" readOnly={customizable} defaultValue="recommendedWhitelist.attrs" />
+          <textarea className="form-control xss-list" name="recommendedAttrs" rows="6" cols="40" readOnly={!customizable} defaultValue="recommendedWhitelist.attrs" />
         </div>
       </>
     );

src/client/js/components/Admin/MarkdownSetting/XssForm.jsx

@@ -69,7 +69,7 @@ class XssForm extends React.Component {
           <input type="radio" id="xssOption2" name="XssOption" onChange={() => { this.onChangeXssOption(2) }} />
           <label htmlFor="xssOption2">
             <p className="font-weight-bold">{ t('markdown_setting.Recommended setting') }</p>
-            <WhiteListInput customizable />
+            <WhiteListInput customizable={false} />
           </label>
         </div>
 
@@ -77,7 +77,7 @@ class XssForm extends React.Component {
           <input type="radio" id="xssOption3" name="XssOption" onChange={() => { this.onChangeXssOption(3) }} />
           <label htmlFor="xssOption3">
             <p className="font-weight-bold">{ t('markdown_setting.Custom Whitelist') }</p>
-            <WhiteListInput customizable={false} />
+            <WhiteListInput customizable />
           </label>
         </div>
       </fieldset>