From 44ca05272a2e70417341825722f5f4e61c388fc1 Mon Sep 17 00:00:00 2001
From: Ivana Huckova <30407135+ivanahuckova@users.noreply.github.com>
Date: Thu, 21 May 2020 14:51:18 +0200
Subject: [PATCH] Query history: Add keyboard shortcut support for commenting
 (#24736)

* Shorten filter history label

* Add keyboard shortcuts for update comment in Query history

* Add test coverage for new keyboard shortcuts

* Update changed aria-label in tests

* Add test scenario for enter and ctr key
---
 .../RichHistory/RichHistoryCard.test.tsx      | 34 +++++++++++++++++++
 .../explore/RichHistory/RichHistoryCard.tsx   | 22 +++++++++---
 .../RichHistory/RichHistoryQueriesTab.tsx     |  7 ++--
 3 files changed, 53 insertions(+), 10 deletions(-)

diff --git a/public/app/features/explore/RichHistory/RichHistoryCard.test.tsx b/public/app/features/explore/RichHistory/RichHistoryCard.test.tsx
index 25b12b9580b..a93271d9185 100644
--- a/public/app/features/explore/RichHistory/RichHistoryCard.test.tsx
+++ b/public/app/features/explore/RichHistory/RichHistoryCard.test.tsx
@@ -100,6 +100,40 @@ describe('RichHistoryCard', () => {
       expect(wrapper.find({ title: 'Add comment' })).toHaveLength(1);
       expect(wrapper.find({ title: 'Edit comment' })).toHaveLength(0);
     });
+    it('should open update comment form when edit comment button clicked', () => {
+      const wrapper = setup({ query: starredQueryWithComment });
+      const editCommentButton = wrapper.find({ title: 'Edit comment' });
+      editCommentButton.simulate('click');
+      expect(wrapper.find({ 'aria-label': 'Update comment form' })).toHaveLength(1);
+    });
+    it('should close update comment form when escape key pressed', () => {
+      const wrapper = setup({ query: starredQueryWithComment });
+      const editCommentButton = wrapper.find({ title: 'Edit comment' });
+      editCommentButton.simulate('click');
+      wrapper.simulate('keydown', { key: 'Escape' });
+      expect(wrapper.find({ 'aria-label': 'Update comment form' })).toHaveLength(0);
+    });
+    it('should close update comment form when enter and shift keys pressed', () => {
+      const wrapper = setup({ query: starredQueryWithComment });
+      const editCommentButton = wrapper.find({ title: 'Edit comment' });
+      editCommentButton.simulate('click');
+      wrapper.simulate('keydown', { key: 'Enter', shiftKey: true });
+      expect(wrapper.find({ 'aria-label': 'Update comment form' })).toHaveLength(0);
+    });
+    it('should close update comment form when enter and ctrl keys pressed', () => {
+      const wrapper = setup({ query: starredQueryWithComment });
+      const editCommentButton = wrapper.find({ title: 'Edit comment' });
+      editCommentButton.simulate('click');
+      wrapper.simulate('keydown', { key: 'Enter', ctrlKey: true });
+      expect(wrapper.find({ 'aria-label': 'Update comment form' })).toHaveLength(0);
+    });
+    it('should not close update comment form when enter key pressed', () => {
+      const wrapper = setup({ query: starredQueryWithComment });
+      const editCommentButton = wrapper.find({ title: 'Edit comment' });
+      editCommentButton.simulate('click');
+      wrapper.simulate('keydown', { key: 'Enter', shiftKey: false });
+      expect(wrapper.find({ 'aria-label': 'Update comment form' })).toHaveLength(1);
+    });
   });
 
   describe('starring', () => {
diff --git a/public/app/features/explore/RichHistory/RichHistoryCard.tsx b/public/app/features/explore/RichHistory/RichHistoryCard.tsx
index 43c689a4a78..04aa14d5522 100644
--- a/public/app/features/explore/RichHistory/RichHistoryCard.tsx
+++ b/public/app/features/explore/RichHistory/RichHistoryCard.tsx
@@ -195,16 +195,26 @@ export function RichHistoryCard(props: Props) {
 
   const onUpdateComment = () => {
     updateRichHistory(query.ts, 'comment', comment);
-    toggleActiveUpdateComment();
+    setActiveUpdateComment(false);
   };
 
   const onCancelUpdateComment = () => {
-    toggleActiveUpdateComment();
+    setActiveUpdateComment(false);
     setComment(query.comment);
   };
 
+  const onKeyDown = (keyEvent: React.KeyboardEvent) => {
+    if (keyEvent.key === 'Enter' && (keyEvent.shiftKey || keyEvent.ctrlKey)) {
+      onUpdateComment();
+    }
+
+    if (keyEvent.key === 'Escape') {
+      onCancelUpdateComment();
+    }
+  };
+
   const updateComment = (
-    <div className={styles.updateCommentContainer}>
+    <div className={styles.updateCommentContainer} aria-label={comment ? 'Update comment form' : 'Add comment form'}>
       <TextArea
         value={comment}
         placeholder={comment ? undefined : 'An optional description of what the query does.'}
@@ -212,7 +222,9 @@ export function RichHistoryCard(props: Props) {
         className={styles.textArea}
       />
       <div className={styles.commentButtonRow}>
-        <Button onClick={onUpdateComment}>Save comment</Button>
+        <Button onClick={onUpdateComment} aria-label="Submit button">
+          Save comment
+        </Button>
         <Button variant="secondary" onClick={onCancelUpdateComment}>
           Cancel
         </Button>
@@ -240,7 +252,7 @@ export function RichHistoryCard(props: Props) {
   );
 
   return (
-    <div className={styles.queryCard}>
+    <div className={styles.queryCard} onKeyDown={onKeyDown}>
       <div className={styles.cardRow}>
         <div className={styles.datasourceContainer}>
           <img src={dsImg} aria-label="Data source icon" />
diff --git a/public/app/features/explore/RichHistory/RichHistoryQueriesTab.tsx b/public/app/features/explore/RichHistory/RichHistoryQueriesTab.tsx
index d0bf8d2aaa2..812004ae107 100644
--- a/public/app/features/explore/RichHistory/RichHistoryQueriesTab.tsx
+++ b/public/app/features/explore/RichHistory/RichHistoryQueriesTab.tsx
@@ -40,7 +40,7 @@ const getStyles = stylesFactory((theme: GrafanaTheme, height: number) => {
 
   /* 134px is based on the width of the Query history tabs bar, so the content is aligned to right side of the tab */
   const cardWidth = '100% - 134px';
-  const sliderHeight = `${height - 200}px`;
+  const sliderHeight = `${height - 180}px`;
   return {
     container: css`
       display: flex;
@@ -161,10 +161,7 @@ export function RichHistoryQueriesTab(props: Props) {
     <div className={styles.container}>
       <div className={styles.containerSlider}>
         <div className={styles.slider}>
-          <div className="label-slider">
-            Filter history <br />
-            between
-          </div>
+          <div className="label-slider">Filter history</div>
           <div className="label-slider">{mapNumbertoTimeInSlider(sliderRetentionFilter[0])}</div>
           <div className="slider">
             <Slider