Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Fix quick actions panel #7431

Open
wants to merge 10 commits into
base: v3.33
Choose a base branch
from
Open
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
3 changes: 3 additions & 0 deletions pkg/webui/components/button/button.styl
Original file line number Diff line number Diff line change
Expand Up @@ -120,6 +120,9 @@
&:disabled
background-color: var(--c-bg-error-normal-disabled)

.expand-icon
color: var(--c-text-neutral-min)

&.secondary
color: var(--c-text-neutral-heavy)
background-color: var(--c-bg-neutral-min)
Expand Down
3 changes: 2 additions & 1 deletion pkg/webui/components/header/index.js
Original file line number Diff line number Diff line change
Expand Up @@ -95,7 +95,8 @@ const Header = ({
<div className="d-flex al-center gap-cs-xs">
<AppStatusBadge />
<Button
secondary
primary
message={sharedMessages.add}
icon={IconPlus}
dropdownItems={addDropdownItems}
dropdownPosition="below left"
Expand Down
6 changes: 0 additions & 6 deletions pkg/webui/components/tooltip/index.js
Original file line number Diff line number Diff line change
Expand Up @@ -23,12 +23,6 @@ import style from './tooltip.styl'
let currentInstance

const popperModifiers = [
{
name: 'offset',
options: {
offset: [-12, 8],
},
},
{
name: 'arrow',
options: {
Expand Down
2 changes: 1 addition & 1 deletion pkg/webui/components/tooltip/tooltip.styl
Original file line number Diff line number Diff line change
Expand Up @@ -17,7 +17,7 @@
:global {
.tippy-box {
z-index: $zi.tooltip
border-radius: $br.m
border-radius: $br.xl
background: var(--c-bg-neutral-heavy)
color: var(--c-text-neutral-min)
padding: $cs.m
Expand Down
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
// Copyright © 2024 The Things Network Foundation, The Things Industries B.V.

Check warning on line 1 in pkg/webui/console/components/total-end-devices-upseller-panel/index.js

View workflow job for this annotation

GitHub Actions / Check Mergeability

pkg/webui/console/components/total-end-devices-upseller-panel/index.js has a conflict when merging TheThingsIndustries/lorawan-stack:v3.33.
//
// Licensed under the Apache License, Version 2.0 (the "License");
// you may not use this file except in compliance with the License.
Expand All @@ -13,6 +13,7 @@
// 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'
Expand All @@ -21,10 +22,11 @@
import Message from '@ttn-lw/lib/components/message'

import sharedMessages from '@ttn-lw/lib/shared-messages'
import PropTypes from '@ttn-lw/lib/prop-types'

import style from './total-end-devices-upseller-panel.styl'

const TotalEndDevicesUpsellerPanel = () => {
const TotalEndDevicesUpsellerPanel = ({ className }) => {
const upgradeUrl = 'https://www.thethingsindustries.com/stack/plans/'

return (
Expand All @@ -34,7 +36,7 @@
shortCutLinkButton
shortCutLinkPath="#"
shortCutLinkDisabled
className={style.panel}
className={classNames(className, style.panel)}
compact
>
<div className={style.upseller}>
Expand All @@ -58,4 +60,12 @@
)
}

TotalEndDevicesUpsellerPanel.propTypes = {
className: PropTypes.string,
}

TotalEndDevicesUpsellerPanel.defaultProps = {
className: undefined,
}

export default TotalEndDevicesUpsellerPanel
Original file line number Diff line number Diff line change
Expand Up @@ -13,7 +13,6 @@
// limitations under the License.

.panel
height: 100%
display: flex
flex-direction: column
position: relative
Expand Down
76 changes: 59 additions & 17 deletions pkg/webui/console/containers/shortcut-panel/index.js
Original file line number Diff line number Diff line change
Expand Up @@ -15,6 +15,7 @@
import React from 'react'
import { defineMessages } from 'react-intl'
import { useDispatch } from 'react-redux'
import classNames from 'classnames'

import { APPLICATION } from '@console/constants/entities'

Expand All @@ -28,6 +29,7 @@ import {
} from '@ttn-lw/components/icon'

import sharedMessages from '@ttn-lw/lib/shared-messages'
import PropTypes from '@ttn-lw/lib/prop-types'

import { setSearchOpen, setSearchScope } from '@console/store/actions/search'

Expand All @@ -37,55 +39,95 @@ import ShortcutItem from './shortcut-item'

const m = defineMessages({
shortcuts: 'Quick actions',
addApplication: 'New application',
addGateway: 'New gateway',
addNewOrganization: 'New organization',
addPersonalApiKey: 'New personal API key',
addEndDevice: 'Add end device',
addPersonalApiKey: 'Add API key',
})

const ShortcutPanel = () => {
const ShortcutPanel = ({ panelClassName, mobile }) => {
const dispatch = useDispatch()
const handleRegisterDeviceClick = React.useCallback(() => {
dispatch(setSearchScope(APPLICATION))
dispatch(setSearchOpen(true))
}, [dispatch])

if (mobile) {
return (
<div className="d-flex gap-cs-s">
<ShortcutItem
icon={IconApplication}
title={sharedMessages.createApplication}
link="/applications/add"
mobile
/>
<ShortcutItem
icon={IconDevice}
title={m.addEndDevice}
action={handleRegisterDeviceClick}
mobile
/>
<ShortcutItem
icon={IconUsersGroup}
title={sharedMessages.createOrganization}
link="/organizations/add"
mobile
/>
<ShortcutItem
icon={IconKey}
title={m.addPersonalApiKey}
link="/user-settings/api-keys/add"
mobile
/>
<ShortcutItem
icon={IconGateway}
title={sharedMessages.registerGateway}
link="/gateways/add"
mobile
/>
</div>
)
}

return (
<Panel title={m.shortcuts} icon={IconBolt} divider className="h-full">
<div className="grid gap-cs-xs">
<Panel title={m.shortcuts} icon={IconBolt} className={classNames(panelClassName, 'h-full')}>
<div className="d-flex gap-cs-xs w-full">
<ShortcutItem
icon={IconApplication}
title={m.addApplication}
title={sharedMessages.createApplication}
link="/applications/add"
className="item-6"
/>
<ShortcutItem
icon={IconDevice}
title={sharedMessages.registerDeviceInApplication}
title={sharedMessages.registerEndDevice}
action={handleRegisterDeviceClick}
className="item-6"
/>
<ShortcutItem
icon={IconUsersGroup}
title={m.addNewOrganization}
title={sharedMessages.createOrganization}
link="/organizations/add"
className="item-4"
/>
<ShortcutItem
icon={IconKey}
title={m.addPersonalApiKey}
link="/user/api-keys/add"
className="item-4"
link="/user-settings/api-keys/add"
/>
<ShortcutItem
icon={IconGateway}
title={m.addGateway}
title={sharedMessages.registerGateway}
link="/gateways/add"
className="item-4"
/>
</div>
</Panel>
)
}

ShortcutPanel.propTypes = {
mobile: PropTypes.bool,
panelClassName: PropTypes.string,
}

ShortcutPanel.defaultProps = {
panelClassName: undefined,
mobile: false,
}

export default ShortcutPanel
Original file line number Diff line number Diff line change
Expand Up @@ -17,46 +17,53 @@ import classnames from 'classnames'

import Icon from '@ttn-lw/components/icon'
import Link from '@ttn-lw/components/link'
import Tooltip from '@ttn-lw/components/tooltip'

import Message from '@ttn-lw/lib/components/message'

import PropTypes from '@ttn-lw/lib/prop-types'

import style from './shortcut-item.styl'

const ShortcutItem = ({ icon, title, link, action, className }) =>
const ShortcutItem = ({ icon, link, action, title, className, mobile }) =>
action ? (
<button onClick={action} className={classnames(style.shortcut, className)}>
<div className="pos-relative w-full h-full">
<div className={style.shortcutTitleWrapper}>
<Icon icon={icon} className={style.icon} size={28} />
<Message content={title} component="span" />
</div>
</div>
</button>
<Tooltip
content={<Message content={title} />}
className={classnames(style.shortcutTooltip, 'fs-m br-l')}
delay={0}
>
<button onClick={action} className={classnames(style.shortcut, className)}>
<Icon icon={icon} className={style.icon} size={28} />
{mobile && <Message content={title} className="lg-xl:d-none" />}
</button>
</Tooltip>
) : (
<Link to={link} className={classnames(style.shortcut, className)}>
<div className="pos-relative w-full h-full">
<div className={style.shortcutTitleWrapper}>
<Icon icon={icon} className={style.icon} size={28} />
<Message content={title} component="span" />
</div>
</div>
</Link>
<Tooltip
content={<Message content={title} />}
className={classnames(style.shortcutTooltip, 'fs-m br-l')}
delay={0}
>
<Link to={link} className={classnames(style.shortcut, className)}>
<Icon icon={icon} className={style.icon} size={28} />
{mobile && <Message content={title} className="lg-xl:d-none" />}
</Link>
</Tooltip>
)

ShortcutItem.propTypes = {
action: PropTypes.func,
className: PropTypes.string,
icon: PropTypes.icon.isRequired,
link: PropTypes.string,
mobile: PropTypes.bool,
title: PropTypes.message.isRequired,
}

ShortcutItem.defaultProps = {
className: undefined,
action: undefined,
link: undefined,
mobile: false,
}

export default ShortcutItem
Original file line number Diff line number Diff line change
Expand Up @@ -12,45 +12,29 @@
// See the License for the specific language governing permissions and
// limitations under the License.

.shortcut-tooltip
padding: $cs.xs $cs.m 0.6rem

.shortcut
padding: $cs.s $cs.m
color: var(--c-text-brand-normal)
background-color: var(--c-bg-brand-light)
border-radius: $br.l
height: 4.5rem
width: 100%
display: flex
gap: $cs.m
flex-direction: column
align-items: center
justify-content: center
padding: $cs.s $cs.m
text-decoration: none
height: 9rem
border-radius: $br.l
background: var(--c-bg-brand-normal)
color: var(--c-text-neutral-min)
font-size: $fs.m
gap: $cs.xs
font-weight: $fw.bold
transition: $ad.s background ease-in-out
-webkit-appearance: none
border: 0

&-title-wrapper
width: 100%
height: 100%
display: flex
justify-content: center
align-items: center
flex-direction: column
text-wrap: wrap
text-align: center
gap: $cs.m
transition: $ad.s opacity ease-in-out

span
line-height: normal
+media-query(1304px)
padding: $cs.xxs $cs.xs

span.icon
font-size: 2rem
.icon
color: var(--c-icon-brand-normal)

&:hover
cursor: pointer
background: var(--c-bg-brand-normal-hover)

span.icon
font-size: 2rem
background-color: var(--c-bg-brand-semilight)
Loading
Loading