refactor: Update UI for mobile

I have switched the collapsing order for mobile so that the nav items stay next to the logo, and the actions (reset, report, etc..) drop to the next row.
grafana · May 20, 2024 · 68b8fd2 · 68b8fd2
1 parent bf885f1
commit 68b8fd2
Show file tree

Hide file tree

Showing 3 changed files with 27 additions and 17 deletions.
diff --git a/dashboard/assets/packages/ui/src/components/Header/Header.tsx b/dashboard/assets/packages/ui/src/components/Header/Header.tsx
@@ -43,15 +43,19 @@ export function Header({ config, tab, onTabChange }: HeaderProps) {
             <Nav options={config.tabs} value={tab} onChange={onTabChange} />
           </Flex>
           <Flex align="center">
-            <Stats />
-            {!isTablet && <TimeRangeResetButton />}
-            <Button onClick={() => window.open("../report", "k6-report")}>Report</Button>
+            {!isTablet && <Actions tab={tab} />}
+
             <Options />
           </Flex>
         </Flex>
 
         {percentage ? <Progress value={percentage} /> : <Divider className={styles.divider} />}
-        <Nav isMobile options={config.tabs} value={tab} onChange={onTabChange} />
+
+        {isTablet && (
+          <Flex align="center" gap={3} justify="end" padding={3}>
+            <Actions tab={tab} />
+          </Flex>
+        )}
       </header>
     </>
   )
@@ -80,6 +84,22 @@ const Stats = () => {
   )
 }
 
+interface ActionsProps {
+  tab: number
+}
+
+const Actions = ({ tab }: ActionsProps) => {
+  const isSummary = tab === 2
+
+  return (
+    <>
+      {!isSummary && <TimeRangeResetButton />}
+      <Button onClick={() => window.open("../report", "k6-report")}>Report</Button>
+      <Stats />
+    </>
+  )
+}
+
 const Options = () => {
   const { theme, setTheme } = useTheme()
 

diff --git a/dashboard/assets/packages/ui/src/components/Nav/Nav.tsx b/dashboard/assets/packages/ui/src/components/Nav/Nav.tsx
@@ -16,24 +16,14 @@ interface Option {
 }
 
 interface NavProps {
-  isMobile?: boolean
   options: Option[]
   value: number
   onChange: (idx: number) => void
 }
 
-export function Nav({ isMobile = false, options, value, onChange }: NavProps) {
+export function Nav({ options, value, onChange }: NavProps) {
   return (
-    <nav
-      className={toClassName(
-        styles.nav,
-        styles.listVariant({
-          display: {
-            desktop: isMobile ? "none" : "block",
-            mobile: isMobile ? "block" : "none"
-          }
-        })
-      )}>
+    <nav className={toClassName(styles.nav)}>
       <Flex gap={2}>
         {options.map((option, index) => (
           <Item key={option.id} label={option.title} index={index} value={value} onChange={onChange} />

diff --git a/dashboard/assets/packages/ui/src/components/TimeRangeResetButton.tsx b/dashboard/assets/packages/ui/src/components/TimeRangeResetButton.tsx
@@ -16,7 +16,7 @@ export const TimeRangeResetButton = () => {
     <Button variant="outline" onClick={() => setTimeRange(undefined)}>
       <Flex align="center" gap={2}>
         <Icon name="rewind-time" />
-        <span>Reset time range</span>
+        <span>Reset</span>
       </Flex>
     </Button>
   )