From 8b013ce979e9df373fe51bbe2a3b99b58b0d63c7 Mon Sep 17 00:00:00 2001
From: Charles Zhao <charleszhao@silverhand.io>
Date: Thu, 17 Aug 2023 01:07:18 -0500
Subject: [PATCH] fix(console): should hide filters from app list empty
 placeholder (#4358)

---
 .../components/GuideGroup/index.module.scss   |  1 +
 .../components/GuideLibrary/index.tsx         | 57 ++++++++++---------
 .../components/GuideLibraryModal/index.tsx    |  2 +-
 3 files changed, 32 insertions(+), 28 deletions(-)

diff --git a/packages/console/src/pages/Applications/components/GuideGroup/index.module.scss b/packages/console/src/pages/Applications/components/GuideGroup/index.module.scss
index 841767ece..18fd91047 100644
--- a/packages/console/src/pages/Applications/components/GuideGroup/index.module.scss
+++ b/packages/console/src/pages/Applications/components/GuideGroup/index.module.scss
@@ -3,6 +3,7 @@
 .guideGroup {
   display: flex;
   flex-direction: column;
+  max-width: 1876px;
   container-type: inline-size;
 
   label {
diff --git a/packages/console/src/pages/Applications/components/GuideLibrary/index.tsx b/packages/console/src/pages/Applications/components/GuideLibrary/index.tsx
index e62a1f647..a86b4b9c0 100644
--- a/packages/console/src/pages/Applications/components/GuideLibrary/index.tsx
+++ b/packages/console/src/pages/Applications/components/GuideLibrary/index.tsx
@@ -24,9 +24,10 @@ import * as styles from './index.module.scss';
 type Props = {
   className?: string;
   hasCardBorder?: boolean;
+  hasFilters?: boolean;
 };
 
-function GuideLibrary({ className, hasCardBorder }: Props) {
+function GuideLibrary({ className, hasCardBorder, hasFilters }: Props) {
   const { t } = useTranslation(undefined, { keyPrefix: 'admin_console.applications.guide' });
   const { navigate } = useTenantPathname();
   const [keyword, setKeyword] = useState<string>('');
@@ -68,35 +69,37 @@ function GuideLibrary({ className, hasCardBorder }: Props) {
 
   return (
     <div className={classNames(styles.container, className)}>
-      <div className={styles.filters}>
-        <label>{t('filter.title')}</label>
-        <TextInput
-          className={styles.searchInput}
-          icon={<SearchIcon />}
-          placeholder={t('filter.placeholder')}
-          value={keyword}
-          onChange={(event) => {
-            setKeyword(event.currentTarget.value);
-          }}
-        />
-        <div className={styles.checkboxGroupContainer}>
-          <CheckboxGroup
-            className={styles.checkboxGroup}
-            options={allAppGuideCategories.map((category) => ({
-              title: `applications.guide.categories.${category}`,
-              value: category,
-            }))}
-            value={filterCategories}
-            onChange={(value) => {
-              const sortedValue = allAppGuideCategories.filter((category) =>
-                value.includes(category)
-              );
-              setFilterCategories(sortedValue);
+      {hasFilters && (
+        <div className={styles.filters}>
+          <label>{t('filter.title')}</label>
+          <TextInput
+            className={styles.searchInput}
+            icon={<SearchIcon />}
+            placeholder={t('filter.placeholder')}
+            value={keyword}
+            onChange={(event) => {
+              setKeyword(event.currentTarget.value);
             }}
           />
-          {isM2mDisabledForCurrentPlan && <ProTag className={styles.proTag} />}
+          <div className={styles.checkboxGroupContainer}>
+            <CheckboxGroup
+              className={styles.checkboxGroup}
+              options={allAppGuideCategories.map((category) => ({
+                title: `applications.guide.categories.${category}`,
+                value: category,
+              }))}
+              value={filterCategories}
+              onChange={(value) => {
+                const sortedValue = allAppGuideCategories.filter((category) =>
+                  value.includes(category)
+                );
+                setFilterCategories(sortedValue);
+              }}
+            />
+            {isM2mDisabledForCurrentPlan && <ProTag className={styles.proTag} />}
+          </div>
         </div>
-      </div>
+      )}
       {keyword && (
         <GuideGroup
           className={styles.guideGroup}
diff --git a/packages/console/src/pages/Applications/components/GuideLibraryModal/index.tsx b/packages/console/src/pages/Applications/components/GuideLibraryModal/index.tsx
index 591142ad2..6dffef933 100644
--- a/packages/console/src/pages/Applications/components/GuideLibraryModal/index.tsx
+++ b/packages/console/src/pages/Applications/components/GuideLibraryModal/index.tsx
@@ -30,7 +30,7 @@ function GuideLibraryModal({ isOpen, onClose }: Props) {
     >
       <div className={styles.container}>
         <GuideHeader onClose={onClose} />
-        <GuideLibrary className={styles.content} />
+        <GuideLibrary hasFilters className={styles.content} />
         <nav className={styles.actionBar}>
           <span className={styles.text}>{t('do_not_need_tutorial')}</span>
           <Button