Remove the tabs from Browse

frontend/src/metabase/browse/components/BrowseApp.styled.tsx

@@ -6,7 +6,7 @@ import {
   breakpointMinMedium,
   breakpointMinSmall,
 } from "metabase/styled-components/theme";
-import { Grid, Icon, Tabs } from "metabase/ui";
+import { Flex, Grid, Icon, Tabs } from "metabase/ui";
 
 export const BrowseAppRoot = styled.div`
   flex: 1;
@@ -38,27 +38,35 @@ export const BrowseTab = styled(Tabs.Tab)`
   }
 `;
 
-export const BrowseTabsPanel = styled(Tabs.Panel)`
-  display: flex;
-  flex-flow: column nowrap;
-  flex: 1;
-  height: 100%;
-  padding: 0 2.5rem;
-`;
-
 export const BrowseContainer = styled.div`
   display: flex;
   flex: 1;
   flex-flow: column nowrap;
-  height: 100%;
+  margin-top: 1rem;
+
+  container-name: ItemsTableContainer;
+  container-type: inline-size;
 `;
 
-export const BrowseDataHeader = styled.header`
+export const BrowseSection = styled(Flex)`
+  max-width: 64rem;
+  margin: 0 auto;
+  width: 100%;
+`;
+
+export const BrowseHeader = styled.header`
   display: flex;
-  padding: 1rem 2.5rem;
-  padding-bottom: 0.375rem;
+  flex-direction: column;
+  padding: 1rem 2.5rem 3rem 2.5rem;
   color: ${color("dark")};
-  background-color: ${color("white")};
+`;
+
+export const BrowseMain = styled.main`
+  display: flex;
+  flex-flow: column nowrap;
+  flex: 1;
+  padding: 0 2.5rem;
+  padding-bottom: 2rem;
 `;
 
 export const BrowseGrid = styled(Grid)`

frontend/src/metabase/browse/components/BrowseDatabases.tsx

@@ -1,26 +1,32 @@
+import { Link } from "react-router";
 import { t } from "ttag";
 
 import NoResults from "assets/img/no_results.svg";
-import type { useDatabaseListQuery } from "metabase/common/hooks";
+import { useListDatabasesQuery } from "metabase/api";
 import LoadingAndErrorWrapper from "metabase/components/LoadingAndErrorWrapper";
 import CS from "metabase/css/core/index.css";
 import { color } from "metabase/lib/colors";
 import * as Urls from "metabase/lib/urls";
-import { Box, Icon, Title } from "metabase/ui";
+import { Box, Flex, Group, Icon, Text, Title } from "metabase/ui";
 
-import { CenteredEmptyState } from "./BrowseApp.styled";
+import {
+  BrowseContainer,
+  BrowseHeader,
+  BrowseMain,
+  BrowseSection,
+  CenteredEmptyState,
+  LearnAboutDataIcon,
+} from "./BrowseApp.styled";
 import {
   DatabaseCard,
   DatabaseCardLink,
   DatabaseGrid,
 } from "./BrowseDatabases.styled";
+import { BrowseHeaderIconContainer } from "./BrowseHeader.styled";
 
-export const BrowseDatabases = ({
-  databasesResult,
-}: {
-  databasesResult: ReturnType<typeof useDatabaseListQuery>;
-}) => {
-  const { data: databases, error, isLoading } = databasesResult;
+export const BrowseDatabases = () => {
+  const { data, isLoading, error } = useListDatabasesQuery();
+  const databases = data?.data;
 
   if (error) {
     return <LoadingAndErrorWrapper error />;
@@ -30,34 +36,76 @@ export const BrowseDatabases = ({
     return <LoadingAndErrorWrapper loading />;
   }
 
-  return databases?.length ? (
-    <DatabaseGrid data-testid="database-browser">
-      {databases.map(database => (
-        <div key={database.id}>
-          <DatabaseCardLink to={Urls.browseDatabase(database)}>
-            <DatabaseCard>
-              <Icon
-                name="database"
-                color={color("accent2")}
-                className={CS.mb3}
-                size={32}
-              />
-              <Title order={2} size="1rem" lh="1rem" color="inherit">
-                {database.name}
-              </Title>
-            </DatabaseCard>
-          </DatabaseCardLink>
-        </div>
-      ))}
-    </DatabaseGrid>
-  ) : (
-    <CenteredEmptyState
-      title={<Box mb=".5rem">{t`No databases here yet`}</Box>}
-      illustrationElement={
-        <Box mb=".5rem">
-          <img src={NoResults} />
-        </Box>
-      }
-    />
+  if (!databases?.length) {
+    return (
+      <CenteredEmptyState
+        title={<Box mb=".5rem">{t`No databases here yet`}</Box>}
+        illustrationElement={
+          <Box mb=".5rem">
+            <img src={NoResults} />
+          </Box>
+        }
+      />
+    );
+  }
+
+  return (
+    <BrowseContainer>
+      <BrowseHeader>
+        <BrowseSection>
+          <Flex w="100%" direction="row" justify="space-between" align="center">
+            <Title order={1} color="text-dark">
+              <Group spacing="sm">
+                <Icon color={color("brand")} name="database" />
+                {t`Databases`}
+              </Group>
+            </Title>
+            <LearnAboutDataLink />
+          </Flex>
+        </BrowseSection>
+      </BrowseHeader>
+      <BrowseMain>
+        <BrowseSection>
+          <DatabaseGrid data-testid="database-browser">
+            {databases.map(database => (
+              <div key={database.id}>
+                <DatabaseCardLink to={Urls.browseDatabase(database)}>
+                  <DatabaseCard>
+                    <Icon
+                      name="database"
+                      color={color("accent2")}
+                      className={CS.mb3}
+                      size={32}
+                    />
+                    <Title order={2} size="1rem" lh="1rem" color="inherit">
+                      {database.name}
+                    </Title>
+                  </DatabaseCard>
+                </DatabaseCardLink>
+              </div>
+            ))}
+          </DatabaseGrid>
+        </BrowseSection>
+      </BrowseMain>
+    </BrowseContainer>
   );
 };
+
+const LearnAboutDataLink = () => (
+  <Flex
+    ml="auto"
+    p=".75rem"
+    justify="right"
+    align="center"
+    style={{ flexBasis: "40.0%" }}
+  >
+    <Link to="reference">
+      <BrowseHeaderIconContainer>
+        <LearnAboutDataIcon size={14} name="reference" />
+        <Text size="md" lh="1" fw="bold" ml=".5rem" c="inherit">
+          {t`Learn about our data`}
+        </Text>
+      </BrowseHeaderIconContainer>
+    </Link>
+  </Flex>
+);