Merge remote-tracking branch 'ttn/v3.33' into v3.34

pkg/webui/components/button/button.styl

@@ -19,10 +19,10 @@
   // where the button is used as a container.
   reset-button()
 
-  &.primary, &.secondary, &.naked
+  &.primary, &.secondary, &.tertiary, &.naked
     position: relative
     display: inline-flex
-    transition: 80ms background ease-in-out, 80ms color ease-in-out, 80ms border-color ease-in-out, 80ms box-shadow ease-in-out
+    transition: .1s background ease-in-out, .1s color ease-in-out, .1s border-color ease-in-out, .1s box-shadow ease-in-out
     border-radius: $br.m
     outline: 0
     cursor: pointer
@@ -31,6 +31,7 @@
     gap: $cs.xxs
     height: $default-input-height
     text-decoration: none
+    font-weight: $fw.bold
     padding: 0 $cs.m
     white-space: nowrap
     box-sizing: border-box
@@ -72,7 +73,6 @@
 
     &.primary:not(.naked)
       color: var(--c-text-neutral-min)
-
       background-color: var(--c-text-brand-normal)
 
       &:disabled
@@ -123,19 +123,17 @@
     &.secondary
       color: var(--c-text-neutral-heavy)
       background-color: var(--c-bg-neutral-min)
-      box-shadow: 0px 2px 2px 0px rgba(0 0 0 4.5%), inset 0px 0px 0px 1px var(--c-bg-neutral-min)
-      gradient-border(var(--c-bg-neutral-min), var(--c-gradient-neutral-light-01), var(--c-gradient-neutral-light-02))
-      border: 1px solid transparent
+      border: solid 1px var(--c-border-neutral-light)
 
       &:not(:disabled)
         &:hover
-          gradient-border(var(--c-bg-neutral-extralight), var(--c-gradient-neutral-light-01), var(--c-gradient-neutral-light-02))
+          background-color: var(--c-bg-neutral-light)
 
         +focus-visible()
-          gradient-border(var(--c-bg-neutral-extralight), var(--c-gradient-neutral-light-01), var(--c-gradient-neutral-light-02))
+          gradient-border(var(--c-bg-neutral-light), var(--c-gradient-neutral-light-01), var(--c-gradient-neutral-light-02))
 
         &:active
-          gradient-border(var(--c-bg-neutral-extralight), var(--c-gradient-neutral-light-01), var(--c-gradient-neutral-light-02))
+          gradient-border(var(--c-bg-neutral-light), var(--c-gradient-neutral-light-01), var(--c-gradient-neutral-light-02))
           box-shadow: none
 
       &.warning
@@ -182,6 +180,58 @@
           width: 1.2rem
           height: 1.2rem
 
+    &.tertiary
+      color: var(--c-text-brand-normal)
+      background-color: var(--c-bg-brand-light)
+
+      &:disabled
+        color: var(--c-text-neutral-light)
+        background-color: var(--c-border-neutral-light)
+
+      &:not(:disabled)
+        &:hover
+          background-color: var(--c-bg-brand-semilight)
+
+        +focus-visible()
+          background-color: var(--c-bg-brand-light)
+
+        &:active
+          background-color: var(--c-text-brand-light)
+
+      &.warning
+        color: var(--c-text-warning-normal)
+        background-color: var(--c-bg-warning-light)
+
+        &:not(:disabled)
+          &:hover
+            background-color: var(--c-bg-warning-semilight)
+
+          +focus-visible()
+            background-color: var(--c-bg-warning-semilight)
+
+          &:active
+            background-color: var(--c-bg-warning-ligth)
+
+        &:disabled
+          background-color: var(--c-bg-warning-normal-disabled)
+
+      &.danger
+        color: var(--c-text-danger-normal)
+        background-color: var(--c-bg-error-light)
+
+        &:not(:disabled)
+          &:hover
+            background-color: var(--c-bg-error-semilight)
+
+          +focus-visible()
+            background-color: var(--c-bg-error-semilight)
+
+          &:active
+            background-color: var(--c-bg-error-normal-active)
+
+        &:disabled
+          background-color: var(--c-bg-error-normal-disabled)
+
     &.naked:not(.primary)
       color: var(--c-text-neutral-light)
 

pkg/webui/components/button/index.js

