Skip to content

Commit bb49399

Browse files
germanosingermanosin
authored
Merge branch 'main' into issues/1087-fts
2 parents 56889da + 81d92da commit bb49399

File tree

7 files changed

+146
-10
lines changed

7 files changed

+146
-10
lines changed

‎frontend/src/components/Connect/List/ActionsCell.tsx‎

Lines changed: 4 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
import React from 'react';
1+
import React, { useContext } from 'react';
22
import {
33
Action,
44
ConnectorAction,
@@ -18,12 +18,14 @@ import {
1818
import { useConfirm } from 'lib/hooks/useConfirm';
1919
import { useIsMutating } from '@tanstack/react-query';
2020
import { ActionDropdownItem } from 'components/common/ActionComponent';
21+
import ClusterContext from 'components/contexts/ClusterContext';
2122

2223
const ActionsCell: React.FC<CellContext<FullConnectorInfo, unknown>> = ({
2324
row,
2425
}) => {
2526
const { connect, name, status } = row.original;
2627
const { clusterName } = useAppParams<ClusterNameRoute>();
28+
const { isReadOnly } = useContext(ClusterContext);
2729
const mutationsNumber = useIsMutating();
2830
const isMutating = mutationsNumber > 0;
2931
const confirm = useConfirm();
@@ -123,7 +125,7 @@ const ActionsCell: React.FC<CellContext<FullConnectorInfo, unknown>> = ({
123125
)}
124126
<ActionDropdownItem
125127
onClick={restartConnectorHandler}
126-
disabled={isMutating}
128+
disabled={isMutating || isReadOnly}
127129
permission={{
128130
resource: ResourceType.CONNECT,
129131
action: Action.OPERATE,

‎frontend/src/components/Schemas/List/List.tsx‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -97,6 +97,7 @@ const List: React.FC = () => {
9797
onRowClick={(row) =>
9898
navigate(clusterSchemaPath(clusterName, row.original.subject))
9999
}
100+
enableSorting
100101
serverSideProcessing
101102
/>
102103
)}

‎frontend/src/components/common/MultiSelect/MultiSelect.styled.ts‎

Lines changed: 114 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -28,10 +28,123 @@ const MultiSelect = styled(ReactMultiSelect)<{
2828
background-color: ${({ theme }) =>
2929
theme.select.backgroundColor.active} !important;
3030
}
31-
.options li {
31+
32+
.options li .select-item,
33+
.options .select-item {
34+
display: flex;
35+
align-items: center;
36+
3237
background-color: ${({ theme }) =>
3338
theme.select.backgroundColor.normal} !important;
39+
40+
input[type='checkbox'] {
41+
appearance: none;
42+
-webkit-appearance: none;
43+
position: relative;
44+
45+
display: flex;
46+
align-items: center;
47+
}
48+
49+
.item-renderer span {
50+
color: ${({ theme }) => theme.select.color.normal} !important;
51+
}
52+
53+
&::before {
54+
content: ' ';
55+
flex-shrink: 0;
56+
display: block;
57+
margin: 0 8px 0 0;
58+
width: 16px;
59+
height: 16px;
60+
border-radius: 3px;
61+
62+
vertical-align: middle;
63+
64+
border: 1px solid
65+
${({ theme }) => theme.select.multiSelectOption.checkbox.borderColor} !important;
66+
background-color: ${({ theme }) =>
67+
theme.select.multiSelectOption.checkbox.backgroundColor} !important;
68+
}
69+
70+
&:hover {
71+
background-color: ${({ theme }) =>
72+
theme.select.backgroundColor.hover} !important;
73+
74+
.item-renderer span {
75+
color: ${({ theme }) => theme.select.color.hover} !important;
76+
}
77+
}
78+
79+
&.selected {
80+
background-color: ${({ theme }) =>
81+
theme.select.backgroundColor.active} !important;
82+
83+
.item-renderer span {
84+
color: ${({ theme }) => theme.select.color.active} !important;
85+
}
86+
87+
&::before {
88+
border-width: 2px !important;
89+
border-radius: 4px !important;
90+
border-color: ${({ theme }) => theme.select.color.active} !important;
91+
background-color: ${({ theme }) =>
92+
theme.select.backgroundColor.active} !important;
93+
}
94+
95+
input[type='checkbox']::before {
96+
content: ' ';
97+
position: absolute;
98+
top: -5px;
99+
left: -24px;
100+
101+
width: 17px;
102+
height: 1px;
103+
transform: rotate(45deg);
104+
background-color: ${({ theme }) =>
105+
theme.select.color.active} !important;
106+
}
107+
input[type='checkbox']::after {
108+
content: ' ';
109+
position: absolute;
110+
top: -5px;
111+
left: -25px;
112+
113+
width: 17px;
114+
height: 1px;
115+
transform: rotate(-45deg);
116+
background-color: ${({ theme }) =>
117+
theme.select.color.active} !important;
118+
}
119+
120+
&:hover {
121+
background-color: ${({ theme }) =>
122+
theme.select.backgroundColor.hover} !important;
123+
124+
.item-renderer span {
125+
color: ${({ theme }) => theme.select.color.hover} !important;
126+
}
127+
128+
input[type='checkbox']::before,
129+
input[type='checkbox']::after {
130+
background-color: ${({ theme }) =>
131+
theme.select.color.hover} !important;
132+
}
133+
134+
&::before {
135+
border-color: ${({ theme }) => theme.select.color.hover} !important;
136+
background-color: ${({ theme }) =>
137+
theme.select.backgroundColor.hover} !important;
138+
}
139+
}
140+
}
141+
142+
&.disabled:before {
143+
background: #eee;
144+
color: #aaa;
145+
}
34146
}
147+
35148
& > .dropdown-container {
36149
background-color: ${({ theme }) =>
37150
theme.input.backgroundColor.normal} !important;

‎frontend/src/components/common/Select/Select.styled.ts‎

Lines changed: 5 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -75,7 +75,7 @@ export const OptionList = styled.ul`
7575
max-height: 228px;
7676
margin-top: 4px;
7777
background-color: ${({ theme }) => theme.select.backgroundColor.normal};
78-
border: 1px ${({ theme }) => theme.select.borderColor.normal} solid;
78+
border: 1px ${({ theme }) => theme.select.optionList.borderColor} solid;
7979
border-radius: 4px;
8080
font-size: 14px;
8181
line-height: 18px;
@@ -116,11 +116,15 @@ export const Option = styled.li<OptionProps>`
116116
theme.select.color[disabled ? 'disabled' : 'normal']};
117117
118118
&:hover {
119+
color: ${({ theme, disabled }) =>
120+
theme.select.color[disabled ? 'disabled' : 'hover']};
119121
background-color: ${({ theme, disabled }) =>
120122
theme.select.backgroundColor[disabled ? 'normal' : 'hover']};
121123
}
122124
123125
&:active {
126+
color: ${({ theme, disabled }) =>
127+
theme.select.color[disabled ? 'disabled' : 'active']};
124128
background-color: ${({ theme }) => theme.select.backgroundColor.active};
125129
}
126130
`;

‎frontend/src/lib/hooks/api/appConfig.ts‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -38,8 +38,9 @@ export function useAppInfo() {
3838
response = {};
3939
}
4040

41+
const url = new URL(data.raw.url);
4142
return {
42-
redirect: data.raw.url.includes('auth'),
43+
redirect: url.pathname.includes('auth'),
4344
response,
4445
};
4546
});

‎frontend/src/theme/theme.ts‎

Lines changed: 18 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -478,7 +478,7 @@ export const theme = {
478478
},
479479
dropdown: {
480480
backgroundColor: Colors.brand[0],
481-
borderColor: Colors.brand[5],
481+
borderColor: Colors.brand[10],
482482
shadow: Colors.transparency[20],
483483
item: {
484484
color: {
@@ -765,11 +765,11 @@ export const theme = {
765765
select: {
766766
backgroundColor: {
767767
normal: Colors.neutral[0],
768-
hover: Colors.neutral[10],
768+
hover: Colors.neutral[5],
769769
active: Colors.neutral[10],
770770
},
771771
color: {
772-
normal: Colors.neutral[90],
772+
normal: Colors.neutral[70],
773773
hover: Colors.neutral[90],
774774
active: Colors.neutral[90],
775775
disabled: Colors.neutral[30],
@@ -781,10 +781,17 @@ export const theme = {
781781
disabled: Colors.neutral[10],
782782
},
783783
optionList: {
784+
borderColor: Colors.neutral[10],
784785
scrollbar: {
785786
backgroundColor: Colors.neutral[30],
786787
},
787788
},
789+
multiSelectOption: {
790+
checkbox: {
791+
backgroundColor: Colors.neutral[0],
792+
borderColor: Colors.neutral[50],
793+
},
794+
},
788795
label: Colors.neutral[50],
789796
},
790797
input: {
@@ -1359,7 +1366,7 @@ export const darkTheme: ThemeType = {
13591366
active: Colors.neutral[70],
13601367
},
13611368
color: {
1362-
normal: Colors.neutral[0],
1369+
normal: Colors.neutral[20],
13631370
hover: Colors.neutral[0],
13641371
active: Colors.neutral[0],
13651372
disabled: Colors.neutral[60],
@@ -1371,10 +1378,17 @@ export const darkTheme: ThemeType = {
13711378
disabled: Colors.neutral[70],
13721379
},
13731380
optionList: {
1381+
borderColor: Colors.neutral[70],
13741382
scrollbar: {
13751383
backgroundColor: Colors.neutral[30],
13761384
},
13771385
},
1386+
multiSelectOption: {
1387+
checkbox: {
1388+
backgroundColor: Colors.neutral[90],
1389+
borderColor: Colors.neutral[50],
1390+
},
1391+
},
13781392
label: Colors.neutral[50],
13791393
},
13801394
input: {

‎frontend/src/widgets/ClusterConfigForm/utils/getJaasConfig.ts‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -11,7 +11,8 @@ const JAAS_CONFIGS = {
1111
'SASL/AWS IAM': 'software.amazon.msk.auth.iam.IAMLoginModule',
1212
'SASL/Azure Entra':
1313
'org.apache.kafka.common.security.oauthbearer.OAuthBearerLoginModule',
14-
'SASL/GCP IAM': 'com.google.cloud.hosted.kafka.auth.GcpLoginCallbackHandler',
14+
'SASL/GCP IAM':
15+
'org.apache.kafka.common.security.oauthbearer.OAuthBearerLoginModule',
1516
};
1617

1718
type MethodName = keyof typeof JAAS_CONFIGS;

0 commit comments

Comments
 (0)