console: Fix conflict resolution

TheThingsNetwork · Feb 5, 2024 · f2d5df8 · f2d5df8
1 parent a339f5f
commit f2d5df8
Show file tree

Hide file tree

Showing 5 changed files with 18 additions and 41 deletions.
diff --git a/pkg/webui/components/button/button.styl b/pkg/webui/components/button/button.styl
@@ -41,6 +41,15 @@
     &:only-child
       margin-right: - $cs.xxs
 
+  .alert
+    left: 17px
+    position: absolute
+    top: 1px
+    background: white
+    width: 7px
+    height: 14px
+    padding-left: $cs.xxs
+
   .expand-icon
     color: var(--c-icon-neutral-light)
     font-size: 1.285rem

diff --git a/pkg/webui/components/button/index.js b/pkg/webui/components/button/index.js
@@ -26,6 +26,8 @@ import Message from '@ttn-lw/lib/components/message'
 import combineRefs from '@ttn-lw/lib/combine-refs'
 import PropTypes from '@ttn-lw/lib/prop-types'
 
+import Dropdown from '../dropdown'
+
 import style from './button.styl'
 
 const filterDataProps = props =>

diff --git a/pkg/webui/console/views/app/app.styl b/pkg/webui/console/views/app/app.styl
@@ -20,12 +20,13 @@
 .content
   position: relative
   display: flex
-  flex-grow: 1
   flex-direction: column
+  flex-grow: 1
 
 .main
   overflow-y: auto
 
 .stage
   display: flex
   flex-direction: column
+  flex-grow: 1
diff --git a/pkg/webui/console/views/app/index.js b/pkg/webui/console/views/app/index.js
@@ -136,43 +136,6 @@ const Layout = () => {
     return () => clearInterval(timer)
   }, [dispatch])
 
-  // For the mobile side menu drawer functionality.
-  const [isDrawerOpen, setIsDrawerOpen] = useState(false)
-  const node = useRef()
-
-  const openDrawer = useCallback(() => {
-    setIsDrawerOpen(true)
-    document.body.classList.add(style.scrollLock)
-  }, [])
-
-  const closeDrawer = useCallback(() => {
-    setIsDrawerOpen(false)
-    document.body.classList.remove(style.scrollLock)
-  }, [])
-
-  useEffect(() => {
-    const onClickOutside = e => {
-      if (isDrawerOpen && node.current && !node.current.contains(e.target)) {
-        closeDrawer()
-      }
-    }
-
-    if (isDrawerOpen) {
-      document.addEventListener('mousedown', onClickOutside)
-      return () => document.removeEventListener('mousedown', onClickOutside)
-    }
-  }, [isDrawerOpen, closeDrawer])
-
-  // Pass this function to the header prop `onMenuClick`.
-  const onDrawerExpandClick = useCallback(() => {
-    if (!isDrawerOpen) {
-      openDrawer()
-    } else {
-      closeDrawer()
-    }
-  }, [isDrawerOpen, openDrawer, closeDrawer])
-  // End of mobile side menu drawer functionality
-
   return (
     <>
       <ScrollRestoration getKey={getScrollRestorationKey} />
@@ -185,9 +148,11 @@ const Layout = () => {
           <div id="modal-container" />
           <div className="d-flex">
             <Sidebar isDrawerOpen={isDrawerOpen} onDrawerCloseClick={closeDrawer} />
-            <div className="w-full h-vh">
+            <div className="w-full h-vh d-flex direction-column">
               <Header onMenuClick={onDrawerExpandClick} />
-              <main className={classnames(style.main, 'd-flex', 'flex-column', 'h-full')}>
+              <main
+                className={classnames(style.main, 'd-flex', 'flex-column', 'h-full', 'flex-grow')}
+              >
                 <WithAuth
                   user={user}
                   fetching={fetching}

diff --git a/pkg/webui/lib/hooks/use-request.js b/pkg/webui/lib/hooks/use-request.js
@@ -12,7 +12,7 @@
 // See the License for the specific language governing permissions and
 // limitations under the License.
 
-import { useState, useEffect, useRef } from 'react'
+import { useState, useEffect } from 'react'
 import { useDispatch } from 'react-redux'
 
 import attachPromise from '@ttn-lw/lib/store/actions/attach-promise'