feat(ResourceExplorer): hide properties table when not needed to be d…

…isplayed
awslabs · Dec 18, 2023 · bcf36b1 · bcf36b1
1 parent e616be4
commit bcf36b1
Show file tree

Hide file tree

Showing 3 changed files with 66 additions and 58 deletions.
diff --git a/...amQueryEditor/modeledDataStreamExplorer/modeledDataStreamTable/modeledDataStreamTable.tsx b/...amQueryEditor/modeledDataStreamExplorer/modeledDataStreamTable/modeledDataStreamTable.tsx
@@ -147,7 +147,7 @@ export function ModeledDataStreamTable({
       stickyColumns={preferences.stickyColumns}
       isItemDisabled={(item) => isInValidProperty(item.dataType, selectedWidgets?.at(0)?.type)}
       empty={<ModeledDataStreamTableEmptyState isAssetSelected={selectedAsset != null} />}
-      filter={<ModeledDataStreamTablePropertyFilter {...propertyFilterProps} />}
+      filter={modeledDataStreams.length > 0 && <ModeledDataStreamTablePropertyFilter {...propertyFilterProps} />}
       header={
         <ModeledDataStreamTableHeader
           selectedItemCount={collectionProps.selectedItems?.length}

diff --git a/...modeledDataStreamExplorer/modeledDataStreamTable/modeledDataStreamTablePropertyFilter.tsx b/...modeledDataStreamExplorer/modeledDataStreamTable/modeledDataStreamTablePropertyFilter.tsx
@@ -44,43 +44,46 @@ type ModeledDataStreamPropertyFilterProps = Omit<PropertyFilterProps, 'i18nStrin
 
 export function ModeledDataStreamTablePropertyFilter(props: ModeledDataStreamPropertyFilterProps) {
   return (
-    <PropertyFilter
-      {...props}
-      filteringLoadingText='Loading suggestions'
-      filteringErrorText='Error fetching suggestions.'
-      filteringRecoveryText='Retry'
-      filteringFinishedText='End of results'
-      filteringEmpty='No suggestions found'
-      i18nStrings={{
-        filteringAriaLabel: 'Filter modeled data streams by text, property, or value',
-        dismissAriaLabel: 'Dismiss',
-        filteringPlaceholder: 'Filter modeled data streams by text, property, or value',
-        groupValuesText: 'Values',
-        groupPropertiesText: 'Properties',
-        operatorsText: 'Operators',
-        operationAndText: 'and',
-        operationOrText: 'or',
-        operatorLessText: 'Less than',
-        operatorLessOrEqualText: 'Less than or equal',
-        operatorGreaterText: 'Greater than',
-        operatorGreaterOrEqualText: 'Greater than or equal',
-        operatorContainsText: 'Contains',
-        operatorDoesNotContainText: 'Does not contain',
-        operatorEqualsText: 'Equals',
-        operatorDoesNotEqualText: 'Does not equal',
-        editTokenHeader: 'Edit filter',
-        propertyText: 'Property',
-        operatorText: 'Operator',
-        valueText: 'Value',
-        cancelActionText: 'Cancel',
-        applyActionText: 'Apply',
-        allPropertiesLabel: 'All properties',
-        tokenLimitShowMore: 'Show more',
-        tokenLimitShowFewer: 'Show fewer',
-        clearFiltersText: 'Clear filters',
-        removeTokenButtonAriaLabel: (token) => `Remove token ${token.propertyKey} ${token.operator} ${token.value}`,
-        enteredTextLabel: (text) => `Use: "${text}"`,
-      }}
-    />
+    <>
+      <strong>Filter by:</strong>
+      <PropertyFilter
+        {...props}
+        filteringLoadingText='Loading suggestions'
+        filteringErrorText='Error fetching suggestions.'
+        filteringRecoveryText='Retry'
+        filteringFinishedText='End of results'
+        filteringEmpty='No suggestions found'
+        i18nStrings={{
+          filteringAriaLabel: 'Filter modeled data streams by text, property, or value',
+          dismissAriaLabel: 'Dismiss',
+          filteringPlaceholder: 'Filter modeled data streams by text, property, or value',
+          groupValuesText: 'Values',
+          groupPropertiesText: 'Properties',
+          operatorsText: 'Operators',
+          operationAndText: 'and',
+          operationOrText: 'or',
+          operatorLessText: 'Less than',
+          operatorLessOrEqualText: 'Less than or equal',
+          operatorGreaterText: 'Greater than',
+          operatorGreaterOrEqualText: 'Greater than or equal',
+          operatorContainsText: 'Contains',
+          operatorDoesNotContainText: 'Does not contain',
+          operatorEqualsText: 'Equals',
+          operatorDoesNotEqualText: 'Does not equal',
+          editTokenHeader: 'Edit filter',
+          propertyText: 'Property',
+          operatorText: 'Operator',
+          valueText: 'Value',
+          cancelActionText: 'Cancel',
+          applyActionText: 'Apply',
+          allPropertiesLabel: 'All properties',
+          tokenLimitShowMore: 'Show more',
+          tokenLimitShowFewer: 'Show fewer',
+          clearFiltersText: 'Clear filters',
+          removeTokenButtonAriaLabel: (token) => `Remove token ${token.propertyKey} ${token.operator} ${token.value}`,
+          enteredTextLabel: (text) => `Use: "${text}"`,
+        }}
+      />
+    </>
   );
 }
diff --git a/...itor/iotSiteWiseQueryEditor/modeledDataStreamQueryEditor/modeledDataStreamQueryEditor.tsx b/...itor/iotSiteWiseQueryEditor/modeledDataStreamQueryEditor/modeledDataStreamQueryEditor.tsx
@@ -52,29 +52,34 @@ export function ModeledDataStreamQueryEditor({
       {selectedSegment === BROWSE_SEGMENT_ID ? (
         <>
           <AssetExplorer client={iotSiteWiseClient} onSelect={handleOnSelectAsset} />
-          <ModeledDataStreamExplorer
-            client={iotSiteWiseClient}
-            onClickAddModeledDataStreams={onClickAdd}
-            selectedAsset={
-              selectedAsset?.id && selectedAsset?.assetModelId
-                ? { assetId: selectedAsset.id, assetModelId: selectedAsset.assetModelId }
-                : undefined
-            }
-          />
+          <br />
+          {selectedAsset != null && (
+            <ModeledDataStreamExplorer
+              client={iotSiteWiseClient}
+              onClickAddModeledDataStreams={onClickAdd}
+              selectedAsset={
+                selectedAsset?.id && selectedAsset?.assetModelId
+                  ? { assetId: selectedAsset.id, assetModelId: selectedAsset.assetModelId }
+                  : undefined
+              }
+            />
+          )}
         </>
       ) : (
         <>
           <DataStreamSearch onSubmit={setSearchFieldValues} client={iotTwinMakerClient} />
-          <ModeledDataStreamExplorer
-            hasNextPage={hasNextPage}
-            isFetching={isFetching}
-            client={iotSiteWiseClient}
-            dataStreams={modeledDataStreams}
-            onClickAddModeledDataStreams={onClickAdd}
-            onClickNextPage={fetchNextPage}
-            isSearchError={isError}
-            searchQuery={searchFieldValues.searchQuery}
-          />
+          {searchFieldValues.searchQuery.length > 0 && (
+            <ModeledDataStreamExplorer
+              hasNextPage={hasNextPage}
+              isFetching={isFetching}
+              client={iotSiteWiseClient}
+              dataStreams={modeledDataStreams}
+              onClickAddModeledDataStreams={onClickAdd}
+              onClickNextPage={fetchNextPage}
+              isSearchError={isError}
+              searchQuery={searchFieldValues.searchQuery}
+            />
+          )}
         </>
       )}
     </Box>