[integrations] feat: adds variable group list empty state (#2068)

* refactor behind conditional

* feat: adds no results component

* adjust description

* remove brackets

src/views/product-integration/component-view/components/searchable-variable-group-list/index.tsx

@@ -7,6 +7,7 @@ import { IconSearch16 } from '@hashicorp/flight-icons/svg-react/search-16'
 import FilterInput from 'components/filter-input'
 import { CheckboxField } from 'components/form/field-controls'
 import { useState } from 'react'
+import { NoResultsMessage } from 'views/product-integrations-landing/components/integrations-list'
 import { Variable, VariableGroupList } from '../variable-group-list'
 import {
 	applyQueryFilter,
@@ -88,10 +89,22 @@ export default function SearchableVariableGroupList({
 			<p className={s.results} role="status">
 				{numMatches} {numMatches === 1 ? 'Result' : 'Results'}
 			</p>
-			<VariableGroupList
-				groupName={groupName}
-				variables={matchesWithAncestors}
-			/>
+			{numMatches > 0 ? (
+				<VariableGroupList
+					groupName={groupName}
+					variables={matchesWithAncestors}
+				/>
+			) : (
+				<NoResultsMessage
+					description="Try adjusting your keywords."
+					onClearFiltersClicked={() => {
+						setSearchQuery('')
+						if (requiredOnly) {
+							setRequiredOnly(false)
+						}
+					}}
+				/>
+			)}
 		</div>
 	)
 }

src/views/product-integrations-landing/components/integrations-list/index.tsx

@@ -91,14 +91,19 @@ function IntegrationCard({ integration }: IntegrationCardProps) {
 
 interface NoResultsMessageProps {
 	onClearFiltersClicked: () => void
+	description?: string
 }
 
-function NoResultsMessage({ onClearFiltersClicked }: NoResultsMessageProps) {
+export function NoResultsMessage({
+	onClearFiltersClicked,
+	description,
+}: NoResultsMessageProps) {
 	return (
 		<div className={s.noResultsWrapper}>
 			<p className={s.noResultsTitle}>No Results</p>
 			<p className={s.noResultsDescription}>
-				Try adjusting your selected filters or using different keywords.
+				{description ||
+					'Try adjusting your selected filters or using different keywords.'}
 			</p>
 			<div className={s.noResultsButtonWrapper}>
 				<Button