Support auto completion on discovered bookmarks and filling out params

Summary:
This diff adds support for finding appPatterns (not sure how the feature is called) in the device, and auto completing on it.

Also improved the styling of bookmark sections.

This diff also adds support of showing a dialog in which params an be filled out if needed.

The behavior around optional arguments seems buggy, as in, no dialog will show up, but since I didn't want to change the logic around this unilaterally, left it as-is for now.

Updated the dialog to Ant so that the renderReactRoot utility could be used safely

Reviewed By: cekkaewnumchai

Differential Revision: D24889855

fbshipit-source-id: 6af264abec2e9e5b921ef7da6deb1d0021615e9e

desktop/plugins/navigation/components/RequiredParametersDialog.tsx

@@ -7,7 +7,8 @@
  * @format
  */
 
-import {Button, FlexColumn, Input, Sheet, styled, Glyph, colors} from 'flipper';
+import {Modal, Button, Alert, Input, Typography} from 'antd';
+import {Layout} from 'flipper-plugin';
 import {
   replaceRequiredParametersWithValues,
   parameterIsNumberType,
@@ -23,142 +24,76 @@ import {URI} from '../types';
 type Props = {
   uri: string;
   requiredParameters: Array<string>;
-  shouldShow: boolean;
-  onHide?: () => void;
+  onHide: () => void;
   onSubmit: (uri: URI) => void;
 };
 
-const Container = styled(FlexColumn)({
-  padding: 10,
-  width: 600,
-});
-
-const Title = styled.span({
-  display: 'flex',
-  marginTop: 8,
-  marginLeft: 2,
-  marginBottom: 8,
-});
-
-const Text = styled.span({
-  lineHeight: 1.3,
-});
-
-const ErrorLabel = styled.span({
-  color: colors.yellow,
-  lineHeight: 1.4,
-});
-
-const URIContainer = styled.div({
-  lineHeight: 1.3,
-  marginLeft: 2,
-  marginBottom: 8,
-  marginTop: 10,
-  overflowWrap: 'break-word',
-});
-
-const ButtonContainer = styled.div({
-  marginLeft: 'auto',
-});
-
-const RequiredParameterInput = styled(Input)({
-  margin: 0,
-  marginTop: 8,
-  height: 30,
-  width: '100%',
-});
-
-const WarningIconContainer = styled.span({
-  marginRight: 8,
-});
-
 export default (props: Props) => {
-  const {shouldShow, onHide, onSubmit, uri, requiredParameters} = props;
+  const {onHide, onSubmit, uri, requiredParameters} = props;
   const {isValid, values, setValuesArray} = useRequiredParameterFormValidator(
     requiredParameters,
   );
-  if (uri == null || !shouldShow) {
-    return null;
-  } else {
-    return (
-      <Sheet onHideSheet={onHide}>
-        {(hide: () => void) => {
-          return (
-            <Container>
-              <Title>
-                <WarningIconContainer>
-                  <Glyph
-                    name="caution-triangle"
-                    size={16}
-                    variant="filled"
-                    color={colors.yellow}
-                  />
-                </WarningIconContainer>
-                <Text>
-                  This uri has required parameters denoted by {'{parameter}'}.
-                </Text>
-              </Title>
-              {requiredParameters.map((paramater, idx) => (
-                <div key={idx}>
-                  <RequiredParameterInput
-                    onChange={(event: React.ChangeEvent<HTMLInputElement>) =>
-                      setValuesArray([
-                        ...values.slice(0, idx),
-                        event.target.value,
-                        ...values.slice(idx + 1),
-                      ])
-                    }
-                    name={paramater}
-                    placeholder={paramater}
-                  />
-                  {values[idx] &&
-                  parameterIsNumberType(paramater) &&
-                  !validateParameter(values[idx], paramater) ? (
-                    <ErrorLabel>Parameter must be a number</ErrorLabel>
-                  ) : null}
-                  {values[idx] &&
-                  parameterIsBooleanType(paramater) &&
-                  !validateParameter(values[idx], paramater) ? (
-                    <ErrorLabel>
-                      Parameter must be either 'true' or 'false'
-                    </ErrorLabel>
-                  ) : null}
-                </div>
-              ))}
-              <URIContainer>{liveEdit(uri, values)}</URIContainer>
-              <ButtonContainer>
-                <Button
-                  onClick={() => {
-                    if (onHide != null) {
-                      onHide();
-                    }
-                    setValuesArray([]);
-                    hide();
-                  }}
-                  compact
-                  padded>
-                  Cancel
-                </Button>
-                <Button
-                  type={isValid ? 'primary' : undefined}
-                  onClick={() => {
-                    onSubmit(replaceRequiredParametersWithValues(uri, values));
-                    if (onHide != null) {
-                      onHide();
-                    }
-                    setValuesArray([]);
-                    hide();
-                  }}
-                  disabled={!isValid}
-                  compact
-                  padded>
-                  Submit
-                </Button>
-              </ButtonContainer>
-            </Container>
-          );
-        }}
-      </Sheet>
-    );
-  }
+  return (
+    <Modal
+      visible
+      onCancel={onHide}
+      title="Provide bookmark details"
+      footer={
+        <>
+          <Button
+            onClick={() => {
+              onHide();
+              setValuesArray([]);
+            }}>
+            Cancel
+          </Button>
+          <Button
+            type={'primary'}
+            onClick={() => {
+              onSubmit(replaceRequiredParametersWithValues(uri, values));
+              onHide();
+            }}
+            disabled={!isValid}>
+            Submit
+          </Button>
+        </>
+      }>
+      <Layout.Container gap>
+        <Alert
+          type="info"
+          message="This uri has required parameters denoted by '{parameter}'}."
+        />
+
+        {requiredParameters.map((paramater, idx) => (
+          <div key={idx}>
+            <Input
+              onChange={(event: React.ChangeEvent<HTMLInputElement>) =>
+                setValuesArray([
+                  ...values.slice(0, idx),
+                  event.target.value,
+                  ...values.slice(idx + 1),
+                ])
+              }
+              name={paramater}
+              placeholder={paramater}
+            />
+            {values[idx] &&
+            parameterIsNumberType(paramater) &&
+            !validateParameter(values[idx], paramater) ? (
+              <Alert type="error" message="Parameter must be a number" />
+            ) : null}
+            {values[idx] &&
+            parameterIsBooleanType(paramater) &&
+            !validateParameter(values[idx], paramater) ? (
+              <Alert
+                type="error"
+                message="Parameter must be either 'true' or 'false'"
+              />
+            ) : null}
+          </div>
+        ))}
+        <Typography.Text code>{liveEdit(uri, values)}</Typography.Text>
+      </Layout.Container>
+    </Modal>
+  );
 };

desktop/plugins/navigation/hooks/requiredParameters.tsx

@@ -7,7 +7,7 @@
  * @format
  */
 
-import {useEffect, useState} from 'react';
+import {useMemo, useState} from 'react';
 import {validateParameter} from '../util/uri';
 
 export const useRequiredParameterFormValidator = (
@@ -16,8 +16,7 @@ export const useRequiredParameterFormValidator = (
   const [values, setValuesArray] = useState<Array<string>>(
     requiredParameters.map(() => ''),
   );
-  const [isValid, setIsValid] = useState(false);
-  useEffect(() => {
+  const isValid = useMemo(() => {
     if (requiredParameters.length != values.length) {
       setValuesArray(requiredParameters.map(() => ''));
     }
@@ -26,10 +25,10 @@ export const useRequiredParameterFormValidator = (
         validateParameter(value, requiredParameters[idx]),
       )
     ) {
-      setIsValid(true);
+      return true;
     } else {
-      setIsValid(false);
+      return false;
     }
-  });
+  }, [requiredParameters, values]);
   return {isValid, values, setValuesArray};
 };

desktop/plugins/navigation/index.tsx

@@ -41,6 +41,7 @@ import {
   useValue,
   usePlugin,
   Layout,
+  renderReactRoot,
 } from 'flipper-plugin';
 
 export type State = {
@@ -71,8 +72,6 @@ export function plugin(client: PluginClient<Events, Methods>) {
     persist: 'appMatchPatterns',
   });
   const currentURI = createState('');
-  const shouldShowURIErrorDialog = createState(false);
-  const requiredParameters = createState<string[]>([]);
   const shouldShowSaveBookmarkDialog = createState(false);
   const saveBookmarkURI = createState<null | string>(null);
 
@@ -131,13 +130,18 @@ export function plugin(client: PluginClient<Events, Methods>) {
         );
       }
     } else {
-      requiredParameters.set(params);
-      shouldShowURIErrorDialog.set(true);
+      renderReactRoot((unmount) => (
+        <RequiredParametersDialog
+          onHide={unmount}
+          uri={filteredQuery}
+          requiredParameters={params}
+          onSubmit={navigateTo}
+        />
+      ));
     }
   }
 
   function onFavorite(uri: string) {
-    // TODO: why does this need a dialog?
     shouldShowSaveBookmarkDialog.set(true);
     saveBookmarkURI.set(uri);
   }
