Fix custom expression filter cannot show (opensearch-project#178)

* Fix custom expression filter cannot show

This PR fixes that a new detector with custom filter created using API cannot show.

Testing done:
1. Created a detector with a custom filter and verified the change fixed the issue.

Signed-off-by: Kaituo Li <kaituo@amazon.com>

Author: kaituo

public/pages/ReviewAndCreate/components/FilterDisplayList/FilterDisplayList.tsx

@@ -26,11 +26,14 @@ export const FilterDisplayList = (props: FilterDisplayListProps) => {
   const [filterIndex, setFilterIndex] = useState<number>(-1);
   let filters = get(props, 'uiMetadata.filters', []);
   const oldFilterType = get(props, 'uiMetadata.filterType', undefined);
-  const isOldDetector = !isEmpty(oldFilterType);
 
-  // Old detectors with custom filters will have no filter list, but
-  // will have a populated filter query
-  if (isEmpty(filters) && isOldDetector && !isEmpty(props.filterQuery)) {
+  // We want to show the custom filter if filters is empty and 
+  // props.filterQuery isn't empty.
+  // Two possible situations for the if branch:
+  // First, old detectors with custom filters will have no filter list, but
+  // will have a populated filter query.
+  // Second, the detector has been created from API (no uiMetadata.* fields).
+  if (isEmpty(filters) && !isEmpty(props.filterQuery)) {
     return (
       <div>
         <EuiText>

public/pages/ReviewAndCreate/containers/__tests__/__snapshots__/ReviewAndCreate.test.tsx.snap

@@ -202,14 +202,24 @@ exports[`<ReviewAndCreate /> spec renders the component 1`] = `
                 <div
                   class="euiFormRow__fieldWrapper"
                 >
-                  <div
-                    class="euiText euiText--medium"
-                  >
-                    <p
-                      class="enabled"
+                  <div>
+                    <div
+                      class="euiText euiText--medium"
                     >
-                      -
-                    </p>
+                      <p
+                        class="enabled"
+                      >
+                        Custom expression:
+                         
+                        <button
+                          class="euiLink euiLink--primary"
+                          data-test-subj="viewFilter"
+                          type="button"
+                        >
+                          View code
+                        </button>
+                      </p>
+                    </div>
                   </div>
                 </div>
               </div>