Move plugins to "sonar/desktop/plugins"

Summary:
Plugins moved from "sonar/desktop/src/plugins" to "sonar/desktop/plugins".

Fixed all the paths after moving.

New "desktop" folder structure:
- `src` - Flipper desktop app JS code executing in Electron Renderer (Chrome) process.
- `static` - Flipper desktop app JS code executing in Electron Main (Node.js) process.
- `plugins` - Flipper desktop JS plugins.
- `pkg` - Flipper packaging lib and CLI tool.
- `doctor` - Flipper diagnostics lib and CLI tool.
- `scripts` - Build scripts for Flipper desktop app.
- `headless` - Headless version of Flipper desktop app.
- `headless-tests` - Integration tests running agains Flipper headless version.

Reviewed By: mweststrate

Differential Revision: D20344186

fbshipit-source-id: d020da970b2ea1e001f9061a8782bfeb54e31ba0

desktop/plugins/navigation/components/Timeline.tsx

@@ -0,0 +1,95 @@
+/**
+ * Copyright (c) Facebook, Inc. and its affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ * @format
+ */
+
+import {colors, FlexCenter, styled} from 'flipper';
+import {NavigationInfoBox} from './';
+import {Bookmark, NavigationEvent, URI} from '../types';
+import React, {useRef} from 'react';
+
+type Props = {
+  bookmarks: Map<string, Bookmark>;
+  events: Array<NavigationEvent>;
+  onNavigate: (uri: URI) => void;
+  onFavorite: (uri: URI) => void;
+};
+
+const TimelineLine = styled.div({
+  width: 2,
+  backgroundColor: colors.highlight,
+  position: 'absolute',
+  top: 38,
+  bottom: 0,
+});
+
+const TimelineContainer = styled.div({
+  position: 'relative',
+  paddingLeft: 25,
+  overflowY: 'scroll',
+  flexGrow: 1,
+  backgroundColor: colors.light02,
+  scrollBehavior: 'smooth',
+  '&>div': {
+    position: 'relative',
+    minHeight: '100%',
+    '&:last-child': {
+      paddingBottom: 25,
+    },
+  },
+});
+
+const NavigationEventContainer = styled.div({
+  display: 'flex',
+  paddingTop: 25,
+  paddingLeft: 25,
+  marginRight: 25,
+});
+
+const NoData = styled(FlexCenter)({
+  height: '100%',
+  fontSize: 18,
+  backgroundColor: colors.macOSTitleBarBackgroundBlur,
+  color: colors.macOSTitleBarIcon,
+});
+
+export default (props: Props) => {
+  const {bookmarks, events, onNavigate, onFavorite} = props;
+  const timelineRef = useRef<HTMLDivElement>(null);
+  return events.length === 0 ? (
+    <NoData>No Navigation Events to Show</NoData>
+  ) : (
+    <TimelineContainer ref={timelineRef}>
+      <div>
+        <TimelineLine />
+        {events.map((event: NavigationEvent, idx: number) => {
+          return (
+            <NavigationEventContainer>
+              <NavigationInfoBox
+                key={idx}
+                isBookmarked={
+                  event.uri != null ? bookmarks.has(event.uri) : false
+                }
+                className={event.className}
+                uri={event.uri}
+                onNavigate={uri => {
+                  if (timelineRef.current != null) {
+                    timelineRef.current.scrollTo(0, 0);
+                  }
+                  onNavigate(uri);
+                }}
+                onFavorite={onFavorite}
+                screenshot={event.screenshot}
+                date={event.date}
+              />
+            </NavigationEventContainer>
+          );
+        })}
+      </div>
+    </TimelineContainer>
+  );
+};