From 6ff5ad66ca1d99ab84f4159e051d142b4ef81373 Mon Sep 17 00:00:00 2001
From: Alexander Polyankin <alexander.polyankin@metabase.com>
Date: Tue, 16 Nov 2021 12:02:40 +0300
Subject: [PATCH] Show inactive tables in database & table pickers in the query
 builder (#18717)

---
 frontend/src/metabase/components/AccordionList.jsx    | 11 +++++++++--
 .../query_builder/components/DataSelector.jsx         |  8 +++++++-
 .../query_builder/components/DataSelector.styled.jsx  |  9 +++++++++
 frontend/test/__support__/sample_dataset_fixture.json |  1 +
 4 files changed, 26 insertions(+), 3 deletions(-)

diff --git a/frontend/src/metabase/components/AccordionList.jsx b/frontend/src/metabase/components/AccordionList.jsx
index a7a0096e3c2..fd3fc967f39 100644
--- a/frontend/src/metabase/components/AccordionList.jsx
+++ b/frontend/src/metabase/components/AccordionList.jsx
@@ -64,6 +64,7 @@ export default class AccordionList extends Component {
 
     // section getters/render props
     renderSectionIcon: PropTypes.func,
+    renderSectionExtra: PropTypes.func,
 
     // item getters/render props
     itemIsSelected: PropTypes.func,
@@ -102,6 +103,7 @@ export default class AccordionList extends Component {
     // section getters/render props
     renderSectionIcon: section =>
       section.icon && <Icon name={section.icon} size={18} />,
+    renderSectionExtra: () => null,
 
     // item getters/render props
     itemIsClickable: item => true,
@@ -467,6 +469,7 @@ const AccordionListCell = ({
   alwaysExpanded,
   toggleSection,
   renderSectionIcon,
+  renderSectionExtra,
   renderItemName,
   renderItemDescription,
   renderItemIcon,
@@ -492,6 +495,7 @@ const AccordionListCell = ({
       );
     } else {
       const icon = renderSectionIcon(section, sectionIndex);
+      const extra = renderSectionExtra(section, sectionIndex);
       const name = section.name;
       content = (
         <div
@@ -512,9 +516,12 @@ const AccordionListCell = ({
               {icon}
             </span>
           )}
-          {name && <h3 className="List-section-title text-wrap">{name}</h3>}
+          {name && (
+            <h3 className="List-section-title flex-full text-wrap">{name}</h3>
+          )}
+          {extra}
           {sections.length > 1 && section.items && section.items.length > 0 && (
-            <span className="flex-align-right hover-child">
+            <span className="flex-align-right ml1 hover-child">
               <Icon
                 name={
                   sectionIsExpanded(sectionIndex) ? "chevronup" : "chevrondown"
diff --git a/frontend/src/metabase/query_builder/components/DataSelector.jsx b/frontend/src/metabase/query_builder/components/DataSelector.jsx
index dfc0b129921..df1522cbea4 100644
--- a/frontend/src/metabase/query_builder/components/DataSelector.jsx
+++ b/frontend/src/metabase/query_builder/components/DataSelector.jsx
@@ -36,6 +36,7 @@ import { getMetadata } from "metabase/selectors/metadata";
 import {
   DataBucketList,
   DataBucketListItem,
+  PickerSpinner,
   RawDataBackButton,
 } from "./DataSelector.styled";
 import "./DataSelector.css";
@@ -1134,11 +1135,13 @@ const DatabaseSchemaPicker = ({
       selectedDatabase.id === database.id &&
       database.schemas.length === 0 &&
       isLoading,
+    active: database.initial_sync,
   }));
 
   if (hasBackButton) {
     sections.unshift({
       name: <RawDataBackButton />,
+      active: true,
     });
   }
 
@@ -1183,6 +1186,9 @@ const DatabaseSchemaPicker = ({
           <Icon className="Icon text-default" name={item.icon} size={18} />
         )
       }
+      renderSectionExtra={item =>
+        !item.active && <PickerSpinner size={16} borderWidth={2} />
+      }
       renderItemIcon={() => <Icon name="folder" size={16} />}
       initiallyOpenSection={openSection}
       alwaysTogglable={true}
@@ -1263,7 +1269,7 @@ const TablePicker = ({
               ? item.table.id === selectedTable.id
               : false
           }
-          itemIsClickable={item => item.table}
+          itemIsClickable={item => item.table && item.table.initial_sync}
           renderItemIcon={item =>
             item.table ? <Icon name="table2" size={18} /> : null
           }
diff --git a/frontend/src/metabase/query_builder/components/DataSelector.styled.jsx b/frontend/src/metabase/query_builder/components/DataSelector.styled.jsx
index 55bf571cafb..7f4ae3ed754 100644
--- a/frontend/src/metabase/query_builder/components/DataSelector.styled.jsx
+++ b/frontend/src/metabase/query_builder/components/DataSelector.styled.jsx
@@ -3,6 +3,7 @@ import PropTypes from "prop-types";
 import { t } from "ttag";
 import styled from "styled-components";
 import Icon from "metabase/components/Icon";
+import LoadingSpinner from "metabase/components/LoadingSpinner";
 import { SelectList } from "metabase/components/select-list";
 import { color } from "metabase/lib/colors";
 import { space } from "metabase/styled-components/theme";
@@ -17,6 +18,14 @@ export const DataBucketDescription = styled.span`
   font-size: 12px;
 `;
 
+export const PickerSpinner = styled(LoadingSpinner)`
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  color: ${color("brand")};
+  margin-left: 0.5rem;
+`;
+
 const BackButtonContainer = styled.div`
   display: flex;
   align-items: center;
diff --git a/frontend/test/__support__/sample_dataset_fixture.json b/frontend/test/__support__/sample_dataset_fixture.json
index 2128a98041d..f1109baec51 100644
--- a/frontend/test/__support__/sample_dataset_fixture.json
+++ b/frontend/test/__support__/sample_dataset_fixture.json
@@ -420,6 +420,7 @@
         "active": true,
         "id": 5,
         "db_id": 4,
+        "initial_sync": true,
         "visibility_type": null,
         "display_name": "Table in First Schema",
         "created_at": "2017-06-14T23:22:55.825Z",
-- 
GitLab