Add AddYourOwnData link to nav (#21555)

frontend/src/metabase/nav/containers/MainNavbar/MainNavbar.styled.tsx

@@ -3,7 +3,7 @@ import styled from "@emotion/styled";
 import Icon from "metabase/components/Icon";
 import { NAV_SIDEBAR_WIDTH } from "metabase/nav/constants";
 
-import { color } from "metabase/lib/colors";
+import { color, lighten } from "metabase/lib/colors";
 import {
   breakpointMaxSmall,
   breakpointMinSmall,
@@ -110,3 +110,27 @@ export const ProfileLinkContainer = styled.div<{ isOpen: boolean }>`
 export const BrowseLink = styled(SidebarLink)`
   padding-left: 14px;
 `;
+
+export const AddYourOwnDataLink = styled(SidebarLink)`
+  background: ${color("brand")};
+  border-radius: 8px;
+  color: ${color("white")};
+  float: left;
+  margin: ${space(1)};
+  padding: 2px 6px;
+  transition: background-color 0.3s linear;
+  width: auto;
+
+  @media (prefers-reduced-motion) {
+    transition: none;
+  }
+
+  &:hover {
+    background: ${lighten("brand", 0.12)};
+    color: ${color("white")};
+
+    svg {
+      color: ${color("brand-light")} !important;
+    }
+  }
+`;

frontend/src/metabase/nav/containers/MainNavbar/MainNavbarContainer.tsx

@@ -14,7 +14,10 @@ import Collections, {
   buildCollectionTree,
 } from "metabase/entities/collections";
 import { openNavbar, closeNavbar } from "metabase/redux/app";
-import { getHasDataAccess } from "metabase/new_query/selectors";
+import {
+  getHasOwnDatabase,
+  getHasDataAccess,
+} from "metabase/new_query/selectors";
 import { getUser } from "metabase/selectors/user";
 import {
   nonPersonalOrArchivedCollection,
@@ -30,6 +33,7 @@ function mapStateToProps(state: unknown) {
   return {
     currentUser: getUser(state),
     hasDataAccess: getHasDataAccess(state),
+    hasOwnDatabase: getHasOwnDatabase(state),
   };
 }
 
@@ -50,6 +54,7 @@ type Props = {
   collections: Collection[];
   rootCollection: Collection;
   hasDataAccess: boolean;
+  hasOwnDatabase: boolean;
   allFetched: boolean;
   location: {
     pathname: string;
@@ -64,6 +69,7 @@ type Props = {
 function MainNavbarContainer({
   isOpen,
   currentUser,
+  hasOwnDatabase,
   collections = [],
   rootCollection,
   hasDataAccess,
@@ -143,6 +149,7 @@ function MainNavbarContainer({
           isOpen={isOpen}
           currentUser={currentUser}
           collections={collectionTree}
+          hasOwnDatabase={hasOwnDatabase}
           selectedItem={selectedItem}
           hasDataAccess={hasDataAccess}
           handleCloseNavbar={closeNavbar}

frontend/src/metabase/nav/containers/MainNavbar/MainNavbarView.tsx

@@ -22,6 +22,7 @@ import { SelectedItem } from "./types";
 import BookmarkList from "./BookmarkList";
 import { SidebarCollectionLink, SidebarLink } from "./SidebarItems";
 import {
+  AddYourOwnDataLink,
   BrowseLink,
   CollectionsMoreIconContainer,
   CollectionsMoreIcon,
@@ -42,21 +43,24 @@ type Props = {
   isOpen: boolean;
   currentUser: User;
   bookmarks: Bookmark[];
+  hasDataAccess: boolean;
+  hasOwnDatabase: boolean;
   collections: CollectionTreeItem[];
   selectedItem: SelectedItem;
-  hasDataAccess: boolean;
   handleCloseNavbar: () => void;
 };
 
 const BROWSE_URL = "/browse";
 const OTHER_USERS_COLLECTIONS_URL = Urls.collection({ id: "users" });
 const ARCHIVE_URL = "/archive";
+const ADD_YOUR_OWN_DATA_URL = "/admin/databases/create";
 
 function MainNavbarView({
   isOpen,
   currentUser,
   bookmarks,
   collections,
+  hasOwnDatabase,
   selectedItem,
   hasDataAccess,
   handleCloseNavbar,
@@ -122,6 +126,20 @@ function MainNavbarView({
               >
                 {t`Browse data`}
               </BrowseLink>
+              {!hasOwnDatabase && (
+                <AddYourOwnDataLink
+                  icon="database"
+                  url={ADD_YOUR_OWN_DATA_URL}
+                  isSelected={
+                    isMiscLinkSelected &&
+                    selectedItem.url.startsWith(ADD_YOUR_OWN_DATA_URL)
+                  }
+                  onClick={onItemSelect}
+                  data-metabase-event="NavBar;Add your own data"
+                >
+                  {t`Add your own data`}
+                </AddYourOwnDataLink>
+              )}
             </SidebarSection>
           )}
         </ul>

frontend/src/metabase/new_query/selectors.js

@@ -18,6 +18,19 @@ export const getHasDataAccess = createSelector([getDatabaseList], databases =>
   databases.some(db => !db.is_saved_questions),
 );
 
+export const getHasOwnDatabase = createSelector(
+  [getDatabaseList],
+  databases => {
+    if (databases.length === 0) {
+      return false;
+    }
+    if (databases.length === 1 && databases[0].name === "Sample Database") {
+      return false;
+    }
+    return true;
+  },
+);
+
 export const getHasNativeWrite = createSelector([getDatabaseList], databases =>
   databases.some(db => db.native_permissions === "write"),
 );