fix the press F1 to full screen issue (#5505)

config/src/main/java/com/alibaba/nacos/config/server/service/repository/embedded/DistributedDatabaseOperateImpl.java

@@ -406,7 +406,7 @@ public class DistributedDatabaseOperateImpl extends RequestProcessor4CP implemen
                 }
                 return RestResultUtils.success();
             } catch (Throwable ex) {
-                LogUtil.DEFAULT_LOG.error("data import has error : {}", ex);
+                LogUtil.DEFAULT_LOG.error("data import has error :", ex);
                 return RestResultUtils.failed(ex.getMessage());
             }
         });

console-ui/src/components/DiffEditorDialog/DiffEditorDialog.js

@@ -102,7 +102,6 @@ class DiffEditorDialog extends React.Component {
         )}
       </div>
     );
-    console.log(footer);
     return (
       <div>
         <Dialog

console-ui/src/pages/ConfigurationManagement/ConfigDetail/ConfigDetail.js

@@ -59,6 +59,7 @@ class ConfigDetail extends React.Component {
       checkedBeta: false,
       switchEncrypt: false,
       tag: [],
+      editorClass: 'editor-normal',
     };
     this.field = new Field(this);
     this.dataId = getParams('dataId') || 'yanlin';
@@ -78,6 +79,7 @@ class ConfigDetail extends React.Component {
   componentDidMount() {
     this.initData();
     this.getDataDetail();
+    this.initFullScreenEvent();
   }
 
   initData() {
@@ -90,6 +92,22 @@ class ConfigDetail extends React.Component {
     this.setState({ tag: [{ title: locale.official, key: 'normal' }] });
   }
 
+  initFullScreenEvent() {
+    document.body.addEventListener('keydown', e => {
+      if (e.key === 'F1') {
+        e.preventDefault();
+        this.setState({
+          editorClass: 'editor-full-screen',
+        });
+      }
+      if (e.key === 'Escape') {
+        this.setState({
+          editorClass: 'editor-normal',
+        });
+      }
+    });
+  }
+
   openLoading() {
     this.setState({
       loading: true,
@@ -262,7 +280,7 @@ class ConfigDetail extends React.Component {
 
   render() {
     const { locale = {} } = this.props;
-    const { configCompareVisible } = this.state;
+    const { configCompareVisible, editorClass } = this.state;
     const { init } = this.field;
     const formItemLayout = {
       labelCol: {
@@ -347,7 +365,7 @@ class ConfigDetail extends React.Component {
               <Input htmlType={'text'} readOnly {...init('md5')} />
             </FormItem>
             <FormItem label={locale.configuration} required {...formItemLayout}>
-              <div style={{ clear: 'both', height: 300 }} id="container" />
+              <div className={editorClass} id="container" />
             </FormItem>
           </Form>
           <Row>

console-ui/src/pages/ConfigurationManagement/ConfigDetail/index.scss

@@ -20,3 +20,16 @@
     font-size: 14px;
   }
 }
+
+.editor-full-screen {
+  width: 100%;
+  height: 100%;
+  position: fixed;
+  top: 0;
+  left: 0;
+  z-index: 100;
+}
+.editor-normal {
+  clear: both;
+  height: 300px;
+}

console-ui/src/pages/ConfigurationManagement/ConfigEditor/NewConfigEditor.js

@@ -87,6 +87,7 @@ class ConfigEditor extends React.Component {
       tagDataSource: [],
       subscriberDataSource: [],
       openAdvancedSettings: false,
+      editorClass: 'editor-normal',
     };
     this.successDialog = React.createRef();
     this.diffEditorDialog = React.createRef();
@@ -123,6 +124,7 @@ class ConfigEditor extends React.Component {
         }
         this.initMoacoEditor('text', '');
       }
+      this.initFullScreenEvent();
     });
   }
 
@@ -155,6 +157,22 @@ class ConfigEditor extends React.Component {
     }
   }
 
+  initFullScreenEvent() {
+    document.body.addEventListener('keydown', e => {
+      if (e.key === 'F1') {
+        e.preventDefault();
+        this.setState({
+          editorClass: 'editor-full-screen',
+        });
+      }
+      if (e.key === 'Escape') {
+        this.setState({
+          editorClass: 'editor-normal',
+        });
+      }
+    });
+  }
+
   createDiffCodeMirror(leftCode, rightCode) {
     const target = this.diffEditorDialog.current.getInstance();
     target.innerHTML = '';
@@ -441,6 +459,7 @@ class ConfigEditor extends React.Component {
       dataIdError = {},
       groupError = {},
       subscriberDataSource,
+      editorClass,
     } = this.state;
     const { locale = {} } = this.props;
 
@@ -574,7 +593,7 @@ class ConfigEditor extends React.Component {
                 </div>
               }
             >
-              <div style={{ clear: 'both', height: 300 }} id="container" />
+              <div id="container" className={editorClass} />
             </Form.Item>
           </Form>
           <Row>

console-ui/src/pages/ConfigurationManagement/ConfigEditor/index.scss

@@ -73,4 +73,16 @@
       font-size: 14px;
     }
   }
+  .editor-full-screen {
+    width: 100%;
+    height: 100%;
+    position: fixed;
+    top: 0;
+    left: 0;
+    z-index: 100;
+  }
+  .editor-normal {
+    clear: both;
+    height: 300px;
+  }
 }

console/src/main/resources/static/css/main.css

@@ -220,7 +220,7 @@
  * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
  * See the License for the specific language governing permissions and
  * limitations under the License.
- */.button-list{text-align:right}.button-list button{margin-left:1em;font-size:14px}
+ */.button-list{text-align:right}.button-list button{margin-left:1em;font-size:14px}.editor-full-screen{width:100%;height:100%;position:fixed;top:0;left:0;z-index:100}.editor-normal{clear:both;height:300px}
 
 /*!
  * Copyright 1999-2018 Alibaba Group Holding Ltd.
@@ -236,7 +236,7 @@
  * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
  * See the License for the specific language governing permissions and
  * limitations under the License.
- */.config-editor{padding:10px}.config-editor .func-title{overflow:hidden;height:50px;width:100%;font-weight:500;margin-bottom:9px;font-size:18px;line-height:36px;color:#73777a}.config-editor .form{display:table}.config-editor .form .next-form-item{display:table-row}.config-editor .form .next-form-item .next-form-item-label{white-space:nowrap;word-break:keep-all}.config-editor .form .next-form-item .next-form-item-control,.config-editor .form .next-form-item .next-select{width:100%}.config-editor .form .next-form-item .next-form-item-control,.config-editor .form .next-form-item .next-form-item-label{display:table-cell}.config-editor .form .next-form-item-control{padding-bottom:12px}.config-editor .form .next-checkbox-label{color:#73777a;font-weight:400}.config-editor .form .next-radio-label{color:#73777a}.config-editor .form .switch{color:#33cde5;cursor:pointer;user-select:none}.config-editor .form .help-label>*{display:inline-block}.config-editor .form .help-label>i{color:#1dc11d;margin:0 .25em}.config-editor .button-list{text-align:right}.config-editor .button-list button{margin-left:1em;font-size:14px}
+ */.config-editor{padding:10px}.config-editor .func-title{overflow:hidden;height:50px;width:100%;font-weight:500;margin-bottom:9px;font-size:18px;line-height:36px;color:#73777a}.config-editor .form{display:table}.config-editor .form .next-form-item{display:table-row}.config-editor .form .next-form-item .next-form-item-label{white-space:nowrap;word-break:keep-all}.config-editor .form .next-form-item .next-form-item-control,.config-editor .form .next-form-item .next-select{width:100%}.config-editor .form .next-form-item .next-form-item-control,.config-editor .form .next-form-item .next-form-item-label{display:table-cell}.config-editor .form .next-form-item-control{padding-bottom:12px}.config-editor .form .next-checkbox-label{color:#73777a;font-weight:400}.config-editor .form .next-radio-label{color:#73777a}.config-editor .form .switch{color:#33cde5;cursor:pointer;user-select:none}.config-editor .form .help-label>*{display:inline-block}.config-editor .form .help-label>i{color:#1dc11d;margin:0 .25em}.config-editor .button-list{text-align:right}.config-editor .button-list button{margin-left:1em;font-size:14px}.config-editor .editor-full-screen{width:100%;height:100%;position:fixed;top:0;left:0;z-index:100}.config-editor .editor-normal{clear:both;height:300px}
 
 /*!
  * Copyright 1999-2018 Alibaba Group Holding Ltd.
@@ -364,7 +364,7 @@
  * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
  * See the License for the specific language governing permissions and
  * limitations under the License.
- */.next-pagination-size-selector{position:static!important}.configuration-table{margin-bottom:20px}.next-sr-only{position:absolute;width:1px;height:1px;padding:0;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0;top:0;margin:-1px}.next-switch:after[dir=rtl]{content:" ";transition:all .1s linear;transform-origin:right center}.next-switch-medium[dir=rtl]:after,.next-switch-small[dir=rtl]:after{right:100%;transform:translateX(100%)}.next-switch-on[dir=rtl]>.next-switch-children{right:10px;left:auto;color:#fff}.next-switch-on[disabled][dir=rtl]:after{left:0;right:100%;box-shadow:1px 1px 3px 0 rgba(0,0,0,.12)}.next-switch-on.next-switch-small[dir=rtl]>.next-switch-children{right:6px;left:auto}.next-switch-off[dir=rtl]:after{right:0;transform:translateX(0);box-shadow:-1px 0 3px 0 rgba(0,0,0,.12)}.next-switch-off[dir=rtl]>.next-switch-children{left:10px;right:auto}.next-switch-off.next-switch-small[dir=rtl]>.next-switch-children{left:5px;right:auto}.next-switch{outline:none;text-align:left;transition:all .1s linear;overflow:hidden;cursor:pointer}.next-switch,.next-switch *,.next-switch :after,.next-switch :before{box-sizing:border-box}.next-switch:after{content:" ";transition:all .1s linear;transform-origin:left center}.next-switch-medium{width:56px;height:26px;border-radius:20px}.next-switch-medium:after{border:1px solid transparent;position:absolute;left:100%;transform:translateX(-100%);width:24px;height:24px;border-radius:20px;box-sizing:border-box}.next-switch-medium>.next-switch-children{font-size:12px;height:24px;line-height:24px}.next-switch-small{position:relative;display:inline-block;width:44px;height:22px}.next-switch-small,.next-switch-small:after{border:1px solid transparent;border-radius:20px}.next-switch-small:after{position:absolute;left:100%;transform:translateX(-100%);width:20px;height:20px;box-sizing:border-box}.next-switch-small>.next-switch-children{font-size:12px;position:absolute;height:20px;line-height:20px}.next-switch-on{background-color:#5584ff}.next-switch-on:after{box-shadow:1px 1px 3px 0 rgba(0,0,0,.12);background-color:#fff;border-color:transparent}.next-switch-on>.next-switch-children{left:10px}.next-switch-on:focus,.next-switch-on:hover{background-color:#3e71f7}.next-switch-on:focus:after,.next-switch-on:hover:after{background-color:#fff}.next-switch-on.next-switch-small>.next-switch-children{left:6px}.next-switch-on[disabled]{background-color:#ebecf0;cursor:not-allowed}.next-switch-on[disabled]:after{right:0;box-shadow:1px 1px 3px 0 rgba(0,0,0,.12);background-color:#f7f8fa;border-color:#e6e7eb}.next-switch-on[disabled]>.next-switch-children{color:#ccc}.next-switch-off{background-color:#fff;border-color:#c4c6cf}.next-switch-off:focus,.next-switch-off:hover{background-color:#f2f3f7;border-color:#c4c6cf}.next-switch-off:after{left:0;transform:translateX(0);box-shadow:1px 1px 3px 0 rgba(0,0,0,.12);background-color:#fff;border-color:transparent}.next-switch-off:after:focus,.next-switch-off:after:hover{background-color:#fff}.next-switch-off>.next-switch-children{right:10px;color:#999}.next-switch-off[disabled]{background-color:#f7f8fa;cursor:not-allowed}.next-switch-off[disabled]:after{box-shadow:1px 1px 3px 0 rgba(0,0,0,.12);background-color:#f7f8fa;border-color:#e6e7eb}.next-switch-off[disabled]>.next-switch-children{color:#c4c6cf}.next-switch-off.next-switch-small>.next-switch-children{right:5px}
+ */.next-pagination-size-selector{position:static!important}.configuration-table{margin-bottom:20px}.next-sr-only{position:absolute;width:1px;height:1px;padding:0;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0;top:0;margin:-1px}.next-switch:after[dir=rtl]{content:" ";transition:all .1s linear;transform-origin:right center}.next-switch-medium[dir=rtl]:after,.next-switch-small[dir=rtl]:after{right:100%;transform:translateX(100%)}.next-switch-on[dir=rtl]>.next-switch-children{right:10px;left:auto;color:#fff}.next-switch-on[disabled][dir=rtl]:after{left:0;right:100%;box-shadow:1px 1px 3px 0 rgba(0,0,0,.12)}.next-switch-on.next-switch-small[dir=rtl]>.next-switch-children{right:6px;left:auto}.next-switch-off[dir=rtl]:after{right:0;transform:translateX(0);box-shadow:-1px 0 3px 0 rgba(0,0,0,.12)}.next-switch-off[dir=rtl]>.next-switch-children{left:10px;right:auto}.next-switch-off.next-switch-small[dir=rtl]>.next-switch-children{left:5px;right:auto}.next-switch{outline:none;text-align:left;transition:all .1s linear;overflow:hidden;cursor:pointer;user-select:none}.next-switch,.next-switch *,.next-switch :after,.next-switch :before{box-sizing:border-box}.next-switch:after{content:" ";transition:all .1s linear;transform-origin:left center}.next-switch-medium{width:56px;height:26px;border-radius:20px}.next-switch-medium:after{border:1px solid transparent;position:absolute;left:100%;transform:translateX(-100%);width:24px;height:24px;border-radius:20px;box-sizing:border-box}.next-switch-medium>.next-switch-children{font-size:12px;height:24px;line-height:24px}.next-switch-small{position:relative;display:inline-block;width:44px;height:22px}.next-switch-small,.next-switch-small:after{border:1px solid transparent;border-radius:20px}.next-switch-small:after{position:absolute;left:100%;transform:translateX(-100%);width:20px;height:20px;box-sizing:border-box}.next-switch-small>.next-switch-children{font-size:12px;position:absolute;height:20px;line-height:20px}.next-switch-on{background-color:#5584ff}.next-switch-on:after{box-shadow:1px 1px 3px 0 rgba(0,0,0,.12);background-color:#fff;border-color:transparent}.next-switch-on>.next-switch-children{left:10px}.next-switch-on:focus,.next-switch-on:hover{background-color:#3e71f7}.next-switch-on:focus:after,.next-switch-on:hover:after{background-color:#fff}.next-switch-on.next-switch-small>.next-switch-children{left:6px}.next-switch-on[disabled]{background-color:#ebecf0;cursor:not-allowed}.next-switch-on[disabled]:after{right:0;box-shadow:1px 1px 3px 0 rgba(0,0,0,.12);background-color:#f7f8fa;border-color:#e6e7eb}.next-switch-on[disabled]>.next-switch-children{color:#ccc}.next-switch-off{background-color:#fff;border-color:#c4c6cf}.next-switch-off:focus,.next-switch-off:hover{background-color:#f2f3f7;border-color:#c4c6cf}.next-switch-off:after{left:0;transform:translateX(0);box-shadow:1px 1px 3px 0 rgba(0,0,0,.12);background-color:#fff;border-color:transparent}.next-switch-off:after:focus,.next-switch-off:after:hover{background-color:#fff}.next-switch-off>.next-switch-children{right:10px;color:#999}.next-switch-off[disabled]{background-color:#f7f8fa;cursor:not-allowed}.next-switch-off[disabled]:after{box-shadow:1px 1px 3px 0 rgba(0,0,0,.12);background-color:#f7f8fa;border-color:#e6e7eb}.next-switch-off[disabled]>.next-switch-children{color:#c4c6cf}.next-switch-off.next-switch-small>.next-switch-children{right:5px}
 
 /*!
  * Copyright 1999-2018 Alibaba Group Holding Ltd.