Fix the breakpoint panel's empty state (replayio#4699)

hbenl · Nov 29, 2021 · 9735e28 · 9735e28
1 parent f55fce3
commit 9735e28
Show file tree

Hide file tree

Showing 2 changed files with 16 additions and 4 deletions.
diff --git a/src/devtools/client/debugger/src/components/SecondaryPanes/Breakpoints/index.js b/src/devtools/client/debugger/src/components/SecondaryPanes/Breakpoints/index.js
@@ -14,8 +14,9 @@ import actions from "../../../actions";
 import { createHeadlessEditor } from "../../../utils/editor/create-editor";
 
 import { getLocationKey, sortSelectedBreakpoints } from "../../../utils/breakpoint";
+import MaterialIcon from "ui/components/shared/MaterialIcon";
 
-import { getBreakpointSources } from "../../../selectors";
+import { getBreakpointSources, getSelectedSource } from "../../../selectors";
 
 class Breakpoints extends Component {
   headlessEditor;
@@ -40,12 +41,19 @@ class Breakpoints extends Component {
   }
 
   renderBreakpoints() {
-    const { breakpointSources } = this.props;
+    const { breakpointSources, selectedSource } = this.props;
 
     if (!breakpointSources.length) {
       return (
-        <div className="p-2 whitespace-pre-wrap text-sm">
-          There is nothing here yet. Try adding a breakpoint in a source file.
+        <div className="onboarding-text p-3 space-y-3 text-gray-500 text-base whitespace-normal">
+          <MaterialIcon className="large-icon">info</MaterialIcon>
+          <p>{`You haven't added any print statements yet.`}</p>
+          {selectedSource ? (
+            <>
+              <p>{`Try clicking on a line number in the editor.`}</p>
+              <img src="/images/comment-onboarding-arrow.svg" className="arrow" />
+            </>
+          ) : null}
         </div>
       );
     }
@@ -86,6 +94,7 @@ class Breakpoints extends Component {
 
 const mapStateToProps = state => ({
   breakpointSources: getBreakpointSources(state),
+  selectedSource: getSelectedSource(state),
 });
 
 export default connect(mapStateToProps, {

diff --git a/src/devtools/client/debugger/src/reducers/source.d.ts b/src/devtools/client/debugger/src/reducers/source.d.ts
@@ -0,0 +1,3 @@
+import { UIState } from "ui/state";
+
+export function getSelectedSource(state: UIState);