Skip to content

Commit 47e0976

Browse files
Elessar1802Elessar1802
committed
feat: FE misc changes
1 parent 2b0294f commit 47e0976

File tree

5 files changed

+55
-43
lines changed

5 files changed

+55
-43
lines changed

‎src/components/ResourceBrowser/ResourceList/ClusterSelector.tsx

Lines changed: 18 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -14,7 +14,7 @@
1414
* limitations under the License.
1515
*/
1616

17-
import React, { useRef, useState } from 'react'
17+
import React, { useEffect, useRef, useState } from 'react'
1818
import { useHistory } from 'react-router-dom'
1919
import ReactSelect, { Props as SelectProps, SelectInstance } from 'react-select'
2020

@@ -29,6 +29,7 @@ import {
2929
PopupMenu,
3030
ToastManager,
3131
ToastVariantType,
32+
useRegisterShortcut,
3233
ValueContainerWithLoadingShimmer,
3334
} from '@devtron-labs/devtron-fe-common-lib'
3435

@@ -66,6 +67,22 @@ const ClusterSelector: React.FC<ClusterSelectorType> = ({
6667

6768
const selectRef = useRef<SelectInstance>(null)
6869

70+
const { registerShortcut, unregisterShortcut } = useRegisterShortcut()
71+
72+
useEffect(() => {
73+
registerShortcut({
74+
keys: ['S'],
75+
callback: () => {
76+
selectRef.current?.focus()
77+
selectRef.current?.openMenu('first')
78+
},
79+
})
80+
81+
return () => {
82+
unregisterShortcut(['S'])
83+
}
84+
}, [])
85+
6986
let filteredClusterList = clusterList
7087
if (window._env_.HIDE_DEFAULT_CLUSTER) {
7188
filteredClusterList = clusterList.filter((item) => Number(item.value) !== DEFAULT_CLUSTER_ID)

‎src/components/ResourceBrowser/ResourceList/NodeListSearchFilter.tsx

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -107,12 +107,12 @@ const NodeListSearchFilter = ({
107107

108108
useEffect(() => {
109109
if (registerShortcut) {
110-
registerShortcut({ keys: ['R'], callback: handleFocusInput })
110+
registerShortcut({ keys: ['/'], callback: handleFocusInput })
111111
registerShortcut({ keys: ['Escape'], callback: handleBlurInput })
112112
}
113113

114114
return (): void => {
115-
unregisterShortcut(['R'])
115+
unregisterShortcut(['/'])
116116
unregisterShortcut(['Escape'])
117117
}
118118
}, [])
@@ -249,7 +249,7 @@ const NodeListSearchFilter = ({
249249
)}
250250

251251
{!searchTextType && (
252-
<ShortcutKeyBadge shortcutKey="r" rootClassName="node-listing-search-container__shortcut-key" />
252+
<ShortcutKeyBadge shortcutKey="/" rootClassName="node-listing-search-container__shortcut-key" />
253253
)}
254254
</button>
255255

‎src/components/ResourceBrowser/ResourceList/ResourceFilterOptions.tsx

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -130,13 +130,13 @@ const ResourceFilterOptions = ({
130130

131131
useEffect(() => {
132132
if (registerShortcut) {
133-
registerShortcut({ keys: ['R'], callback: handleInputShortcut })
133+
registerShortcut({ keys: ['/'], callback: handleInputShortcut })
134134
registerShortcut({ keys: ['F'], callback: handleShowFilterModal })
135135
registerShortcut({ keys: ['N'], callback: handleFocusNamespaceFilter })
136136
}
137137
return (): void => {
138138
unregisterShortcut(['F'])
139-
unregisterShortcut(['R'])
139+
unregisterShortcut(['/'])
140140
unregisterShortcut(['N'])
141141
}
142142
}, [])
@@ -243,7 +243,7 @@ const ResourceFilterOptions = ({
243243
/>
244244
{showShortcutKey && (
245245
<ShortcutKeyBadge
246-
shortcutKey="r"
246+
shortcutKey="/"
247247
rootClassName="resource-search-shortcut-key"
248248
onClick={handleInputShortcut}
249249
/>

‎src/components/ResourceBrowser/ResourceList/Sidebar.tsx

Lines changed: 11 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -24,6 +24,7 @@ import {
2424
ApiResourceGroupType,
2525
DUMMY_RESOURCE_GVK_VERSION,
2626
highlightSearchText,
27+
K8S_EMPTY_GROUP,
2728
Nodes,
2829
ReactSelectInputAction,
2930
RESOURCE_BROWSER_ROUTES,
@@ -33,7 +34,7 @@ import {
3334

3435
import { ReactComponent as ICExpand } from '../../../assets/icons/ic-expand.svg'
3536
import { AggregationKeys } from '../../app/types'
36-
import { K8S_EMPTY_GROUP, KIND_SEARCH_COMMON_STYLES, ResourceBrowserTabsId, SIDEBAR_KEYS } from '../Constants'
37+
import { KIND_SEARCH_COMMON_STYLES, ResourceBrowserTabsId, SIDEBAR_KEYS } from '../Constants'
3738
import { K8SObjectChildMapType, K8SObjectMapType, K8sObjectOptionType, SidebarType } from '../Types'
3839
import {
3940
convertK8sObjectMapToOptionsList,
@@ -47,7 +48,7 @@ const Sidebar = ({ apiResources, selectedResource, updateK8sResourceTab, updateT
4748
const { registerShortcut, unregisterShortcut } = useRegisterShortcut()
4849
const location = useLocation()
4950
const { push } = useHistory()
50-
const { clusterId, kind } = useParams<K8sResourceListURLParams>()
51+
const { clusterId, kind, group } = useParams<K8sResourceListURLParams>()
5152
const [searchText, setSearchText] = useState('')
5253
/* NOTE: apiResources prop will only change after a component mount/dismount */
5354
const [list, setList] = useState(convertResourceGroupListToK8sObjectList(apiResources || null, kind))
@@ -161,8 +162,14 @@ const Sidebar = ({ apiResources, selectedResource, updateK8sResourceTab, updateT
161162
return
162163
}
163164
/* NOTE: match will never be null; due to node fallback */
165+
const lowercasedKind = kind.toLowerCase()
166+
const lowercasedGroup = group.toLowerCase()
164167
const match =
165-
k8sObjectOptionsList.find((option) => option.dataset.kind.toLowerCase() === kind) ?? k8sObjectOptionsList[0]
168+
k8sObjectOptionsList.find(
169+
(option) =>
170+
option.dataset.kind.toLowerCase() === lowercasedKind &&
171+
(option.dataset.group || K8S_EMPTY_GROUP).toLowerCase() === lowercasedGroup,
172+
) ?? k8sObjectOptionsList[0]
166173
/* NOTE: if nodeType doesn't match the selectedResource kind, set it accordingly */
167174
selectNode(
168175
{
@@ -172,7 +179,7 @@ const Sidebar = ({ apiResources, selectedResource, updateK8sResourceTab, updateT
172179
},
173180
match.groupName,
174181
)
175-
}, [kind, k8sObjectOptionsList])
182+
}, [kind, group, k8sObjectOptionsList])
176183

177184
const selectedChildRef: React.Ref<HTMLButtonElement> = (node) => {
178185
/**

‎src/components/common/DynamicTabs/DynamicTabs.tsx

Lines changed: 20 additions & 32 deletions
Original file line numberDiff line numberDiff line change
@@ -14,7 +14,7 @@
1414
* limitations under the License.
1515
*/
1616

17-
import React, { cloneElement, RefCallback, useMemo, useRef } from 'react'
17+
import React, { cloneElement, MouseEventHandler, RefCallback, useMemo, useRef } from 'react'
1818
import { useHistory } from 'react-router-dom'
1919
import Tippy from '@tippyjs/react'
2020
import { Dayjs } from 'dayjs'
@@ -26,13 +26,13 @@ import {
2626
ComponentSizeType,
2727
ConditionalWrap,
2828
DynamicTabType,
29+
Icon,
2930
logExceptionToSentry,
3031
noop,
3132
Progressing,
3233
} from '@devtron-labs/devtron-fe-common-lib'
3334

3435
import { ReactComponent as ICArrowClockwise } from '@Icons/ic-arrow-clockwise.svg'
35-
import { ReactComponent as ICCross } from '@Icons/ic-cross.svg'
3636

3737
import Timer from './DynamicTabs.timer'
3838
import DynamicTabsSelect from './DynamicTabsSelect'
@@ -204,6 +204,22 @@ const DynamicTabs = ({
204204
</Tippy>
205205
)
206206

207+
const renderCloseButton = (onClick: MouseEventHandler<HTMLButtonElement>) => (
208+
<div className="pr-12 dc__zi-2 dc__no-shrink">
209+
<Button
210+
variant={ButtonVariantType.borderLess}
211+
size={ComponentSizeType.xxs}
212+
style={ButtonStyleType.negativeGrey}
213+
icon={<Icon name="ic-close-small" color={null} />}
214+
dataTestId="close-icon"
215+
onClick={onClick}
216+
ariaLabel={`Close tab ${tab.name}`}
217+
showAriaLabelInTippy={false}
218+
data-id={tab.id}
219+
/>
220+
</div>
221+
)
222+
207223
return (
208224
<ConditionalWrap key={tab.id} condition={!isFixed} wrap={renderWithTippy}>
209225
<div
@@ -213,36 +229,8 @@ const DynamicTabs = ({
213229
className={`${isFixed ? 'fixed-tab' : 'dynamic-tab'} flex dc__gap-5 cn-9 ${tab.isSelected ? 'dynamic-tab-selected bg__primary' : ''}`}
214230
>
215231
{getTabNavLink(tab)}
216-
{_showNameOnSelect && (
217-
<button
218-
type="button"
219-
// NOTE: need dc__zi-2 because the before pseudo class renders
220-
// the rounded corners and it has a z-index of 1
221-
className="dc__unset-button-styles pr-12 dc__zi-2"
222-
aria-label={`Stop tab ${tab.name}`}
223-
onClick={handleTabStopAction}
224-
data-id={tab.id}
225-
>
226-
<div className="dynamic-tab__close flex br-4">
227-
<ICCross className="icon-dim-16 cursor p-2 fcn-6 scn-6" />
228-
</div>
229-
</button>
230-
)}
231-
{!isFixed && (
232-
<button
233-
type="button"
234-
// NOTE: need dc__zi-2 because the before pseudo class renders
235-
// the rounded corners and it has a z-index of 1
236-
className="dc__unset-button-styles pr-12 dc__zi-2"
237-
aria-label={`Close tab ${tab.name}`}
238-
onClick={handleTabCloseAction}
239-
data-id={tab.id}
240-
>
241-
<div className="dynamic-tab__close flex br-4">
242-
<ICCross className="icon-dim-16 cursor p-2 fcn-6 scn-6" />
243-
</div>
244-
</button>
245-
)}
232+
{_showNameOnSelect && renderCloseButton(handleTabStopAction)}
233+
{!isFixed && renderCloseButton(handleTabCloseAction)}
246234
</div>
247235
</ConditionalWrap>
248236
)

0 commit comments

Comments
 (0)