feat: Adding a show all button to the column/metrics list in the explore view (Allow more than 50 columns to be shown) (#15153)

* Adding a show all button to the column/metrics list in the explore view

* Update superset-frontend/src/explore/components/DatasourcePanel/index.tsx

Co-authored-by: cccs-rc <62034438+cccs-rc@users.noreply.github.com>

* Update superset-frontend/src/explore/components/DatasourcePanel/index.tsx

Co-authored-by: cccs-rc <62034438+cccs-rc@users.noreply.github.com>

* Fixing typo

Co-authored-by: cccs-rc <62034438+cccs-rc@users.noreply.github.com>

superset-frontend/src/explore/components/DatasourcePanel/index.tsx

@@ -42,6 +42,18 @@ export interface Props {
   actions: Partial<ExploreActions> & Pick<ExploreActions, 'setControlValue'>;
 }
 
+const Button = styled.button`
+  background: none;
+  border: none;
+  text-decoration: underline;
+  color: ${({ theme }) => theme.colors.primary.dark1};
+`;
+
+const ButtonContainer = styled.div`
+  text-align: center;
+  padding-top: 2px;
+`;
+
 const DatasourceContainer = styled.div`
   background-color: ${({ theme }) => theme.colors.grayscale.light4};
   position: relative;
@@ -113,6 +125,11 @@ export default function DataSourcePanel({
     columns,
     metrics,
   });
+  const [showAllMetrics, setShowAllMetrics] = useState(false);
+  const [showAllColumns, setShowAllColumns] = useState(false);
+
+  const DEFAULT_MAX_COLUMNS_LENGTH = 50;
+  const DEFAULT_MAX_METRICS_LENGTH = 50;
 
   const search = debounce((value: string) => {
     if (value === '') {
@@ -176,8 +193,12 @@ export default function DataSourcePanel({
     setInputValue('');
   }, [columns, datasource, metrics]);
 
-  const metricSlice = lists.metrics.slice(0, 50);
+  const metricSlice = showAllMetrics
-  const columnSlice = lists.columns.slice(0, 50);
+    ? lists.metrics
+    : lists.metrics.slice(0, DEFAULT_MAX_COLUMNS_LENGTH);
+  const columnSlice = showAllColumns
+    ? lists.columns
+    : lists.columns.slice(0, DEFAULT_MAX_METRICS_LENGTH);
 
   const mainBody = (
     <>
@@ -219,6 +240,15 @@ export default function DataSourcePanel({
                 )}
               </LabelContainer>
             ))}
+            {lists.metrics.length > DEFAULT_MAX_METRICS_LENGTH ? (
+              <ButtonContainer>
+                <Button onClick={() => setShowAllMetrics(!showAllMetrics)}>
+                  {showAllMetrics ? t('Show less...') : t('Show all...')}
+                </Button>
+              </ButtonContainer>
+            ) : (
+              <></>
+            )}
           </Collapse.Panel>
           <Collapse.Panel
             header={<span className="header">{t('Columns')}</span>}
@@ -241,6 +271,15 @@ export default function DataSourcePanel({
                 )}
               </LabelContainer>
             ))}
+            {lists.columns.length > DEFAULT_MAX_COLUMNS_LENGTH ? (
+              <ButtonContainer>
+                <Button onClick={() => setShowAllColumns(!showAllColumns)}>
+                  {showAllColumns ? t('Show Less...') : t('Show all...')}
+                </Button>
+              </ButtonContainer>
+            ) : (
+              <></>
+            )}
           </Collapse.Panel>
         </Collapse>
       </div>