libre.sh/keycloak-scim
4
0
Fork 0
Code Issues 15 Pull requests Releases 1 Activity Actions

Do not nest components in UserCredentials (#27775)

Browse source 
Signed-off-by: Jon Koops <jonkoops@gmail.com>
This commit is contained in:
Jon Koops 2024-03-26 13:15:00 +01:00 committed by GitHub
parent 2f0a9ba547
commit ed7815401f
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
1 changed files with 75 additions and 37 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

112
js/apps/admin-ui/src/user/UserCredentials.tsx
View file

@ -53,6 +53,56 @@ type ExpandableCredentialRepresentation = {
isExpanded: boolean;
};
type UserLabelEdit = {
status: boolean;
rowKey: string;
};
type UserCredentialsRowProps = {
credential: CredentialRepresentation;
userId: string;
toggleDelete: (credential: CredentialRepresentation) => void;
resetPassword: () => void;
isUserLabelEdit?: UserLabelEdit;
setIsUserLabelEdit: (isUserLabelEdit: UserLabelEdit) => void;
refresh: () => void;
};
const UserCredentialsRow = ({
credential,
userId,
toggleDelete,
resetPassword,
isUserLabelEdit,
setIsUserLabelEdit,
refresh,
}: UserCredentialsRowProps) => (
<CredentialRow
key={credential.id}
credential={credential}
toggleDelete={() => toggleDelete(credential)}
resetPassword={resetPassword}
>
<InlineLabelEdit
credential={credential}
userId={userId}
isEditable={
(isUserLabelEdit?.status && isUserLabelEdit.rowKey === credential.id) ||
false
}
toggle={() => {
setIsUserLabelEdit({
status: !isUserLabelEdit?.status,
rowKey: credential.id!,
});
if (isUserLabelEdit?.status) {
refresh();
}
}}
/>
</CredentialRow>
);
export const UserCredentials = ({ user, setUser }: UserCredentialsProps) => {
const { t } = useTranslation();
const { addAlert, addError } = useAlerts();
@ -69,10 +119,7 @@ export const UserCredentials = ({ user, setUser }: UserCredentialsProps) => {
const [selectedCredential, setSelectedCredential] =
useState<CredentialRepresentation>({});
const [isResetPassword, setIsResetPassword] = useState(false);
const [isUserLabelEdit, setIsUserLabelEdit] = useState<{
status: boolean;
rowKey: string;
}>();
const [isUserLabelEdit, setIsUserLabelEdit] = useState<UserLabelEdit>();
const bodyRef = useRef<HTMLTableSectionElement>(null);
const [state, setState] = useState({
@ -141,37 +188,6 @@ export const UserCredentials = ({ user, setUser }: UserCredentialsProps) => {
},
});
const Row = ({ credential }: { credential: CredentialRepresentation }) => (
<CredentialRow
key={credential.id}
credential={credential}
toggleDelete={() => {
setSelectedCredential(credential);
toggleDeleteDialog();
}}
resetPassword={resetPassword}
>
<InlineLabelEdit
credential={credential}
userId={user.id!}
isEditable={
(isUserLabelEdit?.status &&
isUserLabelEdit.rowKey === credential.id) ||
false
}
toggle={() => {
setIsUserLabelEdit({
status: !isUserLabelEdit?.status,
rowKey: credential.id!,
});
if (isUserLabelEdit?.status) {
refresh();
}
}}
/>
</CredentialRow>
);
const itemOrder = useMemo(
() =>
groupedUserCredentials.flatMap((groupedCredential) => [
@ -339,6 +355,11 @@ export const UserCredentials = ({ user, setUser }: UserCredentialsProps) => {
}
};
const onToggleDelete = (credential: CredentialRepresentation) => {
setSelectedCredential(credential);
toggleDeleteDialog();
};
const useFederatedCredentials = user.federationLink || user.origin;
const [credentialTypes, setCredentialTypes] = useState<string[]>([]);
@ -480,7 +501,16 @@ export const UserCredentials = ({ user, setUser }: UserCredentialsProps) => {
</Td>
{groupedCredential.value.length <= 1 &&
groupedCredential.value.map((credential) => (
<Row key={credential.id} credential={credential} />
<UserCredentialsRow
key={credential.id}
credential={credential}
userId={user.id!}
toggleDelete={onToggleDelete}
resetPassword={resetPassword}
isUserLabelEdit={isUserLabelEdit}
setIsUserLabelEdit={setIsUserLabelEdit}
refresh={refresh}
/>
))}
</Tr>
{groupedCredential.isExpanded &&
@ -508,7 +538,15 @@ export const UserCredentials = ({ user, setUser }: UserCredentialsProps) => {
>
{toUpperCase(credential.type!)}
</Td>
<Row credential={credential} />
<UserCredentialsRow
credential={credential}
userId={user.id!}
toggleDelete={onToggleDelete}
resetPassword={resetPassword}
isUserLabelEdit={isUserLabelEdit}
setIsUserLabelEdit={setIsUserLabelEdit}
refresh={refresh}
/>
</Tr>
))}
</Fragment>