Merge pull request #1768 from weseek/support/bstr4-full-text-search-page

Support/bstr4 full text search page

src/client/js/components/Admin/ElasticsearchManagement/ElasticsearchManagement.jsx

@@ -147,7 +147,7 @@ class ElasticsearchManagement extends React.Component {
     return (
       <>
         <div className="row">
-          <div className="col-sm-12">
+          <div className="col-md-12">
             <StatusTable
               isConfigured={isConfigured}
               isConnected={isConnected}
@@ -162,8 +162,8 @@ class ElasticsearchManagement extends React.Component {
 
         {/* Controls */}
         <div className="row">
-          <label className="col-sm-3 col-form-label">{ t('full_text_search_management.reconnect') }</label>
-          <div className="col-sm-6">
+          <label className="col-md-3 col-form-label">{ t('full_text_search_management.reconnect') }</label>
+          <div className="col-md-6">
             <ReconnectControls
               isConfigured={isConfigured}
               isConnected={isConnected}
@@ -175,8 +175,8 @@ class ElasticsearchManagement extends React.Component {
         <hr />
 
         <div className="row">
-          <label className="col-sm-3 col-form-label">{ t('full_text_search_management.normalize') }</label>
-          <div className="col-sm-6">
+          <label className="col-md-3 col-form-label">{ t('full_text_search_management.normalize') }</label>
+          <div className="col-md-6">
             <NormalizeIndicesControls
               isRebuildingProcessing={isRebuildingProcessing}
               isRebuildingCompleted={isRebuildingCompleted}
@@ -189,8 +189,8 @@ class ElasticsearchManagement extends React.Component {
         <hr />
 
         <div className="row">
-          <label className="col-sm-3 col-form-label">{ t('full_text_search_management.rebuild') }</label>
-          <div className="col-sm-6">
+          <label className="col-md-3 col-form-label">{ t('full_text_search_management.rebuild') }</label>
+          <div className="col-md-6">
             <RebuildIndexControls
               isRebuildingProcessing={isRebuildingProcessing}
               isRebuildingCompleted={isRebuildingCompleted}

src/client/js/components/Admin/ElasticsearchManagement/NormalizeIndicesControls.jsx

@@ -15,7 +15,7 @@ class NormalizeIndicesControls extends React.PureComponent {
       <>
         <button
           type="submit"
-          className={`btn btn-outline ${isEnabled ? 'btn-info' : 'btn-light'}`}
+          className={`btn ${isEnabled ? 'btn-outline-info' : 'btn-outline-secondary'}`}
           onClick={() => { this.props.onNormalizingRequested() }}
           disabled={!isEnabled}
         >

src/client/js/components/Admin/ElasticsearchManagement/RebuildIndexControls.jsx

@@ -83,7 +83,7 @@ class RebuildIndexControls extends React.Component {
           { t('full_text_search_management.rebuild_button') }
         </button>
 
-        <p className="help-block">
+        <p className="form-text text-muted">
           { t('full_text_search_management.rebuild_description_1') }<br />
           { t('full_text_search_management.rebuild_description_2') }<br />
         </p>

src/client/js/components/Admin/ElasticsearchManagement/ReconnectControls.jsx

@@ -15,7 +15,7 @@ class ReconnectControls extends React.PureComponent {
       <>
         <button
           type="submit"
-          className={`btn btn-outline ${isEnabled ? 'btn-success' : 'btn-light'}`}
+          className={`btn ${isEnabled ? 'btn-outline-success' : 'btn-outline-secondary'}`}
           onClick={() => { this.props.onReconnectingRequested() }}
           disabled={!isEnabled}
         >

src/client/js/components/Admin/ElasticsearchManagement/StatusTable.jsx

@@ -11,7 +11,7 @@ class StatusTable extends React.PureComponent {
 
     const aliasLabels = aliases.map((aliasName) => {
       return (
-        <span key={`badge-${indexName}-${aliasName}`} className="badge badge-primary mr-2">
+        <span key={`badge-${indexName}-${aliasName}`} className="badge badge-pill badge-primary mr-2">
           <i className="icon-tag"></i> {aliasName}
         </span>
       );
@@ -82,7 +82,7 @@ class StatusTable extends React.PureComponent {
       <div className="row">
         { Object.keys(indexNameToDataMap).map((indexName) => {
           return (
-            <div key={`col-${indexName}`} className="col-xs-6">
+            <div key={`col-${indexName}`} className="col-6">
               { this.renderIndexInfoPanel(indexName, indexNameToDataMap[indexName], indexNameToAliasMap[indexName]) }
             </div>
           );
@@ -96,39 +96,37 @@ class StatusTable extends React.PureComponent {
     const { isConfigured, isConnected, isNormalized } = this.props;
 
 
-    let connectionStatusLabel = <span className="badge badge-default">――</span>;
+    let connectionStatusLabel = <span className="badge badge-pill badge-secondary">――</span>;
     if (isConfigured != null && !isConfigured) {
-      connectionStatusLabel = <span className="badge badge-default">{ t('full_text_search_management.connection_status_label_unconfigured') }</span>;
+      connectionStatusLabel = <span className="badge badge-pill badge-secondary">{t('full_text_search_management.connection_status_label_unconfigured')}</span>;
     }
     else if (isConnected != null) {
       connectionStatusLabel = isConnected
-        ? <span className="badge badge-success">{ t('full_text_search_management.connection_status_label_connected') }</span>
-        : <span className="badge badge-danger">{ t('full_text_search_management.connection_status_label_disconnected') }</span>;
+        ? <span className="badge badge-pill badge-success">{ t('full_text_search_management.connection_status_label_connected') }</span>
+        : <span className="badge badge-pill badge-danger">{ t('full_text_search_management.connection_status_label_disconnected') }</span>;
     }
 
-    let indicesStatusLabel = <span className="label badge-default">――</span>;
+    let indicesStatusLabel = <span className="badge badge-pill badge-secondary">――</span>;
     if (isNormalized != null) {
       indicesStatusLabel = isNormalized
-        ? <span className="badge badge-info">{ t('full_text_search_management.indices_status_label_normalized') }</span>
-        : <span className="badge badge-warning">{ t('full_text_search_management.indices_status_label_unnormalized') }</span>;
+        ? <span className="badge badge-pill badge-info">{ t('full_text_search_management.indices_status_label_normalized') }</span>
+        : <span className="badge badge-pill badge-warning">{ t('full_text_search_management.indices_status_label_unnormalized') }</span>;
     }
 
     return (
       <table className="table table-bordered">
         <tbody>
           <tr>
-            <th>{ t('full_text_search_management.connection_status') }</th>
-            <td>{connectionStatusLabel}</td>
+            <th className="w-25">{t('full_text_search_management.connection_status')}</th>
+            <td className="w-75">{connectionStatusLabel}</td>
           </tr>
           <tr>
-            <th>{ t('full_text_search_management.indices_status') }</th>
-            <td>{indicesStatusLabel}</td>
+            <th className="w-25">{t('full_text_search_management.indices_status')}</th>
+            <td className="w-75">{indicesStatusLabel}</td>
           </tr>
           <tr>
-            <th className="col-sm-4">{ t('full_text_search_management.indices_summary') }</th>
-            <td className="p-4">
-              { this.renderIndexInfoPanels() }
-            </td>
+            <th className="w-25">{t('full_text_search_management.indices_summary')}</th>
+            <td className="p-4 w-75">{this.renderIndexInfoPanels()}</td>
           </tr>
         </tbody>
       </table>

src/client/js/components/PageComment/Comment.jsx

@@ -109,7 +109,7 @@ class Comment extends React.PureComponent {
 
   getRevisionLabelClassName() {
     return `page-comment-revision badge ${
-      this.isCurrentRevision() ? 'badge-primary' : 'badge-default'}`;
+      this.isCurrentRevision() ? 'badge-primary' : 'badge-secondary'}`;
   }
 
   editBtnClickedHandler() {