@@ -38,6 +38,7 @@ const assembleClassnames = ({
   warning,
   primary,
   secondary,
+  tertiary,
   naked,
   icon,
   small,
@@ -54,6 +55,7 @@ const assembleClassnames = ({
     [style.warning]: warning,
     [style.primary]: primary,
     [style.secondary]: secondary,
+    [style.tertiary]: tertiary,
     [style.naked]: naked,
     [style.busy]: busy,
     [style.small]: small,

pkg/webui/console/components/blurry-noc-metrics-panel/index.js

@@ -65,15 +65,11 @@ const BlurryNocMetricsPanel = ({ title, icon }) => {
             content={sharedMessages.quicklyTroubleshoot}
           />
           <Button.AnchorLink
-            naked
+            tertiary
             message={sharedMessages.upgradeNow}
             icon={IconBolt}
             href={upgradeUrl}
             target="_blank"
-            className={classnames(
-              style.upgradeButton,
-              'c-bg-brand-extralight c-text-brand-normal fw-bold',
-            )}
           />
         </div>
       </div>

pkg/webui/console/components/notifications/utils.js

@@ -12,6 +12,8 @@
 // See the License for the specific language governing permissions and
 // limitations under the License.
 
+import { ingestError } from '@ttn-lw/lib/errors/utils'
+
 import notificationMap from './constants'
 
 export const getNotification = notificationType => notificationMap[notificationType]
@@ -25,5 +27,16 @@ const idToEntityMap = {
   client_ids: 'client',
 }
 
+export const validateNotification = (notificationType, ingestedBy) => {
+  if (!(notificationType in notificationMap)) {
+    ingestError(new Error(`Notification type "${notificationType}" does not exist`), {
+      ingestedBy,
+    })
+    return false
+  }
+
+  return true
+}
+
 export const getEntity = entity_ids =>
   (entity_ids && idToEntityMap[Object.keys(entity_ids)[0]]) || 'entity'

pkg/webui/console/components/total-end-devices-upseller-panel/index.js

@@ -13,7 +13,6 @@
 // limitations under the License.
 
 import React from 'react'
-import classnames from 'classnames'
 
 import { IconBolt, IconDevice } from '@ttn-lw/components/icon'
 import Panel from '@ttn-lw/components/panel'
@@ -48,15 +47,11 @@ const TotalEndDevicesUpsellerPanel = () => {
           content={sharedMessages.quicklyTroubleshoot}
         />
         <Button.AnchorLink
-          naked
+          tertiary
           message={sharedMessages.upgradeNow}
           icon={IconBolt}
           href={upgradeUrl}
           target="_blank"
-          className={classnames(
-            style.upgradeButton,
-            'c-bg-brand-extralight c-text-brand-normal fw-bold',
-          )}
         />
       </div>
     </Panel>

pkg/webui/console/store/middleware/logics/notifications.js

@@ -19,6 +19,8 @@ import tts from '@console/api/tts'
 
 import toast from '@ttn-lw/components/toast'
 
+import { validateNotification } from '@console/components/notifications/utils'
+
 import NOTIFICATION_STATUS from '@console/containers/notifications/notification-status'
 
 import createRequestLogic from '@ttn-lw/lib/store/logics/create-request-logic'
@@ -74,10 +76,17 @@ const getInboxNotificationsLogic = createRequestLogic({
     const filter = [NOTIFICATION_STATUS.UNSEEN, NOTIFICATION_STATUS.SEEN]
     const userId = selectUserId(getState())
     const result = await tts.Notifications.getAllNotifications(userId, filter, page, limit)
+    // Remove unknown notification types from the result and send error to Sentry.
+    // When a new notification type is introduced in the backend, this will prevent
+    // the Console from crashing.
+    const validatedResult = result.notifications.filter(notification =>
+      validateNotification(notification.notification_type, 'getInboxNotificationsLogic'),
+    )
 
     return {
-      notifications: result.notifications,
-      totalCount: result.totalCount,
+      notifications: validatedResult,
+      // Subtract the number of unknown notification types from the total count.
+      totalCount: result.totalCount - (result.notifications.length - validatedResult.length),
       page,
       limit,
     }
@@ -106,17 +115,26 @@ const refreshNotificationsLogic = createRequestLogic({
       1,
       1,
     )
+    // Remove unknown notification types from the result and send error to Sentry.
+    // When a new notification type is introduced in the backend, this will prevent
+    // the Console from crashing.
+    const validatedUnseen = unseen.notifications.filter(notification =>
+      validateNotification(notification.notification_type, 'refreshNotificationsLogic'),
+    )
 
+    // Subtract the number of unknown notification types from the total count.
+    const validatedUnseenCount =
+      unseen.totalCount - (unseen.notifications.length - validatedUnseen.length)
     // If there are new unseen notifications, show a toast and fetch the notifications.
-    if (unseen && unseen.totalCount > prevTotalUnseenCount) {
+    if (unseen && validatedUnseenCount > prevTotalUnseenCount) {
       toast({
         title: m.newNotifications,
         type: toast.types.INFO,
       })
       await dispatch(attachPromise(notifications.getInboxNotifications()))
     }
 
-    return { unseenTotalCount: unseen?.totalCount }
+    return { unseenTotalCount: validatedUnseenCount }
   },
 })
 
@@ -129,8 +147,20 @@ const getArchivedNotificationsLogic = createRequestLogic({
     const filter = [NOTIFICATION_STATUS.ARCHIVED]
     const userId = selectUserId(getState())
     const result = await tts.Notifications.getAllNotifications(userId, filter, page, limit)
+    // Remove unknown notification types from the result and send error to Sentry.
+    // When a new notification type is introduced in the backend, this will prevent
+    // the Console from crashing.
+    const validatedResult = result.notifications.filter(notification =>
+      validateNotification(notification.notification_type, 'getArchivedNotificationsLogic'),
+    )
 
-    return { notifications: result.notifications, totalCount: result.totalCount, page, limit }
+    return {
+      notifications: validatedResult,
+      // Subtract the number of unknown notification types from the total count.
+      totalCount: result.totalCount - (result.notifications.length - validatedResult.length),
+      page,
+      limit,
+    }
   },
 })
 
@@ -143,8 +173,20 @@ const getUnseenNotificationsLogic = createRequestLogic({
     const filter = [NOTIFICATION_STATUS.UNSEEN]
     const userId = selectUserId(getState())
     const result = await tts.Notifications.getAllNotifications(userId, filter, page, limit)
+    // Remove unknown notification types from the result and send error to Sentry.
+    // When a new notification type is introduced in the backend, this will prevent
+    // the Console from crashing.
+    const validatedResult = result.notifications.filter(notification =>
+      validateNotification(notification.notification_type, 'getUnseenNotificationsLogic'),
+    )
 
-    return { notifications: result.notifications, totalCount: result.totalCount, page, limit }
+    return {
+      notifications: validatedResult,
+      // Subtract the number of unknown notification types from the total count.
+      totalCount: result.totalCount - (result.notifications.length - validatedResult.length),
+      page,
+      limit,
+    }
   },
 })