Responsive NavBar and show WriteSQL-button only with permissions (#10454)

* Make NavBar responsive and only show WriteSQL-button for users who have permissions

* I'm so pretty, oh so pretty...

* Align and margin SQL-icon

frontend/src/metabase/nav/containers/Navbar.jsx

@@ -75,7 +75,7 @@ const SearchWrapper = Flex.extend`
     props.active ? ActiveSearchColor : DefaultSearchColor};
   border-radius: 6px;
   max-width: 50em;
-  min-width: 25em;
+  min-width: 9em;
   width: 100%;
   align-items: center;
   color: white;
@@ -289,6 +289,11 @@ export default class Navbar extends Component {
   renderMainNav() {
     const hasDataAccess =
       this.props.databases && this.props.databases.length > 0;
+    const hasNativeWrite =
+      hasDataAccess &&
+      this.props.databases.filter(db => db.native_permissions === "write")
+        .length > 0;
+
     return (
       <Flex
         // NOTE: DO NOT REMOVE `Nav` CLASS FOR NOW, USED BY MODALS, FULLSCREEN DASHBOARD, ETC
@@ -321,11 +326,11 @@ export default class Navbar extends Component {
               hover={{
                 backgroundColor: darken(colors["brand"]),
               }}
-              className="flex align-center rounded flex-no-shrink transition-background"
+              className="flex align-center rounded transition-background"
               data-metabase-event={`NavBar;New Question`}
             >
-              <Icon name="insight" mr={1} size={18} />
-              <h4 className="hide sm-show">{t`Ask a question`}</h4>
+              <Icon name="insight" size={18} />
+              <h4 className="hide sm-show ml1 text-nowrap">{t`Ask a question`}</h4>
             </Link>
           )}
           {hasDataAccess && (
@@ -333,29 +338,21 @@ export default class Navbar extends Component {
               mr={[1, 2]}
               to="browse"
               p={1}
-              className="flex align-center rounded flex-no-shrink transition-background"
+              className="flex align-center rounded transition-background"
               data-metabase-event={`NavBar;Data Browse`}
               hover={{
                 backgroundColor: darken(colors["brand"]),
               }}
             >
-              <Icon name="table_spaced" mr={1} size={14} />
-              <h4 className="hide sm-show">{t`Browse Data`}</h4>
+              <Icon name="table_spaced" size={14} />
+              <h4 className="hide sm-show ml1 text-nowrap">{t`Browse Data`}</h4>
             </Link>
           )}
           <EntityMenu
             tooltip={t`Create`}
-            className="hide sm-show mx1"
+            className="hide sm-show mr1"
             triggerIcon="add"
             items={[
-              /*
-              {
-                title: t`New notebook`,
-                icon: `notebook`,
-                link: hasDataAccess && this.props.query.question().getUrl(),
-                event: `NavBar;New Custom Question;`,
-              },
-              */
               {
                 title: t`New dashboard`,
                 icon: `dashboard`,
@@ -370,18 +367,20 @@ export default class Navbar extends Component {
               },
             ]}
           />
-          {hasDataAccess && (
-            <IconWrapper mx={1}>
+          {hasNativeWrite && (
+            <div className="relative hide sm-show mr1">
               <Tooltip tooltip={t`Write SQL`}>
-                <Link
-                  to={this.props.plainNativeQuery.question().getUrl()}
-                  className="hide sm-show flex-no-shrink"
-                  data-metabase-event={`NavBar;SQL`}
-                >
-                  <Icon size={19} name="sql" />
-                </Link>
+                <IconWrapper>
+                  <Link
+                    to={this.props.plainNativeQuery.question().getUrl()}
+                    className="flex align-center"
+                    data-metabase-event={`NavBar;SQL`}
+                  >
+                    <Icon size={19} name="sql" m={1} />
+                  </Link>
+                </IconWrapper>
               </Tooltip>
-            </IconWrapper>
+            </div>
           )}
           <ProfileLink {...this.props} />
         </Flex>