Backport new side footer

pkg/webui/components/sidebar/side-footer/index.js

@@ -14,13 +14,14 @@
 
 import React, { useCallback, useContext, useRef } from 'react'
 import classnames from 'classnames'
+import { defineMessages } from 'react-intl'
 
 import {
   IconHeartRateMonitor,
   IconLanguage,
   IconBook,
-  IconWorld,
   IconSupport,
+  IconInfoSquareRounded,
 } from '@ttn-lw/components/icon'
 import Button from '@ttn-lw/components/button'
 import Dropdown from '@ttn-lw/components/dropdown'
@@ -39,6 +40,11 @@ import {
 
 import style from './side-footer.styl'
 
+const m = defineMessages({
+  resources: 'Resources',
+  clusterSelection: 'Cluster selection',
+})
+
 const supportLink = selectSupportLinkConfig()
 const documentationBaseUrl = selectDocumentationUrlConfig()
 const statusPageBaseUrl = selectPageStatusBaseUrlConfig()
@@ -61,11 +67,6 @@ LanguageOption.propTypes = {
 const SideFooter = () => {
   const { isMinimized } = useContext(SidebarContext)
   const supportButtonRef = useRef(null)
-  const clusterButtonRef = useRef(null)
-
-  const clusterDropdownItems = (
-    <Dropdown.Item title="Cluster selection" icon={IconWorld} path="/cluster" />
-  )
 
   const languageContext = useContext(LanguageContext)
   const { locale, supportedLocales, setLocale } = languageContext || {}
@@ -121,43 +122,31 @@ const SideFooter = () => {
     </>
   )
 
-  const sideFooterClassnames = classnames(
-    style.sideFooter,
-    'd-flex',
-    'j-center',
-    'al-center',
-    'gap-cs-xs',
-    'fs-s',
-    { [style.isMinimized]: isMinimized },
-  )
+  const sideFooterClassnames = classnames('d-flex', 'j-between', 'al-center', 'gap-cs-m', 'fs-s', {
+    [style.isMinimized]: isMinimized,
+  })
 
   return (
-    <div className={sideFooterClassnames}>
-      <Button
-        className={style.supportButton}
-        secondary
-        icon={IconSupport}
-        dropdownItems={supportDropdownItems}
-        dropdownPosition="above"
-        dropdownClassName={style.sideFooterDropdown}
-        noDropdownIcon
-        ref={supportButtonRef}
-      >
-        <span className={style.sideFooterVersion}>
-          v{process.env.VERSION} ({process.env.REVISION})
-        </span>
-      </Button>
-      <Button
-        className={style.clusterButton}
-        secondary
-        icon={IconWorld}
-        message="EU1"
-        noDropdownIcon
-        dropdownItems={clusterDropdownItems}
-        dropdownPosition="above"
-        dropdownClassName={classnames(style.sideFooterDropdown, style.sideFooterClusterDropdown)}
-        ref={clusterButtonRef}
-      />
+    <div className={style.sideFooter}>
+      <div className={sideFooterClassnames}>
+        <Button
+          className={style.supportButton}
+          secondary
+          message={m.resources}
+          icon={IconInfoSquareRounded}
+          dropdownItems={supportDropdownItems}
+          dropdownPosition="above"
+          dropdownClassName={style.sideFooterDropdown}
+          ref={supportButtonRef}
+        />
+        <Button className={classnames(style.clusterButton)} noDropdownIcon>
+          <span className={style.clusterButtonContent}>
+            <span className={style.sideFooterVersion}>
+              v{process.env.VERSION}.{process.env.REVISION}
+            </span>
+          </span>
+        </Button>
+      </div>
     </div>
   )
 }

pkg/webui/components/sidebar/side-footer/side-footer.styl

@@ -15,11 +15,16 @@
 .side-footer
   margin-top: auto
 
-  .support-button
-    width: 100%
+  .cluster-button
+    &-content
+      display: flex
+      width: 100%
+      font-weight: $fwv2.bold
+      white-space: nowrap
 
+  .support-button
     button
-      width: 100%
+      width: fit-content
 
   &-button
     justify-content: space-between
@@ -47,12 +52,18 @@
 
   .side-footer-version
     margin-left: $cs.xxs
-
-  .support-button > button
-    // stylelint-disable-next-line declaration-no-important
-    width: 100% !important
-    justify-content: flex-start
+    color: var(--c-text-neutral-semilight)
+    font-weight: $fwv2.regular
+    overflow: hidden
+    text-overflow: ellipsis
 
   ul.side-footer-cluster-dropdown
+    --dropdown-offset: $cs.m
     left: initial
     right: 0
+
+    &-cluster-id
+      right: $cs.m
+
+.progress-bar
+  height: $cs.xs

pkg/webui/locales/en.json

@@ -183,6 +183,8 @@
   "components.search-panel.index.fetchingTopEntities": "Fetching top entities…",
   "components.search-panel.index.noTopEntities": "Seems like you haven’t interacted with any entities yet",
   "components.search-panel.index.noTopEntitiesSuggestion": "Once you created or interacted with entities, they will show up here and you can use this panel to quickly search and navigate to them.",
+  "components.sidebar.side-footer.index.resources": "Resources",
+  "components.sidebar.side-footer.index.clusterSelection": "Cluster selection",
   "console.components.api-key-modal.index.title": "Please copy newly created API key",
   "console.components.api-key-modal.index.subtitle": "You won't be able to view the key afterward",
   "console.components.api-key-modal.index.buttonMessage": "I have copied the key",

pkg/webui/locales/ja.json

@@ -183,6 +183,8 @@
   "components.search-panel.index.fetchingTopEntities": "",
   "components.search-panel.index.noTopEntities": "",
   "components.search-panel.index.noTopEntitiesSuggestion": "",
+  "components.sidebar.side-footer.index.resources": "",
+  "components.sidebar.side-footer.index.clusterSelection": "",
   "console.components.api-key-modal.index.title": "新しく作成したAPIキーをコピーしてください",
   "console.components.api-key-modal.index.subtitle": "その後ではキーを見ることができなくなります",
   "console.components.api-key-modal.index.buttonMessage": "キーをコピーしました",