Support dark mode in plugin manager

Summary:
Make sure plugin manager supports dark mode

Changelog: Added dark mode support to plugin manager

Fixes https://github.com/facebook/flipper/issues/2379#issuecomment-871658004 / https://fb.workplace.com/groups/flippersupport/permalink/1173361956477794/

Reviewed By: timur-valiev

Differential Revision: D29800712

fbshipit-source-id: 76d383bbfd7013f63b9545e4e80ff9c771200746

desktop/app/src/chrome/plugin-manager/PluginDebugger.tsx

@@ -12,7 +12,7 @@ import Client from '../../Client';
 import {TableBodyRow} from '../../ui/components/table/types';
 import React, {Component, Fragment} from 'react';
 import {connect} from 'react-redux';
-import {Text, ManagedTable, styled, colors, Link} from '../../ui';
+import {Text, ManagedTable, styled, colors} from '../../ui';
 import StatusIndicator from '../../ui/components/StatusIndicator';
 import {State as Store} from '../../reducers';
 import {PluginDefinition} from '../../plugin';
@@ -30,7 +30,7 @@ const Ellipsis = styled(Text)({
 
 const TableContainer = styled.div({
   marginTop: 10,
-  height: 400,
+  height: 480,
 });
 
 const Lamp = (props: {on: boolean}) => (

desktop/app/src/chrome/plugin-manager/PluginInstaller.tsx

@@ -7,23 +7,8 @@
  * @format
  */
 
-import {
+import {Layout, theme} from 'flipper-plugin';
-  FlexColumn,
+import {LoadingIndicator, TableRows, ManagedTable, Glyph} from '../../ui';
-  styled,
-  SearchInput,
-  SearchBox,
-  Button,
-  colors,
-  Spacer,
-  FlexRow,
-  Glyph,
-  Link,
-  Text,
-  LoadingIndicator,
-  Tooltip,
-  TableRows,
-  ManagedTable,
-} from '../../ui';
 import React, {useCallback, useState, useEffect} from 'react';
 import {reportPlatformFailures, reportUsage} from '../../utils/metrics';
 import reloadFlipper from '../../utils/reloadFlipper';
@@ -42,15 +27,12 @@ import {connect} from 'react-redux';
 import {Dispatch, Action} from 'redux';
 import PluginPackageInstaller from './PluginPackageInstaller';
 import {Toolbar} from 'flipper-plugin';
+import {Alert, Button, Input, Tooltip, Typography} from 'antd';
+
+const {Text, Link} = Typography;
 
 const TAG = 'PluginInstaller';
 
-const EllipsisText = styled(Text)({
-  overflow: 'hidden',
-  textOverflow: 'ellipsis',
-  whiteSpace: 'nowrap',
-});
-
 const columnSizes = {
   name: '25%',
   version: '10%',
@@ -73,23 +55,6 @@ const columns = {
   },
 };
 
-const Container = styled(FlexColumn)({
-  height: 300,
-  backgroundColor: colors.white,
-  borderRadius: 4,
-  overflow: 'hidden',
-  border: `1px solid ${colors.macOSTitleBarButtonBorder}`,
-});
-
-const RestartBar = styled(FlexColumn)({
-  backgroundColor: colors.red,
-  color: colors.white,
-  fontWeight: 500,
-  padding: 10,
-  cursor: 'pointer',
-  textAlign: 'center',
-});
-
 type PropsFromState = {
   installedPlugins: Map<string, InstalledPluginDetails>;
 };
@@ -127,21 +92,21 @@ const PluginInstaller = function ({
   }, []);
 
   return (
-    <>
+    <Layout.Container gap height={500}>
-      <Container>
       {restartRequired && (
-          <RestartBar onClick={restartApp}>
+        <Alert
-            To apply the changes, Flipper needs to reload. Click here to reload!
+          onClick={restartApp}
-          </RestartBar>
+          type="error"
+          message="To apply the changes, Flipper needs to reload. Click here to reload!"
+          style={{cursor: 'pointer'}}
+        />
       )}
       <Toolbar>
-          <SearchBox>
+        <Input.Search
-            <SearchInput
           onChange={(e) => setQuery(e.target.value)}
           value={query}
           placeholder="Search Flipper plugins..."
         />
-          </SearchBox>
       </Toolbar>
       <ManagedTable
         rowLineHeight={28}
@@ -154,24 +119,11 @@ const PluginInstaller = function ({
         autoHeight={autoHeight}
         rows={rows}
       />
-      </Container>
       <PluginPackageInstaller onInstall={onInstall} />
-    </>
+    </Layout.Container>
   );
 };
 
-const TableButton = styled(Button)({
-  marginTop: 2,
-});
-
-const Spinner = styled(LoadingIndicator)({
-  marginTop: 6,
-});
-
-const AlignedGlyph = styled(Glyph)({
-  marginTop: 6,
-});
-
 function InstallButton(props: {
   name: string;
   version: string;
@@ -240,13 +192,13 @@ function InstallButton(props: {
   );
 
   if (action.kind === 'Waiting') {
-    return <Spinner size={16} />;
+    return <LoadingIndicator size={16} />;
   }
   if ((action.kind === 'Install' || action.kind === 'Remove') && action.error) {
   }
   const button = (
-    <TableButton
+    <Button
-      compact
+      size="small"
       type={action.kind !== 'Remove' ? 'primary' : undefined}
       onClick={() => {
         switch (action.kind) {
@@ -262,22 +214,22 @@ function InstallButton(props: {
         }
       }}>
       {action.kind}
-    </TableButton>
+    </Button>
   );
 
   if (action.error) {
     const glyph = (
-      <AlignedGlyph color={colors.orange} size={16} name="caution-triangle" />
+      <Glyph color={theme.warningColor} size={16} name="caution-triangle" />
     );
     return (
-      <FlexRow>
+      <Layout.Horizontal gap>
         <Tooltip
-          options={{position: 'toLeft'}}
+          placement="leftBottom"
           title={`Something went wrong: ${action.error}`}
           children={glyph}
         />
         {button}
-      </FlexRow>
+      </Layout.Horizontal>
     );
   } else {
     return button;
@@ -302,25 +254,24 @@ function useNPMSearch(
       key: h.name,
       columns: {
         name: {
-          value: (
+          value: <Text ellipsis>{h.name.replace(/^flipper-plugin-/, '')}</Text>,
-            <EllipsisText>
-              {h.name.replace(/^flipper-plugin-/, '')}
-            </EllipsisText>
-          ),
         },
         version: {
-          value: <EllipsisText>{h.version}</EllipsisText>,
+          value: <Text ellipsis>{h.version}</Text>,
           align: 'flex-end' as 'flex-end',
         },
         description: {
           value: (
-            <FlexRow grow>
+            <Layout.Horizontal center gap>
-              <EllipsisText>{h.description}</EllipsisText>
+              <Text ellipsis>{h.description}</Text>
-              <Spacer />
               <Link href={`https://yarnpkg.com/en/package/${h.name}`}>
-                <Glyph color={colors.light20} name="info-circle" size={16} />
+                <Glyph
+                  color={theme.textColorActive}
+                  name="info-circle"
+                  size={16}
+                />
               </Link>
-            </FlexRow>
+            </Layout.Horizontal>
           ),
         },
         install: {

desktop/app/src/chrome/plugin-manager/PluginManager.tsx

@@ -7,41 +7,23 @@
  * @format
  */
 
-import React, {useState} from 'react';
+import React from 'react';
-import {FlexColumn, Button, styled, Tab, Tabs, TabsContainer} from '../../ui';
+import {Tab, Tabs} from 'flipper-plugin';
 import PluginDebugger from './PluginDebugger';
 import PluginInstaller from './PluginInstaller';
-
+import {Modal} from 'antd';
-const Container = styled(FlexColumn)({
-  padding: 15,
-  width: 760,
-});
-
-const Row = styled(FlexColumn)({
-  alignItems: 'flex-end',
-});
-
-type TabsState = 'Plugin Status' | 'Install Plugins';
 
 export default function (props: {onHide: () => any}) {
-  const [tab, setTab] = useState<TabsState>('Plugin Status');
   return (
-    <Container>
+    <Modal width={800} visible onCancel={props.onHide} footer={null}>
-      <TabsContainer>
+      <Tabs>
-        <Tabs
+        <Tab tab="Plugin Status">
-          active={tab}
+          <PluginDebugger />
-          onActive={setTab as (s: string | null | undefined) => void}>
+        </Tab>
-          <Tab label="Plugin Status" />
+        <Tab tab="Install Plugins">
-          <Tab label="Install Plugins" />
+          <PluginInstaller />
+        </Tab>
       </Tabs>
-        {tab === 'Plugin Status' && <PluginDebugger />}
+    </Modal>
-        {tab === 'Install Plugins' && <PluginInstaller />}
-      </TabsContainer>
-      <Row>
-        <Button compact padded onClick={props.onHide}>
-          Close
-        </Button>
-      </Row>
-    </Container>
   );
 }

desktop/app/src/chrome/plugin-manager/__tests__/__snapshots__/PluginInstaller.node.tsx.snap

@@ -3,21 +3,54 @@
 exports[`load PluginInstaller list 1`] = `
 <div>
   <div
-    class="css-9dawc5-View-FlexBox-FlexColumn"
+    class="css-1v0y38i-Container e1hsqii15"
+    height="500"
   >
     <div
       class="css-1lxv8hi-Container-Horizontal-SandyToolbarContainer e1ecpah20"
     >
-      <div
+      <span
-        class="css-r8ah0d-View-FlexBox-SearchBox e271nro4"
+        class="ant-input-group-wrapper ant-input-search"
+      >
+        <span
+          class="ant-input-wrapper ant-input-group"
         >
           <input
-          class="css-84x0xt-Input-SearchInput e271nro3"
+            class="ant-input"
             placeholder="Search Flipper plugins..."
             type="text"
             value=""
           />
-      </div>
+          <span
+            class="ant-input-group-addon"
+          >
+            <button
+              class="ant-btn ant-btn-icon-only ant-input-search-button"
+              type="button"
+            >
+              <span
+                aria-label="search"
+                class="anticon anticon-search"
+                role="img"
+              >
+                <svg
+                  aria-hidden="true"
+                  data-icon="search"
+                  fill="currentColor"
+                  focusable="false"
+                  height="1em"
+                  viewBox="64 64 896 896"
+                  width="1em"
+                >
+                  <path
+                    d="M909.6 854.5L649.9 594.8C690.2 542.7 712 479 712 412c0-80.2-31.3-155.4-87.9-212.1-56.6-56.7-132-87.9-212.1-87.9s-155.5 31.3-212.1 87.9C143.2 256.5 112 331.8 112 412c0 80.1 31.3 155.5 87.9 212.1C256.5 680.8 331.8 712 412 712c67 0 130.6-21.8 182.7-62l259.7 259.6a8.2 8.2 0 0011.6 0l43.6-43.5a8.2 8.2 0 000-11.6zM570.4 570.4C528 612.7 471.8 636 412 636s-116-23.3-158.4-65.6C211.3 528 188 471.8 188 412s23.3-116.1 65.6-158.4C296 211.3 352.2 188 412 188s116.1 23.2 158.4 65.6S636 352.2 636 412s-23.3 116.1-65.6 158.4z"
+                  />
+                </svg>
+              </span>
+            </button>
+          </span>
+        </span>
+      </span>
     </div>
     <div
       class="css-p5h61d-View-FlexBox-FlexColumn-Container esta8x30"
@@ -111,7 +144,7 @@ exports[`load PluginInstaller list 1`] = `
               width="25%"
             >
               <span
-                class="css-fyize4-Text"
+                class="ant-typography ant-typography-ellipsis ant-typography-single-line ant-typography-ellipsis-single-line"
               >
                 hello
               </span>
@@ -122,7 +155,7 @@ exports[`load PluginInstaller list 1`] = `
               width="10%"
             >
               <span
-                class="css-fyize4-Text"
+                class="ant-typography ant-typography-ellipsis ant-typography-single-line ant-typography-ellipsis-single-line"
               >
                 0.1.0
               </span>
@@ -133,23 +166,20 @@ exports[`load PluginInstaller list 1`] = `
               width="flex"
             >
               <div
-                class="css-4yiclo-View-FlexBox-FlexRow epz0qe20"
+                class="css-s1wsbn-Container-Horizontal e1hsqii14"
               >
                 <span
-                  class="css-fyize4-Text"
+                  class="ant-typography ant-typography-ellipsis ant-typography-single-line ant-typography-ellipsis-single-line"
                 >
                   World?
                 </span>
-                <div
-                  class="css-t4wmtk-View-FlexBox-Spacer e13mj6h80"
-                />
                 <a
                   class="ant-typography"
                   href="https://yarnpkg.com/en/package/flipper-plugin-hello"
                 >
                   <div
-                    class="css-5r6dd6-ColoredIconCustom e528dze0"
+                    class="css-1kmzf9v-ColoredIconCustom e528dze0"
-                    color="#bec2c9"
+                    color="var(--light-color-button-active)"
                     size="16"
                     src="https://facebook.com/assets/?name=info-circle&variant=filled&size=16&set=facebook_icons&density=1x"
                   />
@@ -162,7 +192,7 @@ exports[`load PluginInstaller list 1`] = `
               width="15%"
             >
               <button
-                class="ant-btn ant-btn-primary"
+                class="ant-btn ant-btn-primary ant-btn-sm"
                 type="button"
               >
                 <span>
@@ -181,7 +211,7 @@ exports[`load PluginInstaller list 1`] = `
               width="25%"
             >
               <span
-                class="css-fyize4-Text"
+                class="ant-typography ant-typography-ellipsis ant-typography-single-line ant-typography-ellipsis-single-line"
               >
                 world
               </span>
@@ -192,7 +222,7 @@ exports[`load PluginInstaller list 1`] = `
               width="10%"
             >
               <span
-                class="css-fyize4-Text"
+                class="ant-typography ant-typography-ellipsis ant-typography-single-line ant-typography-ellipsis-single-line"
               >
                 0.2.0
               </span>
@@ -203,23 +233,20 @@ exports[`load PluginInstaller list 1`] = `
               width="flex"
             >
               <div
-                class="css-4yiclo-View-FlexBox-FlexRow epz0qe20"
+                class="css-s1wsbn-Container-Horizontal e1hsqii14"
               >
                 <span
-                  class="css-fyize4-Text"
+                  class="ant-typography ant-typography-ellipsis ant-typography-single-line ant-typography-ellipsis-single-line"
                 >
                   Hello?
                 </span>
-                <div
-                  class="css-t4wmtk-View-FlexBox-Spacer e13mj6h80"
-                />
                 <a
                   class="ant-typography"
                   href="https://yarnpkg.com/en/package/flipper-plugin-world"
                 >
                   <div
-                    class="css-5r6dd6-ColoredIconCustom e528dze0"
+                    class="css-1kmzf9v-ColoredIconCustom e528dze0"
-                    color="#bec2c9"
+                    color="var(--light-color-button-active)"
                     size="16"
                     src="https://facebook.com/assets/?name=info-circle&variant=filled&size=16&set=facebook_icons&density=1x"
                   />
@@ -232,7 +259,7 @@ exports[`load PluginInstaller list 1`] = `
               width="15%"
             >
               <button
-                class="ant-btn ant-btn-primary"
+                class="ant-btn ant-btn-primary ant-btn-sm"
                 type="button"
               >
                 <span>
@@ -244,7 +271,6 @@ exports[`load PluginInstaller list 1`] = `
         </div>
       </div>
     </div>
-  </div>
     <div
       class="css-1lxv8hi-Container-Horizontal-SandyToolbarContainer e1ecpah20"
     >
@@ -305,26 +331,60 @@ exports[`load PluginInstaller list 1`] = `
       </div>
     </div>
   </div>
+</div>
 `;
 
 exports[`load PluginInstaller list with one plugin installed 1`] = `
 <div>
   <div
-    class="css-9dawc5-View-FlexBox-FlexColumn"
+    class="css-1v0y38i-Container e1hsqii15"
+    height="500"
   >
     <div
       class="css-1lxv8hi-Container-Horizontal-SandyToolbarContainer e1ecpah20"
     >
-      <div
+      <span
-        class="css-r8ah0d-View-FlexBox-SearchBox e271nro4"
+        class="ant-input-group-wrapper ant-input-search"
+      >
+        <span
+          class="ant-input-wrapper ant-input-group"
         >
           <input
-          class="css-84x0xt-Input-SearchInput e271nro3"
+            class="ant-input"
             placeholder="Search Flipper plugins..."
             type="text"
             value=""
           />
-      </div>
+          <span
+            class="ant-input-group-addon"
+          >
+            <button
+              class="ant-btn ant-btn-icon-only ant-input-search-button"
+              type="button"
+            >
+              <span
+                aria-label="search"
+                class="anticon anticon-search"
+                role="img"
+              >
+                <svg
+                  aria-hidden="true"
+                  data-icon="search"
+                  fill="currentColor"
+                  focusable="false"
+                  height="1em"
+                  viewBox="64 64 896 896"
+                  width="1em"
+                >
+                  <path
+                    d="M909.6 854.5L649.9 594.8C690.2 542.7 712 479 712 412c0-80.2-31.3-155.4-87.9-212.1-56.6-56.7-132-87.9-212.1-87.9s-155.5 31.3-212.1 87.9C143.2 256.5 112 331.8 112 412c0 80.1 31.3 155.5 87.9 212.1C256.5 680.8 331.8 712 412 712c67 0 130.6-21.8 182.7-62l259.7 259.6a8.2 8.2 0 0011.6 0l43.6-43.5a8.2 8.2 0 000-11.6zM570.4 570.4C528 612.7 471.8 636 412 636s-116-23.3-158.4-65.6C211.3 528 188 471.8 188 412s23.3-116.1 65.6-158.4C296 211.3 352.2 188 412 188s116.1 23.2 158.4 65.6S636 352.2 636 412s-23.3 116.1-65.6 158.4z"
+                  />
+                </svg>
+              </span>
+            </button>
+          </span>
+        </span>
+      </span>
     </div>
     <div
       class="css-p5h61d-View-FlexBox-FlexColumn-Container esta8x30"
@@ -418,7 +478,7 @@ exports[`load PluginInstaller list with one plugin installed 1`] = `
               width="25%"
             >
               <span
-                class="css-fyize4-Text"
+                class="ant-typography ant-typography-ellipsis ant-typography-single-line ant-typography-ellipsis-single-line"
               >
                 hello
               </span>
@@ -429,7 +489,7 @@ exports[`load PluginInstaller list with one plugin installed 1`] = `
               width="10%"
             >
               <span
-                class="css-fyize4-Text"
+                class="ant-typography ant-typography-ellipsis ant-typography-single-line ant-typography-ellipsis-single-line"
               >
                 0.1.0
               </span>
@@ -440,23 +500,20 @@ exports[`load PluginInstaller list with one plugin installed 1`] = `
               width="flex"
             >
               <div
-                class="css-4yiclo-View-FlexBox-FlexRow epz0qe20"
+                class="css-s1wsbn-Container-Horizontal e1hsqii14"
               >
                 <span
-                  class="css-fyize4-Text"
+                  class="ant-typography ant-typography-ellipsis ant-typography-single-line ant-typography-ellipsis-single-line"
                 >
                   World?
                 </span>
-                <div
-                  class="css-t4wmtk-View-FlexBox-Spacer e13mj6h80"
-                />
                 <a
                   class="ant-typography"
                   href="https://yarnpkg.com/en/package/flipper-plugin-hello"
                 >
                   <div
-                    class="css-5r6dd6-ColoredIconCustom e528dze0"
+                    class="css-1kmzf9v-ColoredIconCustom e528dze0"
-                    color="#bec2c9"
+                    color="var(--light-color-button-active)"
                     size="16"
                     src="https://facebook.com/assets/?name=info-circle&variant=filled&size=16&set=facebook_icons&density=1x"
                   />
@@ -469,7 +526,7 @@ exports[`load PluginInstaller list with one plugin installed 1`] = `
               width="15%"
             >
               <button
-                class="ant-btn ant-btn-default"
+                class="ant-btn ant-btn-sm"
                 type="button"
               >
                 <span>
@@ -488,7 +545,7 @@ exports[`load PluginInstaller list with one plugin installed 1`] = `
               width="25%"
             >
               <span
-                class="css-fyize4-Text"
+                class="ant-typography ant-typography-ellipsis ant-typography-single-line ant-typography-ellipsis-single-line"
               >
                 world
               </span>
@@ -499,7 +556,7 @@ exports[`load PluginInstaller list with one plugin installed 1`] = `
               width="10%"
             >
               <span
-                class="css-fyize4-Text"
+                class="ant-typography ant-typography-ellipsis ant-typography-single-line ant-typography-ellipsis-single-line"
               >
                 0.2.0
               </span>
@@ -510,23 +567,20 @@ exports[`load PluginInstaller list with one plugin installed 1`] = `
               width="flex"
             >
               <div
-                class="css-4yiclo-View-FlexBox-FlexRow epz0qe20"
+                class="css-s1wsbn-Container-Horizontal e1hsqii14"
               >
                 <span
-                  class="css-fyize4-Text"
+                  class="ant-typography ant-typography-ellipsis ant-typography-single-line ant-typography-ellipsis-single-line"
                 >
                   Hello?
                 </span>
-                <div
-                  class="css-t4wmtk-View-FlexBox-Spacer e13mj6h80"
-                />
                 <a
                   class="ant-typography"
                   href="https://yarnpkg.com/en/package/flipper-plugin-world"
                 >
                   <div
-                    class="css-5r6dd6-ColoredIconCustom e528dze0"
+                    class="css-1kmzf9v-ColoredIconCustom e528dze0"
-                    color="#bec2c9"
+                    color="var(--light-color-button-active)"
                     size="16"
                     src="https://facebook.com/assets/?name=info-circle&variant=filled&size=16&set=facebook_icons&density=1x"
                   />
@@ -539,7 +593,7 @@ exports[`load PluginInstaller list with one plugin installed 1`] = `
               width="15%"
             >
               <button
-                class="ant-btn ant-btn-primary"
+                class="ant-btn ant-btn-primary ant-btn-sm"
                 type="button"
               >
                 <span>
@@ -551,7 +605,6 @@ exports[`load PluginInstaller list with one plugin installed 1`] = `
         </div>
       </div>
     </div>
-  </div>
     <div
       class="css-1lxv8hi-Container-Horizontal-SandyToolbarContainer e1ecpah20"
     >
@@ -612,4 +665,5 @@ exports[`load PluginInstaller list with one plugin installed 1`] = `
       </div>
     </div>
   </div>
+</div>
 `;