Implement deeplink, creating pastes, log deduplication

Summary:
This diff implements the remaining features in the logs plugin:

- deeplinking
- merging duplicate rows

The logs plugin source code has now been reduced from originally `935` to `285` LoC. All optimisation code has been removed from the plugin:

* debouncing data processing
* pre-rendering (and storing!) all rows

Finally applied some further styling tweaks and applied some renames to DataTable / DataSource + types finetuning. Some more will follow.
Fixed a emotion warning in unit tests which was pretty annoying.

Reviewed By: passy

Differential Revision: D26666190

fbshipit-source-id: e45e289b4422ebeb46cad927cfc0cfcc9566834f

desktop/app/src/init.tsx

@@ -228,8 +228,6 @@ const persistor = persistStore(store, undefined, () => {
 setPersistor(persistor);
 
 const CodeBlock = styled(Input.TextArea)({
-  fontFamily:
-    'SFMono-Regular,Consolas,Liberation Mono,Menlo,Courier,monospace;',
-  fontSize: '0.8em',
+  ...theme.monospace,
   color: theme.textColorSecondary,
 });

desktop/app/src/sandy-chrome/LeftSidebar.tsx

@@ -42,7 +42,7 @@ export function SidebarTitle({
 const LeftMenuTitle = styled(Layout.Horizontal)({
   padding: `0px ${theme.inlinePaddingH}px`,
   lineHeight: `${theme.space.large}px`,
-  fontSize: theme.fontSize.smallBody,
+  fontSize: theme.fontSize.small,
   textTransform: 'uppercase',
   '> :first-child': {
     flex: 1,

desktop/app/src/sandy-chrome/SetupDoctorScreen.tsx

@@ -83,7 +83,7 @@ function ResultTopDialog(props: {status: HealthcheckStatus}) {
       showIcon
       message={messages.message}
       style={{
-        fontSize: theme.fontSize.smallBody,
+        fontSize: theme.fontSize.small,
         lineHeight: '16px',
         fontWeight: 'bold',
         paddingTop: '10px',
@@ -179,7 +179,7 @@ function SetupDoctorFooter(props: {
           checked={props.acknowledgeCheck}
           onChange={(e) => props.onAcknowledgeCheck(e.target.checked)}
           style={{display: 'flex', alignItems: 'center'}}>
-          <Text style={{fontSize: theme.fontSize.smallBody}}>
+          <Text style={{fontSize: theme.fontSize.small}}>
             Do not show warning about these problems at startup
           </Text>
         </Checkbox>

desktop/app/src/sandy-chrome/WelcomeScreen.tsx

@@ -78,7 +78,7 @@ function WelcomeFooter({
   return (
     <FooterContainer>
       <Checkbox checked={checked} onChange={(e) => onCheck(e.target.checked)}>
-        <Text style={{fontSize: theme.fontSize.smallBody}}>
+        <Text style={{fontSize: theme.fontSize.small}}>
           Show this when app opens (or use ? icon on left)
         </Text>
       </Checkbox>

desktop/app/src/sandy-chrome/notification/BlocklistSettingButton.tsx

@@ -45,7 +45,7 @@ export default function BlocklistSettingButton(props: {
                     key={pluginId}
                     closable
                     onClose={() => props.onRemovePlugin(pluginId)}>
-                    <Text style={{fontSize: theme.fontSize.smallBody}} ellipsis>
+                    <Text style={{fontSize: theme.fontSize.small}} ellipsis>
                       {pluginId}
                     </Text>
                   </Tag>
@@ -54,7 +54,7 @@ export default function BlocklistSettingButton(props: {
             ) : (
               <Text
                 style={{
-                  fontSize: theme.fontSize.smallBody,
+                  fontSize: theme.fontSize.small,
                   color: theme.textColorSecondary,
                 }}>
                 No Blocklisted Plugin
@@ -70,7 +70,7 @@ export default function BlocklistSettingButton(props: {
                     key={category}
                     closable
                     onClose={() => props.onRemoveCategory(category)}>
-                    <Text style={{fontSize: theme.fontSize.smallBody}} ellipsis>
+                    <Text style={{fontSize: theme.fontSize.small}} ellipsis>
                       {category}
                     </Text>
                   </Tag>
@@ -79,7 +79,7 @@ export default function BlocklistSettingButton(props: {
             ) : (
               <Text
                 style={{
-                  fontSize: theme.fontSize.smallBody,
+                  fontSize: theme.fontSize.small,
                   color: theme.textColorSecondary,
                 }}>
                 No Blocklisted Category

desktop/app/src/sandy-chrome/notification/Notification.tsx

@@ -69,7 +69,7 @@ function DetailCollapse({detail}: {detail: string | React.ReactNode}) {
       <Paragraph
         type="secondary"
         style={{
-          fontSize: theme.fontSize.smallBody,
+          fontSize: theme.fontSize.small,
           marginBottom: 0,
         }}
         ellipsis={{rows: 3}}>
@@ -92,7 +92,7 @@ function DetailCollapse({detail}: {detail: string | React.ReactNode}) {
         <Collapse.Panel
           key="detail"
           header={
-            <Text type="secondary" style={{fontSize: theme.fontSize.smallBody}}>
+            <Text type="secondary" style={{fontSize: theme.fontSize.small}}>
               View detail
             </Text>
           }>
@@ -149,14 +149,14 @@ function NotificationEntry({notification}: {notification: PluginNotification}) {
       <Layout.Right center>
         <Layout.Horizontal gap="tiny" center>
           {icon}
-          <Text style={{fontSize: theme.fontSize.smallBody}}>{pluginName}</Text>
+          <Text style={{fontSize: theme.fontSize.small}}>{pluginName}</Text>
         </Layout.Horizontal>
         {actions}
       </Layout.Right>
       <Title level={4} ellipsis={{rows: 2}}>
         {title}
       </Title>
-      <Text type="secondary" style={{fontSize: theme.fontSize.smallBody}}>
+      <Text type="secondary" style={{fontSize: theme.fontSize.small}}>
         {clientName && appName
           ? `${clientName}/${appName}`
           : clientName ?? appName ?? 'Not Connected'}