Add dropdown for selecting groups

Summary: This diff refactors the group selection to the dropdown. As with the growing list of grps, dropdown will be easy to search and scale

Reviewed By: mweststrate

Differential Revision: D21175998

fbshipit-source-id: 90f1a81dfc6c2232cd2dcf767ed01205fc63e1fd

desktop/app/src/ui/components/Line.tsx

@@ -0,0 +1,20 @@
+/**
+ * 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 styled from '@emotion/styled';
+import View from './View';
+import {colors} from './colors';
+
+const Line = styled(View)<{color?: string}>(({color}) => ({
+  backgroundColor: color ? color : colors.greyTint2,
+  height: 1,
+  width: 'auto',
+  flexShrink: 0,
+}));
+export default Line;

desktop/app/src/ui/components/searchable/Searchable.tsx

@@ -30,15 +30,21 @@ const SearchBar = styled(Toolbar)({
 });
 SearchBar.displayName = 'Searchable:SearchBar';
 
-export const SearchBox = styled(FlexBox)({
-  backgroundColor: colors.white,
-  borderRadius: '999em',
-  border: `1px solid ${colors.light15}`,
-  height: '100%',
-  width: '100%',
-  alignItems: 'center',
-  paddingLeft: 4,
-});
+export const SearchBox = styled(FlexBox)<{isInvalidInput?: boolean}>(
+  (props) => {
+    return {
+      backgroundColor: colors.white,
+      borderRadius: '999em',
+      border: `1px solid ${
+        !props.isInvalidInput ? colors.light15 : colors.red
+      }`,
+      height: '100%',
+      width: '100%',
+      alignItems: 'center',
+      paddingLeft: 4,
+    };
+  },
+);
 SearchBox.displayName = 'Searchable:SearchBox';
 
 export const SearchInput = styled(Input)<{

desktop/app/src/ui/index.tsx

@@ -121,7 +121,7 @@ export {default as Tooltip} from './components/Tooltip';
 export {default as TooltipProvider} from './components/TooltipProvider';
 export {default as ResizeSensor} from './components/ResizeSensor';
 export {default as StatusIndicator} from './components/StatusIndicator';
-
+export {default as Line} from './components/Line';
 // typography
 export {default as HorizontalRule} from './components/HorizontalRule';
 export {default as VerticalRule} from './components/VerticalRule';