From 4b0091df0f8ad7d0a0d0ef5a0f456ac88cd204d6 Mon Sep 17 00:00:00 2001
From: Simek <gosimek@gmail.com>
Date: Mon, 24 Jan 2022 03:55:53 -0800
Subject: [PATCH] fix Plugins table UI glitch in dark mode, add column name
 (#3332)

Summary:
Same as Settings modal, the Plugin Manager table used in Plugins modal includes the UI glitch in dark mode due to overflow setting. This PR fixes that and also adds missing column caption in "Install Plugins" table.

I have chosen `Action` as a title but this can be altered, I have no strong preference in there. The goal was to improve the clarity and also improve the context menu content (where user can show/hide columns).

## Changelog

* fix Plugins table UI glitch in dark mode, add column name

Pull Request resolved: https://github.com/facebook/flipper/pull/3332

Test Plan:
The change has been testes by running the desktop Flipper app locally from source.

## Preview (before & after)
<img width="396" alt="Screenshot 2022-01-23 at 16 19 02" align="left" src="https://user-images.githubusercontent.com/719641/150685739-e2047e70-de14-4801-ac5a-0fc45a6ea476.png">
<img width="396" alt="Screenshot 2022-01-23 at 16 19 31" src="https://user-images.githubusercontent.com/719641/150685735-3de8b7a2-ea3f-489a-b1f8-7af73f0a5225.png">

Reviewed By: aigoncharov

Differential Revision: D33738705

Pulled By: lblasa

fbshipit-source-id: 704fe40f26d424c62a9bbc3e73132a0026f2e8b8
---
 .../src/chrome/plugin-manager/PluginInstaller.tsx         | 2 +-
 .../__tests__/__snapshots__/PluginInstaller.node.tsx.snap | 8 ++++----
 .../src/ui/components/table/ManagedTable.tsx              | 2 +-
 3 files changed, 6 insertions(+), 6 deletions(-)

diff --git a/desktop/flipper-ui-core/src/chrome/plugin-manager/PluginInstaller.tsx b/desktop/flipper-ui-core/src/chrome/plugin-manager/PluginInstaller.tsx
index 6e56ed506..f9790d206 100644
--- a/desktop/flipper-ui-core/src/chrome/plugin-manager/PluginInstaller.tsx
+++ b/desktop/flipper-ui-core/src/chrome/plugin-manager/PluginInstaller.tsx
@@ -49,7 +49,7 @@ const columns = {
     value: 'Description',
   },
   install: {
-    value: '',
+    value: 'Action',
   },
 };
 
diff --git a/desktop/flipper-ui-core/src/chrome/plugin-manager/__tests__/__snapshots__/PluginInstaller.node.tsx.snap b/desktop/flipper-ui-core/src/chrome/plugin-manager/__tests__/__snapshots__/PluginInstaller.node.tsx.snap
index e8c685f8b..66b75922e 100644
--- a/desktop/flipper-ui-core/src/chrome/plugin-manager/__tests__/__snapshots__/PluginInstaller.node.tsx.snap
+++ b/desktop/flipper-ui-core/src/chrome/plugin-manager/__tests__/__snapshots__/PluginInstaller.node.tsx.snap
@@ -53,7 +53,7 @@ exports[`load PluginInstaller list 1`] = `
       </span>
     </div>
     <div
-      class="css-bgfc37-View-FlexBox-FlexColumn-Container emab7y20"
+      class="css-o1pvkz-View-FlexBox-FlexColumn-Container emab7y20"
       tabindex="0"
     >
       <div
@@ -122,7 +122,7 @@ exports[`load PluginInstaller list 1`] = `
               <div
                 class="css-1054ash-TableHeaderColumnContainer eig1lcc2"
               >
-                
+                Action
               </div>
             </div>
           </div>
@@ -429,7 +429,7 @@ exports[`load PluginInstaller list with one plugin installed 1`] = `
       </span>
     </div>
     <div
-      class="css-bgfc37-View-FlexBox-FlexColumn-Container emab7y20"
+      class="css-o1pvkz-View-FlexBox-FlexColumn-Container emab7y20"
       tabindex="0"
     >
       <div
@@ -498,7 +498,7 @@ exports[`load PluginInstaller list with one plugin installed 1`] = `
               <div
                 class="css-1054ash-TableHeaderColumnContainer eig1lcc2"
               >
-                
+                Action
               </div>
             </div>
           </div>
diff --git a/desktop/flipper-ui-core/src/ui/components/table/ManagedTable.tsx b/desktop/flipper-ui-core/src/ui/components/table/ManagedTable.tsx
index 7c72e3f63..3dbf6ab77 100644
--- a/desktop/flipper-ui-core/src/ui/components/table/ManagedTable.tsx
+++ b/desktop/flipper-ui-core/src/ui/components/table/ManagedTable.tsx
@@ -155,7 +155,7 @@ type ManagedTableState = {
 };
 
 const Container = styled(FlexColumn)<{canOverflow?: boolean}>((props) => ({
-  overflow: props.canOverflow ? 'scroll' : 'visible',
+  overflow: props.canOverflow ? 'auto' : 'visible',
   flexGrow: 1,
   height: '100%',
 }));