From ec47c93ea034c72ab30b26c43cd5a658c91795c3 Mon Sep 17 00:00:00 2001
From: Benjamin Elo <beneloca@fb.com>
Date: Wed, 28 Aug 2019 05:03:04 -0700
Subject: [PATCH] Display class name of view if available

Summary: This commit provides the navigation plugin with more value, showing the ViewController of the rendered view.This allows the user to quickly start working on that view controller once they have the name. This works on nearly all views in the iOS app.

Reviewed By: passy

Differential Revision: D17071558

fbshipit-source-id: 22a22d4a0991e9f20bc85eb106a98a42214d4d0c
---
 .../components/NavigationInfoBox.js           | 61 +++++++++++--------
 src/plugins/navigation/components/Timeline.js |  3 +-
 src/plugins/navigation/flow-types.js          |  1 +
 src/plugins/navigation/index.js               |  7 ++-
 4 files changed, 44 insertions(+), 28 deletions(-)

diff --git a/src/plugins/navigation/components/NavigationInfoBox.js b/src/plugins/navigation/components/NavigationInfoBox.js
index 4e1001ceb..e739c8ac4 100644
--- a/src/plugins/navigation/components/NavigationInfoBox.js
+++ b/src/plugins/navigation/components/NavigationInfoBox.js
@@ -13,6 +13,7 @@ import {IconButton, FavoriteButton} from './';
 type Props = {|
   isBookmarked: boolean,
   uri: ?string,
+  className: ?string,
   onNavigate: (query: string) => void,
   onFavorite: (query: string) => void,
 |};
@@ -53,40 +54,50 @@ const NavigationInfoBoxContainer = styled('div')({
 });
 
 export default (props: Props) => {
-  const {uri, isBookmarked} = props;
-  if (uri == null) {
+  const {uri, isBookmarked, className} = props;
+  if (uri == null && className == null) {
     return (
       <NavigationInfoBoxContainer>
         <div className="nav-info-text">View has no URI information</div>
       </NavigationInfoBoxContainer>
     );
   } else {
-    const parameters = parseURIParameters(uri);
+    const parameters = uri != null ? parseURIParameters(uri) : null;
     return (
       <NavigationInfoBoxContainer>
-        <div className="icon-container">
-          <FavoriteButton
-            highlighted={isBookmarked}
-            size={16}
-            onClick={() => props.onFavorite(uri)}
-          />
-          <IconButton
-            icon="eye"
-            size={16}
-            onClick={() => props.onNavigate(uri)}
-          />
-        </div>
-        <div className="nav-info-text bold">uri:</div>
-        <div className="nav-info-text selectable">{uri}</div>
-        {parameters.size > 0 ? (
+        {uri != null ? (
           <>
-            <div className="nav-info-text bold">parameters:</div>
-            {Array.from(parameters, ([key, value]) => (
-              <div key={key} className="nav-info-text selectable">
-                {key}
-                {value ? `: ${value}` : ''}
-              </div>
-            ))}
+            <div className="icon-container">
+              <FavoriteButton
+                highlighted={isBookmarked}
+                size={16}
+                onClick={() => props.onFavorite(uri)}
+              />
+              <IconButton
+                icon="eye"
+                size={16}
+                onClick={() => props.onNavigate(uri)}
+              />
+            </div>
+            <div className="nav-info-text bold">uri:</div>
+            <div className="nav-info-text selectable">{uri}</div>
+            {parameters != null && parameters.size > 0 ? (
+              <>
+                <div className="nav-info-text bold">parameters:</div>
+                {Array.from(parameters, ([key, value]) => (
+                  <div key={key} className="nav-info-text selectable">
+                    {key}
+                    {value ? `: ${value}` : ''}
+                  </div>
+                ))}
+              </>
+            ) : null}
+          </>
+        ) : null}
+        {className != null ? (
+          <>
+            <div className="nav-info-text bold">Class Name:</div>
+            <div className="nav-info-text selectable">{className}</div>
           </>
         ) : null}
       </NavigationInfoBoxContainer>
diff --git a/src/plugins/navigation/components/Timeline.js b/src/plugins/navigation/components/Timeline.js
index 8db6fa54d..3191f6bd8 100644
--- a/src/plugins/navigation/components/Timeline.js
+++ b/src/plugins/navigation/components/Timeline.js
@@ -56,7 +56,7 @@ export default (props: Props) => {
       {events.map((event: NavigationEvent, idx) => {
         return (
           <NavigationEventContainer>
-            {event.uri != null ? (
+            {event.uri != null || event.className != null ? (
               <ScreenshotContainer>
                 {event.screenshot != null ? (
                   <img src={event.screenshot} />
@@ -72,6 +72,7 @@ export default (props: Props) => {
               isBookmarked={
                 event.uri != null ? bookmarks.has(event.uri) : false
               }
+              className={event.className}
               uri={event.uri}
               onNavigate={onNavigate}
               onFavorite={onFavorite}
diff --git a/src/plugins/navigation/flow-types.js b/src/plugins/navigation/flow-types.js
index 2a0816915..47f8418d3 100644
--- a/src/plugins/navigation/flow-types.js
+++ b/src/plugins/navigation/flow-types.js
@@ -27,6 +27,7 @@ export type PersistedState = {|
 export type NavigationEvent = {|
   date: ?Date,
   uri: ?URI,
+  className: ?string,
   screenshot: ?string,
 |};
 
diff --git a/src/plugins/navigation/index.js b/src/plugins/navigation/index.js
index 7fcb8e8bd..2ac75620f 100644
--- a/src/plugins/navigation/index.js
+++ b/src/plugins/navigation/index.js
@@ -75,14 +75,17 @@ export default class extends FlipperPlugin<State, {}, PersistedState> {
       let {persistedState} = this.props;
       const {setPersistedState} = this.props;
       const navigationEvent: NavigationEvent = {
-        uri: payload.uri === undefined ? null : payload.uri,
+        uri: payload.uri === undefined ? null : decodeURIComponent(payload.uri),
         date: payload.date || new Date(),
+        className: payload.class === undefined ? null : payload.class,
         screenshot: null,
       };
       setPersistedState({
         ...persistedState,
         currentURI:
-          payload.uri == null ? persistedState.currentURI : payload.uri,
+          payload.uri == null
+            ? persistedState.currentURI
+            : decodeURIComponent(payload.uri),
         navigationEvents: [navigationEvent, ...persistedState.navigationEvents],
       });
       // Wait for view to render and then take a screenshot