Render keybinding hints in the range picker (#3325)

* Render keybinding hints in the range picker

There was a regression in #3321 - some keybinding
hints stopped appearing due to exact string matching.

* Switch casing

Author: aerosol

assets/js/dashboard/datepicker.js

@@ -292,17 +292,6 @@ function DatePicker({ query, site, history }) {
 
     opts.date = opts.date ? formatISO(opts.date) : false;
 
-    const keybinds = {
-      'Today': 'D',
-      'Realtime': 'R',
-      'Last 7 days': 'W',
-      'Month to Date': 'M',
-      'Year to Date': 'Y',
-      'Last 12 months': 'L',
-      'Last 30 days': 'T',
-      'All time': 'A',
-    };
-
     return (
       <QueryLink
         to={{ from: false, to: false, period, ...opts }}
@@ -312,7 +301,8 @@ function DatePicker({ query, site, history }) {
           dark:hover:bg-gray-900 dark:hover:text-gray-100 flex items-center justify-between`}
       >
         {text}
-        <span className='font-normal'>{keybinds[text]}</span>
+
+        {opts.keybindHint ? (<span className='font-normal'>{opts.keybindHint}</span>) : null}
       </QueryLink>
     );
   }
@@ -329,23 +319,23 @@ function DatePicker({ query, site, history }) {
             font-medium text-gray-800 dark:text-gray-200 date-options"
           >
             <div className="py-1 border-b border-gray-200 dark:border-gray-500 date-option-group">
-              {renderLink("day", "Today")}
-              {renderLink("realtime", "Realtime")}
+              {renderLink("day", "Today", { keybindHint: 'D' })}
+              {renderLink("realtime", "Realtime", { keybindHint: 'R' })}
             </div>
             <div className="py-1 border-b border-gray-200 dark:border-gray-500 date-option-group">
-              {renderLink("7d", "Last 7 Days")}
-              {renderLink("30d", "Last 30 Days")}
+              {renderLink("7d", "Last 7 Days", { keybindHint: 'W' })}
+              {renderLink("30d", "Last 30 Days", { keybindHint: 'T' })}
             </div>
             <div className="py-1 border-b border-gray-200 dark:border-gray-500 date-option-group">
-              {renderLink('month', 'Month to Date')}
+              {renderLink('month', 'Month to Date', { keybindHint: 'M' })}
               {renderLink('month', 'Last Month', { date: lastMonth(site) })}
             </div>
             <div className="py-1 border-b border-gray-200 dark:border-gray-500 date-option-group">
-              {renderLink("year", "Year to Date")}
-              {renderLink("12mo", "Last 12 months")}
+              {renderLink("year", "Year to Date", { keybindHint: 'Y' })}
+              {renderLink("12mo", "Last 12 months", { keybindHint: 'L' })}
             </div>
             <div className="py-1 date-option-group">
-              {renderLink("all", "All time")}
+              {renderLink("all", "All time", { keybindHint: 'A' })}
               <span
                 onClick={() => setMode('calendar')}
                 onKeyPress={() => setMode('calendar')}