@@ -169,11 +173,29 @@ export function plugin(client: PluginClient<Events, Methods>) {
     bookmarks,
     saveBookmarkURI,
     shouldShowSaveBookmarkDialog,
-    shouldShowURIErrorDialog,
-    requiredParameters,
     appMatchPatterns,
     navigationEvents,
     currentURI,
+    getAutoCompleteAppMatchPatterns(
+      query: string,
+      bookmarks: Map<string, Bookmark>,
+      appMatchPatterns: AppMatchPattern[],
+      limit: number,
+    ): AppMatchPattern[] {
+      const q = query.toLowerCase();
+      const results: AppMatchPattern[] = [];
+      for (const item of appMatchPatterns) {
+        if (
+          !bookmarks.has(item.pattern) &&
+          (item.className.toLowerCase().includes(q) ||
+            item.pattern.toLowerCase().includes(q))
+        ) {
+          results.push(item);
+          if (--limit < 1) break;
+        }
+      }
+      return results;
+    },
   };
 }
 
@@ -185,8 +207,6 @@ export function Component() {
   const shouldShowSaveBookmarkDialog = useValue(
     instance.shouldShowSaveBookmarkDialog,
   );
-  const shouldShowURIErrorDialog = useValue(instance.shouldShowURIErrorDialog);
-  const requiredParameters = useValue(instance.requiredParameters);
   const currentURI = useValue(instance.currentURI);
   const navigationEvents = useValue(instance.navigationEvents);
 
@@ -227,15 +247,6 @@ export function Component() {
         onSubmit={instance.addBookmark}
         onRemove={instance.removeBookmark}
       />
-      <RequiredParametersDialog
-        shouldShow={shouldShowURIErrorDialog}
-        onHide={() => {
-          instance.shouldShowURIErrorDialog.set(false);
-        }}
-        uri={currentURI}
-        requiredParameters={requiredParameters}
-        onSubmit={instance.navigateTo}
-      />
     </Layout.Container>
   );
 }

desktop/plugins/navigation/package.json

@@ -15,6 +15,7 @@
     "email": "beneloca@fb.com"
   },
   "peerDependencies": {
-    "flipper-plugin": "0.64.0"
+    "flipper-plugin": "0.64.0",
+    "antd": "*"
   }
 }