Explore: remove closing brace with opening brace

public/app/containers/Explore/slate-plugins/braces.test.ts

@@ -53,4 +53,22 @@ describe('braces', () => {
     handler(event, change);
     expect(Plain.serialize(change.value)).toEqual('sum(rate(metric{namespace="dev", cluster="c1"}[2m]))');
   });
+
+  it('removes closing brace when opening brace is removed', () => {
+    const change = Plain.deserialize('time()').change();
+    let event;
+    change.move(5);
+    event = new window.KeyboardEvent('keydown', { key: 'Backspace' });
+    handler(event, change);
+    expect(Plain.serialize(change.value)).toEqual('time');
+  });
+
+  it('keeps closing brace when opening brace is removed and inner values exist', () => {
+    const change = Plain.deserialize('time(value)').change();
+    let event;
+    change.move(5);
+    event = new window.KeyboardEvent('keydown', { key: 'Backspace' });
+    const handled = handler(event, change);
+    expect(handled).toBeFalsy();
+  });
 });

public/app/containers/Explore/slate-plugins/braces.ts

@@ -43,6 +43,22 @@ export default function BracesPlugin() {
           return true;
         }
 
+        case 'Backspace': {
+          const text = value.anchorText.text;
+          const offset = value.anchorOffset;
+          const previousChar = text[offset - 1];
+          const nextChar = text[offset];
+          if (BRACES[previousChar] && BRACES[previousChar] === nextChar) {
+            event.preventDefault();
+            // Remove closing brace if directly following
+            change
+              .deleteBackward()
+              .deleteForward()
+              .focus();
+            return true;
+          }
+        }
+
         default: {
           break;
         }