From 6349ebe05d37c0066139bda3afc80374a4fb3534 Mon Sep 17 00:00:00 2001
From: Andrey <nepein.dev.aquadelivery@gmail.com>
Date: Mon, 2 Aug 2021 14:29:28 -0700
Subject: [PATCH] Fixed plugin installer overflow (#2652)

Summary:
https://user-images.githubusercontent.com/33036510/127777930-34ede219-0fb9-4486-8f2e-3d73ff8cb84d.mov

Content of plugin installer modal has no scroll and it is overflowing

## Changelog

- Fixed PluginInstaller table overflow

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

Test Plan:
The video, demonstrating how the problem was fixed:
https://user-images.githubusercontent.com/33036510/127777930-34ede219-0fb9-4486-8f2e-3d73ff8cb84d.mov

Reviewed By: passy

Differential Revision: D30044703

Pulled By: cekkaewnumchai

fbshipit-source-id: 6d00ef766aaa295cc43fd944ca3b849371192a79
---
 .../chrome/plugin-manager/PluginInstaller.tsx |   1 +
 .../PluginInstaller.node.tsx.snap             | 104 +++++++++---------
 2 files changed, 53 insertions(+), 52 deletions(-)

diff --git a/desktop/app/src/chrome/plugin-manager/PluginInstaller.tsx b/desktop/app/src/chrome/plugin-manager/PluginInstaller.tsx
index 8f46368f8..9bb63aaa1 100644
--- a/desktop/app/src/chrome/plugin-manager/PluginInstaller.tsx
+++ b/desktop/app/src/chrome/plugin-manager/PluginInstaller.tsx
@@ -118,6 +118,7 @@ const PluginInstaller = function ({
         highlightedRows={new Set()}
         autoHeight={autoHeight}
         rows={rows}
+        horizontallyScrollable
       />
       <PluginPackageInstaller onInstall={onInstall} />
     </Layout.Container>
diff --git a/desktop/app/src/chrome/plugin-manager/__tests__/__snapshots__/PluginInstaller.node.tsx.snap b/desktop/app/src/chrome/plugin-manager/__tests__/__snapshots__/PluginInstaller.node.tsx.snap
index b420e1a38..2c2cae04d 100644
--- a/desktop/app/src/chrome/plugin-manager/__tests__/__snapshots__/PluginInstaller.node.tsx.snap
+++ b/desktop/app/src/chrome/plugin-manager/__tests__/__snapshots__/PluginInstaller.node.tsx.snap
@@ -53,19 +53,19 @@ exports[`load PluginInstaller list 1`] = `
       </span>
     </div>
     <div
-      class="css-p5h61d-View-FlexBox-FlexColumn-Container esta8x30"
+      class="css-bgfc37-View-FlexBox-FlexColumn-Container esta8x30"
       tabindex="0"
     >
       <div
         class="css-18abd42-View-FlexBox-FlexColumn ecr18to0"
       >
         <div
-          class="css-1hdusim-View-FlexBox-FlexRow-TableHeadContainer ejga3101"
+          class="css-1otvu18-View-FlexBox-FlexRow-TableHeadContainer ejga3101"
         >
           <div
-            class="css-it9ar6-TableHeadColumnContainer ejga3100"
+            class="css-mpoiz3-TableHeadColumnContainer ejga3100"
             title="name"
-            width="25%"
+            width="0"
           >
             <div
               class="ejga3103 css-x4q70f-InteractiveContainer-TableHeaderColumnInteractive e14xwmxq0"
@@ -79,9 +79,9 @@ exports[`load PluginInstaller list 1`] = `
             </div>
           </div>
           <div
-            class="css-1m9d124-TableHeadColumnContainer ejga3100"
+            class="css-mpoiz3-TableHeadColumnContainer ejga3100"
             title="version"
-            width="10%"
+            width="0"
           >
             <div
               class="ejga3103 css-x4q70f-InteractiveContainer-TableHeaderColumnInteractive e14xwmxq0"
@@ -95,9 +95,9 @@ exports[`load PluginInstaller list 1`] = `
             </div>
           </div>
           <div
-            class="css-qmwopt-TableHeadColumnContainer ejga3100"
+            class="css-mpoiz3-TableHeadColumnContainer ejga3100"
             title="description"
-            width="flex"
+            width="0"
           >
             <div
               class="ejga3103 css-x4q70f-InteractiveContainer-TableHeaderColumnInteractive e14xwmxq0"
@@ -111,9 +111,9 @@ exports[`load PluginInstaller list 1`] = `
             </div>
           </div>
           <div
-            class="css-ux5muk-TableHeadColumnContainer ejga3100"
+            class="css-mpoiz3-TableHeadColumnContainer ejga3100"
             title="install"
-            width="15%"
+            width="0"
           >
             <div
               class="ejga3103 css-x4q70f-InteractiveContainer-TableHeaderColumnInteractive e14xwmxq0"
@@ -139,9 +139,9 @@ exports[`load PluginInstaller list 1`] = `
             data-key="flipper-plugin-hello"
           >
             <div
-              class="css-hdg6vt-TableBodyColumnContainer ehuguum0"
+              class="css-yt4330-TableBodyColumnContainer ehuguum0"
               title=""
-              width="25%"
+              width="0"
             >
               <span
                 class="ant-typography ant-typography-ellipsis ant-typography-single-line ant-typography-ellipsis-single-line"
@@ -150,9 +150,9 @@ exports[`load PluginInstaller list 1`] = `
               </span>
             </div>
             <div
-              class="css-1rdsust-TableBodyColumnContainer ehuguum0"
+              class="css-pfp0fy-TableBodyColumnContainer ehuguum0"
               title=""
-              width="10%"
+              width="0"
             >
               <span
                 class="ant-typography ant-typography-ellipsis ant-typography-single-line ant-typography-ellipsis-single-line"
@@ -161,9 +161,9 @@ exports[`load PluginInstaller list 1`] = `
               </span>
             </div>
             <div
-              class="css-1bw2bjn-TableBodyColumnContainer ehuguum0"
+              class="css-yt4330-TableBodyColumnContainer ehuguum0"
               title=""
-              width="flex"
+              width="0"
             >
               <div
                 class="css-s1wsbn-Container-Horizontal e1hsqii14"
@@ -187,9 +187,9 @@ exports[`load PluginInstaller list 1`] = `
               </div>
             </div>
             <div
-              class="css-4dx1ef-TableBodyColumnContainer ehuguum0"
+              class="css-16v1lq1-TableBodyColumnContainer ehuguum0"
               title=""
-              width="15%"
+              width="0"
             >
               <button
                 class="ant-btn ant-btn-primary ant-btn-sm"
@@ -206,9 +206,9 @@ exports[`load PluginInstaller list 1`] = `
             data-key="flipper-plugin-world"
           >
             <div
-              class="css-hdg6vt-TableBodyColumnContainer ehuguum0"
+              class="css-yt4330-TableBodyColumnContainer ehuguum0"
               title=""
-              width="25%"
+              width="0"
             >
               <span
                 class="ant-typography ant-typography-ellipsis ant-typography-single-line ant-typography-ellipsis-single-line"
@@ -217,9 +217,9 @@ exports[`load PluginInstaller list 1`] = `
               </span>
             </div>
             <div
-              class="css-1rdsust-TableBodyColumnContainer ehuguum0"
+              class="css-pfp0fy-TableBodyColumnContainer ehuguum0"
               title=""
-              width="10%"
+              width="0"
             >
               <span
                 class="ant-typography ant-typography-ellipsis ant-typography-single-line ant-typography-ellipsis-single-line"
@@ -228,9 +228,9 @@ exports[`load PluginInstaller list 1`] = `
               </span>
             </div>
             <div
-              class="css-1bw2bjn-TableBodyColumnContainer ehuguum0"
+              class="css-yt4330-TableBodyColumnContainer ehuguum0"
               title=""
-              width="flex"
+              width="0"
             >
               <div
                 class="css-s1wsbn-Container-Horizontal e1hsqii14"
@@ -254,9 +254,9 @@ exports[`load PluginInstaller list 1`] = `
               </div>
             </div>
             <div
-              class="css-4dx1ef-TableBodyColumnContainer ehuguum0"
+              class="css-16v1lq1-TableBodyColumnContainer ehuguum0"
               title=""
-              width="15%"
+              width="0"
             >
               <button
                 class="ant-btn ant-btn-primary ant-btn-sm"
@@ -387,19 +387,19 @@ exports[`load PluginInstaller list with one plugin installed 1`] = `
       </span>
     </div>
     <div
-      class="css-p5h61d-View-FlexBox-FlexColumn-Container esta8x30"
+      class="css-bgfc37-View-FlexBox-FlexColumn-Container esta8x30"
       tabindex="0"
     >
       <div
         class="css-18abd42-View-FlexBox-FlexColumn ecr18to0"
       >
         <div
-          class="css-1hdusim-View-FlexBox-FlexRow-TableHeadContainer ejga3101"
+          class="css-1otvu18-View-FlexBox-FlexRow-TableHeadContainer ejga3101"
         >
           <div
-            class="css-it9ar6-TableHeadColumnContainer ejga3100"
+            class="css-mpoiz3-TableHeadColumnContainer ejga3100"
             title="name"
-            width="25%"
+            width="0"
           >
             <div
               class="ejga3103 css-x4q70f-InteractiveContainer-TableHeaderColumnInteractive e14xwmxq0"
@@ -413,9 +413,9 @@ exports[`load PluginInstaller list with one plugin installed 1`] = `
             </div>
           </div>
           <div
-            class="css-1m9d124-TableHeadColumnContainer ejga3100"
+            class="css-mpoiz3-TableHeadColumnContainer ejga3100"
             title="version"
-            width="10%"
+            width="0"
           >
             <div
               class="ejga3103 css-x4q70f-InteractiveContainer-TableHeaderColumnInteractive e14xwmxq0"
@@ -429,9 +429,9 @@ exports[`load PluginInstaller list with one plugin installed 1`] = `
             </div>
           </div>
           <div
-            class="css-qmwopt-TableHeadColumnContainer ejga3100"
+            class="css-mpoiz3-TableHeadColumnContainer ejga3100"
             title="description"
-            width="flex"
+            width="0"
           >
             <div
               class="ejga3103 css-x4q70f-InteractiveContainer-TableHeaderColumnInteractive e14xwmxq0"
@@ -445,9 +445,9 @@ exports[`load PluginInstaller list with one plugin installed 1`] = `
             </div>
           </div>
           <div
-            class="css-ux5muk-TableHeadColumnContainer ejga3100"
+            class="css-mpoiz3-TableHeadColumnContainer ejga3100"
             title="install"
-            width="15%"
+            width="0"
           >
             <div
               class="ejga3103 css-x4q70f-InteractiveContainer-TableHeaderColumnInteractive e14xwmxq0"
@@ -473,9 +473,9 @@ exports[`load PluginInstaller list with one plugin installed 1`] = `
             data-key="flipper-plugin-hello"
           >
             <div
-              class="css-hdg6vt-TableBodyColumnContainer ehuguum0"
+              class="css-yt4330-TableBodyColumnContainer ehuguum0"
               title=""
-              width="25%"
+              width="0"
             >
               <span
                 class="ant-typography ant-typography-ellipsis ant-typography-single-line ant-typography-ellipsis-single-line"
@@ -484,9 +484,9 @@ exports[`load PluginInstaller list with one plugin installed 1`] = `
               </span>
             </div>
             <div
-              class="css-1rdsust-TableBodyColumnContainer ehuguum0"
+              class="css-pfp0fy-TableBodyColumnContainer ehuguum0"
               title=""
-              width="10%"
+              width="0"
             >
               <span
                 class="ant-typography ant-typography-ellipsis ant-typography-single-line ant-typography-ellipsis-single-line"
@@ -495,9 +495,9 @@ exports[`load PluginInstaller list with one plugin installed 1`] = `
               </span>
             </div>
             <div
-              class="css-1bw2bjn-TableBodyColumnContainer ehuguum0"
+              class="css-yt4330-TableBodyColumnContainer ehuguum0"
               title=""
-              width="flex"
+              width="0"
             >
               <div
                 class="css-s1wsbn-Container-Horizontal e1hsqii14"
@@ -521,9 +521,9 @@ exports[`load PluginInstaller list with one plugin installed 1`] = `
               </div>
             </div>
             <div
-              class="css-4dx1ef-TableBodyColumnContainer ehuguum0"
+              class="css-16v1lq1-TableBodyColumnContainer ehuguum0"
               title=""
-              width="15%"
+              width="0"
             >
               <button
                 class="ant-btn ant-btn-sm"
@@ -540,9 +540,9 @@ exports[`load PluginInstaller list with one plugin installed 1`] = `
             data-key="flipper-plugin-world"
           >
             <div
-              class="css-hdg6vt-TableBodyColumnContainer ehuguum0"
+              class="css-yt4330-TableBodyColumnContainer ehuguum0"
               title=""
-              width="25%"
+              width="0"
             >
               <span
                 class="ant-typography ant-typography-ellipsis ant-typography-single-line ant-typography-ellipsis-single-line"
@@ -551,9 +551,9 @@ exports[`load PluginInstaller list with one plugin installed 1`] = `
               </span>
             </div>
             <div
-              class="css-1rdsust-TableBodyColumnContainer ehuguum0"
+              class="css-pfp0fy-TableBodyColumnContainer ehuguum0"
               title=""
-              width="10%"
+              width="0"
             >
               <span
                 class="ant-typography ant-typography-ellipsis ant-typography-single-line ant-typography-ellipsis-single-line"
@@ -562,9 +562,9 @@ exports[`load PluginInstaller list with one plugin installed 1`] = `
               </span>
             </div>
             <div
-              class="css-1bw2bjn-TableBodyColumnContainer ehuguum0"
+              class="css-yt4330-TableBodyColumnContainer ehuguum0"
               title=""
-              width="flex"
+              width="0"
             >
               <div
                 class="css-s1wsbn-Container-Horizontal e1hsqii14"
@@ -588,9 +588,9 @@ exports[`load PluginInstaller list with one plugin installed 1`] = `
               </div>
             </div>
             <div
-              class="css-4dx1ef-TableBodyColumnContainer ehuguum0"
+              class="css-16v1lq1-TableBodyColumnContainer ehuguum0"
               title=""
-              width="15%"
+              width="0"
             >
               <button
                 class="ant-btn ant-btn-primary ant-btn-sm"