Refine NO_VALUE renderer

Summary: Project doc: https://docs.google.com/document/d/1miofxds9DJgWScj0zFyBbdpRH5Rj0T9FqiCapof5-vU

Reviewed By: lblasa

Differential Revision: D48637454

fbshipit-source-id: acc1926036e981c28ad678c2a3c1b7f0d5b9f992

desktop/flipper-plugin/src/ui/PowerSearch/PowerSearchTerm.tsx

@@ -36,10 +36,11 @@ export const PowerSearchTerm: React.FC<PowerSearchTermProps> = ({
   onCancel,
   onFinalize,
 }) => {
-  let searchValueInputComponent: React.ReactNode = null;
+  let searchValueComponent: React.ReactNode = null;
+  if (searchValueRenderer === 'input') {
     switch (searchTerm.operator.valueType) {
       case 'STRING': {
-      searchValueInputComponent = (
+        searchValueComponent = (
           <PowerSearchStringTerm
             onCancel={onCancel}
             onChange={(newValue) => {
@@ -53,7 +54,7 @@ export const PowerSearchTerm: React.FC<PowerSearchTermProps> = ({
         break;
       }
       case 'INTEGER': {
-      searchValueInputComponent = (
+        searchValueComponent = (
           <PowerSearchIntegerTerm
             onCancel={onCancel}
             onChange={(newValue) => {
@@ -67,7 +68,7 @@ export const PowerSearchTerm: React.FC<PowerSearchTermProps> = ({
         break;
       }
       case 'FLOAT': {
-      searchValueInputComponent = (
+        searchValueComponent = (
           <PowerSearchFloatTerm
             onCancel={onCancel}
             onChange={(newValue) => {
@@ -81,12 +82,12 @@ export const PowerSearchTerm: React.FC<PowerSearchTermProps> = ({
         break;
       }
       case 'NO_VALUE': {
-      // Nothing needs to be done. The effect below is going to fire and mark it as the final value.
-      searchValueInputComponent = null;
+        // Nothing needs to be done. It should never be the case.
+        searchValueComponent = null;
         break;
       }
       case 'ENUM': {
-      searchValueInputComponent = (
+        searchValueComponent = (
           <PowerSearchEnumTerm
             onCancel={onCancel}
             onChange={(newValue) => {
@@ -108,25 +109,33 @@ export const PowerSearchTerm: React.FC<PowerSearchTermProps> = ({
         );
       }
     }
-
-  React.useEffect(() => {
-    if (searchTerm.operator.valueType === 'NO_VALUE') {
-      onFinalize({
-        ...searchTerm,
-        searchValue: null,
-      });
+  } else {
+    switch (searchTerm.operator.valueType) {
+      case 'ENUM': {
+        searchValueComponent = (
+          <Button>
+            {searchTerm.operator.enumLabels[searchTerm.searchValue]}
+          </Button>
+        );
+        break;
+      }
+      case 'NO_VALUE': {
+        searchValueComponent = null;
+        break;
+      }
+      default: {
+        searchValueComponent = <Button>{searchTerm.searchValue}</Button>;
+      }
+    }
   }
-  }, [searchTerm, onFinalize]);
 
   return (
     <Space.Compact block size="small">
       <Button>{searchTerm.field.label}</Button>
+      {searchTerm.operator.label ? (
         <Button>{searchTerm.operator.label}</Button>
-      {searchValueRenderer === 'button' ? (
-        <Button>{searchTerm.searchValue ?? '...'}</Button>
-      ) : (
-        searchValueInputComponent
-      )}
+      ) : null}
+      {searchValueComponent}
       <Button
         icon={<CloseOutlined />}
         onClick={() => {

desktop/flipper-plugin/src/ui/PowerSearch/index.tsx

@@ -116,8 +116,9 @@ export const PowerSearch: React.FC<PowerSearchProps> = ({
               onFinalize={(finalSearchTerm) => {
                 setSearchExpression((prevSearchExpression) => {
                   return [
-                    ...prevSearchExpression.slice(0, -1),
+                    ...prevSearchExpression.slice(0, i),
                     finalSearchTerm,
+                    ...prevSearchExpression.slice(i + 1),
                   ];
                 });
                 searchTermFinderRef.current?.focus();
@@ -140,6 +141,8 @@ export const PowerSearch: React.FC<PowerSearchProps> = ({
             {
               field: fieldConfig,
               operator: operatorConfig,
+              searchValue:
+                operatorConfig.valueType === 'NO_VALUE' ? null : undefined,
             },
           ]);
         }}