feat: Add tooltip to cloud service "Open Dashboard" button (#27)

packages/noodl-editor/src/editor/src/constants/Keybindings.ts

@@ -2,6 +2,11 @@ import { Keybinding } from '@noodl-utils/keyboard/Keybinding';
 import { KeyCode, KeyMod } from '@noodl-utils/keyboard/KeyCode';
 
 export namespace Keybindings {
+  export const SEARCH = new Keybinding(KeyMod.CtrlCmd, KeyCode.KEY_F);
+
+  export const CLOUD_SERVICE_OPEN_DASHBOARD = new Keybinding(KeyMod.CtrlCmd, KeyMod.Shift, KeyCode.KEY_P);
+  export const CLOUD_SERVICE_OPEN_DASHBOARD_BROWSER = new Keybinding(KeyMod.CtrlCmd, KeyCode.KEY_P);
+
   export const REFRESH_PREVIEW = new Keybinding(KeyMod.CtrlCmd, KeyCode.KEY_R);
   export const OPEN_DEVTOOLS = new Keybinding(KeyMod.CtrlCmd, KeyCode.KEY_D);
   export const OPEN_CLOUD_DEVTOOLS = new Keybinding(KeyMod.CtrlCmd, KeyMod.Shift, KeyCode.KEY_R);

packages/noodl-editor/src/editor/src/router.setup.ts

@@ -1,7 +1,6 @@
 import { AppRegistry } from '@noodl-models/app_registry';
 import { SidebarModel } from '@noodl-models/sidebar';
-import { Keybinding } from '@noodl-utils/keyboard/Keybinding';
+import { Keybindings } from '@noodl-constants/Keybindings';
-import { KeyCode, KeyMod } from '@noodl-utils/keyboard/KeyCode';
 
 import { IconName } from '@noodl-core-ui/components/common/Icon';
 
@@ -69,7 +68,7 @@ export function installSidePanel({ isLesson }: SetupEditorOptions) {
   SidebarModel.instance.register({
     id: 'search',
     name: 'Search',
-    fineType: new Keybinding(KeyMod.CtrlCmd, KeyCode.KEY_F).label,
+    fineType: Keybindings.SEARCH.label,
     order: 2,
     icon: IconName.Search,
     panel: SearchPanel

packages/noodl-editor/src/editor/src/views/panels/CloudServicePanel/CloudServiceCard/CloudServiceCard.tsx

@@ -1,13 +1,16 @@
 import classNames from 'classnames';
 import React, { useEffect, useRef, useState } from 'react';
 
+import { Keybindings } from '@noodl-constants/Keybindings';
 import { Environment } from '@noodl-models/CloudServices';
 import ParseDashboardServer from '@noodl-utils/parsedashboardserver';
 
 import { Icon, IconName, IconSize } from '@noodl-core-ui/components/common/Icon';
 import { IconButton, IconButtonState, IconButtonVariant } from '@noodl-core-ui/components/inputs/IconButton';
 import { PrimaryButton, PrimaryButtonSize, PrimaryButtonVariant } from '@noodl-core-ui/components/inputs/PrimaryButton';
+import { DialogRenderDirection } from '@noodl-core-ui/components/layout/BaseDialog';
 import { Collapsible } from '@noodl-core-ui/components/layout/Collapsible';
+import { Tooltip } from '@noodl-core-ui/components/popups/Tooltip';
 import { Label, LabelSpacingSize } from '@noodl-core-ui/components/typography/Label';
 import { Text, TextType } from '@noodl-core-ui/components/typography/Text';
 
@@ -118,12 +121,18 @@ export function CloudServiceCard({
           </div>
 
           {isEditorEnvironment && (
+            <Tooltip
+              content="Open the Parse Dashboard"
+              fineType={`${Keybindings.CLOUD_SERVICE_OPEN_DASHBOARD.label} in window or ${Keybindings.CLOUD_SERVICE_OPEN_DASHBOARD_BROWSER.label} to open in browsers`}
+              renderDirection={DialogRenderDirection.Below}
+            >
               <PrimaryButton
                 label="Open dashboard"
                 size={PrimaryButtonSize.Small}
                 onClick={onDashboardClicked}
                 isGrowing
               />
+            </Tooltip>
           )}
         </div>
       </div>