From 100760c4649d100981782785e96b975676d6244d Mon Sep 17 00:00:00 2001
From: Stephen Liu <750188453@qq.com>
Date: Mon, 27 Sep 2021 15:21:25 +0800
Subject: [PATCH] fix(gallery): Hide the bottom info section when no chart is
 being selected (#16840)

---
 .../VizTypeControl/VizTypeGallery.tsx         | 53 ++++++++-----------
 1 file changed, 22 insertions(+), 31 deletions(-)

diff --git a/superset-frontend/src/explore/components/controls/VizTypeControl/VizTypeGallery.tsx b/superset-frontend/src/explore/components/controls/VizTypeControl/VizTypeGallery.tsx
index 7f2933428b..c817c50c42 100644
--- a/superset-frontend/src/explore/components/controls/VizTypeControl/VizTypeGallery.tsx
+++ b/superset-frontend/src/explore/components/controls/VizTypeControl/VizTypeGallery.tsx
@@ -125,17 +125,23 @@ const RECOMMENDED_TAGS = [t('Popular'), t('ECharts'), t('Advanced-Analytics')];
 
 export const VIZ_TYPE_CONTROL_TEST_ID = 'viz-type-control';
 
-const VizPickerLayout = styled.div`
-  display: grid;
-  grid-template-rows: auto minmax(100px, 1fr) minmax(200px, 35%);
-  // em is used here because the sidebar should be sized to fit the longest standard tag
-  grid-template-columns: minmax(14em, auto) 5fr;
-  grid-template-areas:
-    'sidebar search'
-    'sidebar main'
-    'details details';
-  height: 70vh;
-  overflow: auto;
+const VizPickerLayout = styled.div<{ isSelectedVizMetadata: boolean }>`
+  ${({ isSelectedVizMetadata }) => `
+    display: grid;
+    grid-template-rows: ${
+      isSelectedVizMetadata
+        ? `auto minmax(100px, 1fr) minmax(200px, 35%)`
+        : 'auto minmax(100px, 1fr)'
+    };
+    // em is used here because the sidebar should be sized to fit the longest standard tag
+    grid-template-columns: minmax(14em, auto) 5fr;
+    grid-template-areas:
+      'sidebar search'
+      'sidebar main'
+      'details details';
+    height: 70vh;
+    overflow: auto;
+  `}
 `;
 
 const SectionTitle = styled.h3`
@@ -269,15 +275,6 @@ const DetailsPopulated = (theme: SupersetTheme) => css`
     'description examples';
 `;
 
-const DetailsEmpty = (theme: SupersetTheme) => css`
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  text-align: center;
-  font-style: italic;
-  color: ${theme.colors.grayscale.light1};
-`;
-
 // overflow hidden on the details pane and overflow auto on the description
 // (plus grid layout) enables the description to scroll while the header stays in place.
 const TagsWrapper = styled.div`
@@ -642,7 +639,10 @@ export default function VizTypeGallery(props: VizTypeGalleryProps) {
   };
 
   return (
-    <VizPickerLayout className={className}>
+    <VizPickerLayout
+      className={className}
+      isSelectedVizMetadata={Boolean(selectedVizMetadata)}
+    >
       <LeftPane>
         <Selector
           css={({ gridUnit }) =>
@@ -769,16 +769,7 @@ export default function VizTypeGallery(props: VizTypeGalleryProps) {
             </Examples>
           </>
         </div>
-      ) : (
-        <div
-          css={(theme: SupersetTheme) => [
-            DetailsPane(theme),
-            DetailsEmpty(theme),
-          ]}
-        >
-          {t('Select a visualization type')}
-        </div>
-      )}
+      ) : null}
     </VizPickerLayout>
   );
 }