fix: monaco polish (#17908)

* fix: monaco cleaning

* chore: tsc

Co-authored-by: drdelambre <drdelambre>

ui/src/external/monaco.flux.hotkeys.ts

@@ -61,11 +61,10 @@ export function comments(editor: EditorType) {
 }
 
 export function submit(editor: EditorType, submitFn: () => any) {
-  editor.onKeyUp(evt => {
+  editor.addCommand(
-    const {ctrlKey, code} = evt
+    window.monaco.KeyMod.CtrlCmd | window.monaco.KeyCode.Enter,
-
+    () => {
-    if (ctrlKey && code === 'Enter') {
       submitFn()
     }
-  })
+  )
 }

ui/src/timeMachine/components/EditorShortcutsTooltip.scss

@@ -1,15 +1,21 @@
 .editor-shortcuts {
   width: 250px;
+
+  h5 {
+      margin: 8px 0 12px;
+  }
 }
 
 .editor-shortcuts--body {
+    font-size: 14px;
+    line-height: 16px;
   dt {
-    float: left;
     padding-right: $ix-marg-a;
     font-weight: 700;
     color: $g18-cloud;
+    margin-top: 8px;
   }
   dd {
-    white-space: nowrap;
+    display: block
   }
-}
+}

ui/src/timeMachine/components/EditorShortcutsTooltip.tsx

@@ -12,8 +12,10 @@ const EditorShortcutsTooltip: FC = () => {
         <div className="editor-shortcuts">
           <h5>Shortcuts</h5>
           <dl className="editor-shortcuts--body">
-            <dt>Ctl-/:</dt> <dd>Toggle comment for line or lines</dd>
+            <dt>[Ctl or ⌘] + /:</dt>
-            <dt>Ctl-Enter:</dt> <dd>Submit Script</dd>
+            <dd>Toggle comment for line or lines</dd>
+            <dt>[Ctl or ⌘] + [Enter]:</dt>
+            <dd>Submit Script</dd>
           </dl>
         </div>
       }

ui/src/timeMachine/components/SubmitQueryButton.tsx

@@ -31,22 +31,7 @@ interface DispatchProps {
 
 type Props = StateProps & DispatchProps
 
-interface State {
+class SubmitQueryButton extends PureComponent<Props> {
-  didClick: boolean
-}
-
-class SubmitQueryButton extends PureComponent<Props, State> {
-  public state: State = {didClick: false}
-
-  public componentDidUpdate(prevProps: Props) {
-    if (
-      prevProps.queryStatus === RemoteDataState.Loading &&
-      this.props.queryStatus === RemoteDataState.Done
-    ) {
-      this.setState({didClick: false})
-    }
-  }
-
   public render() {
     return (
       <Button
@@ -62,14 +47,12 @@ class SubmitQueryButton extends PureComponent<Props, State> {
 
   private get buttonStatus(): ComponentStatus {
     const {queryStatus, submitButtonDisabled} = this.props
-    const {didClick} = this.state
 
     if (submitButtonDisabled) {
       return ComponentStatus.Disabled
     }
 
-    if (queryStatus === RemoteDataState.Loading && didClick) {
+    if (queryStatus === RemoteDataState.Loading) {
-      // Only show loading state for button if it was just clicked
       return ComponentStatus.Loading
     }
 
@@ -78,7 +61,6 @@ class SubmitQueryButton extends PureComponent<Props, State> {
 
   private handleClick = (): void => {
     this.props.onSubmit()
-    this.setState({didClick: true})
   }
 }