Nemcio/SCM-Manager
1
0
Fork 0
mirror of https://github.com/scm-manager/scm-manager.git synced 2025-11-10 15:35:49 +01:00
Code Issues Packages Projects Releases Activity

Improve modal accessibility

Browse Source 
Implement initial focus for modals. Change all modals including forms to put initial focus on the first input. When Enter is pressed on any input (CTRL + Enter for Textareas), the form is submitted if it is valid.

Co-authored-by: Sebastian Sdorra <sebastian.sdorra@cloudogu.com>
Co-authored-by: Eduard Heimbuch <eduard.heimbuch@cloudogu.com>
This commit is contained in:
Konstantin Schaper
2022-01-21 14:25:19 +01:00
committed by GitHub
parent d8fcb12402
commit d0cf976a54
37 changed files with 1848 additions and 570 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
gradle/changelog/modal-focus.yaml Normal file
View File

@@ -0,0 +1,2 @@
- type: added
description: initial focus, submission on pressing enter and fix trap focus for modals ([#1925](https://github.com/scm-manager/scm-manager/pull/1925))

5
scm-ui/ui-components/.storybook/main.js
View File

@@ -27,11 +27,14 @@ const fs = require("fs");
const MiniCssExtractPlugin = require("mini-css-extract-plugin");
const RemoveThemesPlugin = require("./RemoveThemesPlugin");
const WorkerPlugin = require("worker-plugin");
const ReactDOM = require("react-dom");
const root = path.resolve("..");
const themedir = path.join(root, "ui-styles", "src");
ReactDOM.createPortal = node => node;
const themes = fs
.readdirSync(themedir)
.map(filename => path.parse(filename))
@@ -50,7 +53,7 @@ module.exports = {
// add our themes to webpack entry points
config.entry = {
main: config.entry,
...themes,
...themes
};
// create separate css files for our themes

3
scm-ui/ui-components/package.json
View File

@@ -92,7 +92,8 @@
"remark-parse": "^9.0.0",
"remark-rehype": "^8.0.0",
"tabbable": "^5.2.1",
"unified": "^9.2.1"
"unified": "^9.2.1",
"@headlessui/react": "^1.4.3"
},
"babel": {
"presets": [

1376
scm-ui/ui-components/src/__snapshots__/storyshots.test.ts.snap
View File

File diff suppressed because it is too large Load Diff

13
scm-ui/ui-components/src/buttons/Button.tsx
View File

@@ -40,6 +40,7 @@ export type ButtonProps = {
reducedMobile?: boolean;
children?: ReactNode;
testId?: string;
ref?: React.ForwardedRef<HTMLButtonElement>;
};
type Props = ButtonProps & {
@@ -47,7 +48,11 @@ type Props = ButtonProps & {
color?: string;
};
const Button: FC<Props> = ({
type InnerProps = Props & {
innerRef: React.Ref<HTMLButtonElement>;
};
const Button: FC<InnerProps> = ({
link,
className,
icon,
@@ -61,7 +66,8 @@ const Button: FC<Props> = ({
loading,
disabled,
action,
color = "default"
color = "default",
innerRef
}) => {
const renderIcon = () => {
return <>{icon ? <Icon name={icon} color="inherit" className="is-medium pr-1" /> : null}</>;
@@ -109,6 +115,7 @@ const Button: FC<Props> = ({
disabled={disabled}
onClick={event => action && action(event)}
className={classes}
ref={innerRef}
{...createAttributesForTesting(testId)}
>
{content}
@@ -116,4 +123,4 @@ const Button: FC<Props> = ({
);
};
export default Button;
export default React.forwardRef<HTMLButtonElement, Props>((props, ref) => <Button {...props} innerRef={ref} />);

124
scm-ui/ui-components/src/forms/PasswordConfirmation.tsx
View File

@@ -21,112 +21,78 @@
* OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
* SOFTWARE.
*/
import React from "react";
import { WithTranslation, withTranslation } from "react-i18next";
import React, { FC, useEffect, useState } from "react";
import { useTranslation } from "react-i18next";
import InputField from "./InputField";
type State = {
password: string;
confirmedPassword: string;
passwordValid: boolean;
passwordConfirmationFailed: boolean;
};
type Props = WithTranslation & {
type BaseProps = {
passwordChanged: (p1: string, p2: boolean) => void;
passwordValidator?: (p: string) => boolean;
onReturnPressed?: () => void;
};
class PasswordConfirmation extends React.Component<Props, State> {
constructor(props: Props) {
super(props);
this.state = {
password: "",
confirmedPassword: "",
passwordValid: true,
passwordConfirmationFailed: false,
type InnerProps = BaseProps & {
innerRef: React.Ref<HTMLInputElement>;
};
const PasswordConfirmation: FC<InnerProps> = ({ passwordChanged, passwordValidator, onReturnPressed, innerRef }) => {
const [t] = useTranslation("commons");
const [password, setPassword] = useState("");
const [confirmedPassword, setConfirmedPassword] = useState("");
const [passwordValid, setPasswordValid] = useState(true);
const [passwordConfirmationFailed, setPasswordConfirmationFailed] = useState(false);
const isValid = passwordValid && !passwordConfirmationFailed;
useEffect(() => passwordChanged(password, isValid), [password, isValid]);
const validatePassword = (newPassword: string) => {
if (passwordValidator) {
return passwordValidator(newPassword);
}
return newPassword.length >= 6 && newPassword.length < 32;
};
}
componentDidMount() {
this.setState({
password: "",
confirmedPassword: "",
passwordValid: true,
passwordConfirmationFailed: false,
});
}
const handlePasswordValidationChange = (newConfirmedPassword: string) => {
setConfirmedPassword(newConfirmedPassword);
setPasswordConfirmationFailed(password !== newConfirmedPassword);
};
const handlePasswordChange = (newPassword: string) => {
setPasswordConfirmationFailed(newPassword !== confirmedPassword);
setPassword(newPassword);
setPasswordValid(validatePassword(newPassword));
};
render() {
const { t, onReturnPressed } = this.props;
return (
<div className="columns is-multiline">
<div className="column is-half">
<InputField
label={t("password.newPassword")}
type="password"
onChange={this.handlePasswordChange}
value={this.state.password ? this.state.password : ""}
validationError={!this.state.passwordValid}
onChange={event => handlePasswordChange(event.target.value)}
value={password}
validationError={!passwordValid}
errorMessage={t("password.passwordInvalid")}
ref={innerRef}
onReturnPressed={onReturnPressed}
/>
</div>
<div className="column is-half">
<InputField
label={t("password.confirmPassword")}
type="password"
onChange={this.handlePasswordValidationChange}
value={this.state ? this.state.confirmedPassword : ""}
validationError={this.state.passwordConfirmationFailed}
onChange={handlePasswordValidationChange}
value={confirmedPassword}
validationError={passwordConfirmationFailed}
errorMessage={t("password.passwordConfirmFailed")}
onReturnPressed={onReturnPressed}
/>
</div>
</div>
);
}
};
validatePassword = (password: string) => {
const { passwordValidator } = this.props;
if (passwordValidator) {
return passwordValidator(password);
}
return password.length >= 6 && password.length < 32;
};
handlePasswordValidationChange = (confirmedPassword: string) => {
const passwordConfirmed = this.state.password === confirmedPassword;
this.setState(
{
confirmedPassword,
passwordConfirmationFailed: !passwordConfirmed,
},
this.propagateChange
);
};
handlePasswordChange = (password: string) => {
const passwordConfirmationFailed = password !== this.state.confirmedPassword;
this.setState(
{
passwordValid: this.validatePassword(password),
passwordConfirmationFailed,
password: password,
},
this.propagateChange
);
};
isValid = () => {
return this.state.passwordValid && !this.state.passwordConfirmationFailed;
};
propagateChange = () => {
this.props.passwordChanged(this.state.password, this.isValid());
};
}
export default withTranslation("commons")(PasswordConfirmation);
export default React.forwardRef<HTMLInputElement, BaseProps>((props, ref) => (
<PasswordConfirmation {...props} innerRef={ref} />
));

23
scm-ui/ui-components/src/modals/ConfirmAlert.stories.tsx
View File

@@ -37,15 +37,27 @@ const buttons = [
{
className: "is-outlined",
label: "Cancel",
onClick: () => null,
onClick: () => null
},
{
label: "Submit",
label: "Submit"
}
];
const buttonsWithAutofocus = [
{
className: "is-outlined",
label: "Cancel",
onClick: () => null
},
{
label: "I should be focused",
autofocus: true
}
];
storiesOf("Modal/ConfirmAlert", module)
.addDecorator((story) => <MemoryRouter initialEntries={["/"]}>{story()}</MemoryRouter>)
.addDecorator(story => <MemoryRouter initialEntries={["/"]}>{story()}</MemoryRouter>)
.add("Default", () => <ConfirmAlert message={body} title={"Are you sure about that?"} buttons={buttons} />)
.add("WithButton", () => {
const buttonClick = () => {
@@ -57,4 +69,7 @@ storiesOf("Modal/ConfirmAlert", module)
<div id="modalRoot" />
</>
);
});
})
.add("Autofocus", () => (
<ConfirmAlert message={body} title={"Are you sure about that?"} buttons={buttonsWithAutofocus} />
));

16
scm-ui/ui-components/src/modals/ConfirmAlert.tsx
View File

@@ -22,7 +22,7 @@
* SOFTWARE.
*/
import * as React from "react";
import { FC, useState } from "react";
import { FC, useRef, useState } from "react";
import ReactDOM from "react-dom";
import Modal from "./Modal";
import classNames from "classnames";
@@ -32,6 +32,7 @@ type Button = {
label: string;
isLoading?: boolean;
onClick?: () => void | null;
autofocus?: boolean;
};
type Props = {
@@ -43,6 +44,7 @@ type Props = {
export const ConfirmAlert: FC<Props> = ({ title, message, buttons, close }) => {
const [showModal, setShowModal] = useState(true);
const initialFocusButton = useRef<HTMLButtonElement>(null);
const onClose = () => {
if (typeof close === "function") {
@@ -69,8 +71,9 @@ export const ConfirmAlert: FC<Props> = ({ title, message, buttons, close }) => {
className={classNames("button", "is-info", button.className, button.isLoading ? "is-loading" : "")}
key={index}
onClick={() => handleClickButton(button)}
onKeyDown={(e) => e.key === "Enter" && handleClickButton(button)}
onKeyDown={e => e.key === "Enter" && handleClickButton(button)}
tabIndex={0}
ref={button.autofocus ? initialFocusButton : undefined}
>
{button.label}
</button>
@@ -80,7 +83,14 @@ export const ConfirmAlert: FC<Props> = ({ title, message, buttons, close }) => {
);
return (
(showModal && <Modal title={title} closeFunction={onClose} body={body} active={true} footer={footer} />) || null
<Modal
title={title}
closeFunction={onClose}
body={body}
active={showModal}
footer={footer}
initialFocusRef={initialFocusButton}
/>
);
};

25
scm-ui/ui-components/src/modals/CreateTagModal.tsx
View File

@@ -22,13 +22,13 @@
* SOFTWARE.
*/
import React, { FC, useEffect, useState } from "react";
import { Modal, InputField, Button, apiClient } from "@scm-manager/ui-components";
import { WithTranslation, withTranslation } from "react-i18next";
import React, { FC, useEffect, useRef, useState } from "react";
import { apiClient, Button, InputField, Modal } from "@scm-manager/ui-components";
import { useTranslation } from "react-i18next";
import { Tag } from "@scm-manager/ui-types";
import { isBranchValid } from "../validation";
type Props = WithTranslation & {
type Props = {
existingTagsLink: string;
tagCreationLink: string;
onClose: () => void;
@@ -40,16 +40,18 @@ type Props = WithTranslation & {
/**
* @deprecated
*/
const CreateTagModal: FC<Props> = ({ t, onClose, tagCreationLink, existingTagsLink, onCreated, onError, revision }) => {
const CreateTagModal: FC<Props> = ({ onClose, tagCreationLink, existingTagsLink, onCreated, onError, revision }) => {
const [t] = useTranslation("repos");
const [newTagName, setNewTagName] = useState("");
const [loading, setLoading] = useState(false);
const [tagNames, setTagNames] = useState<string[]>([]);
const initialFocusRef = useRef<HTMLInputElement>(null);
useEffect(() => {
apiClient
.get(existingTagsLink)
.then((response) => response.json())
.then((json) => setTagNames(json._embedded.tags.map((tag: Tag) => tag.name)));
.then(response => response.json())
.then(json => setTagNames(json._embedded.tags.map((tag: Tag) => tag.name)));
}, [existingTagsLink]);
const createTag = () => {
@@ -57,7 +59,7 @@ const CreateTagModal: FC<Props> = ({ t, onClose, tagCreationLink, existingTagsLi
apiClient
.post(tagCreationLink, {
revision,
name: newTagName,
name: newTagName
})
.then(onCreated)
.catch(onError)
@@ -83,10 +85,12 @@ const CreateTagModal: FC<Props> = ({ t, onClose, tagCreationLink, existingTagsLi
<InputField
name="name"
label={t("tags.create.form.field.name.label")}
onChange={(val) => setNewTagName(val)}
onChange={e => setNewTagName(e.target.value)}
value={newTagName}
validationError={!!validationError}
errorMessage={t(validationError)}
onReturnPressed={() => !validationError && newTagName.length > 0 && createTag()}
ref={initialFocusRef}
/>
<div className="mt-6">{t("tags.create.hint")}</div>
</>
@@ -105,8 +109,9 @@ const CreateTagModal: FC<Props> = ({ t, onClose, tagCreationLink, existingTagsLi
</>
}
closeFunction={onClose}
initialFocusRef={initialFocusRef}
/>
);
};
export default withTranslation("repos")(CreateTagModal);
export default CreateTagModal;

20
scm-ui/ui-components/src/modals/FullscreenModal.tsx
View File

@@ -22,7 +22,7 @@
* SOFTWARE.
*/
import * as React from "react";
import { FC, ReactNode } from "react";
import { FC, MutableRefObject, ReactNode } from "react";
import { useTranslation } from "react-i18next";
import { Modal } from "./Modal";
import Button from "../buttons/Button";
@@ -34,6 +34,7 @@ type Props = {
body: ReactNode;
active: boolean;
closeButtonLabel?: string;
initialFocusRef?: MutableRefObject<HTMLElement | null>;
};
const FullSizedModal = styled(Modal)`
@@ -43,11 +44,22 @@ const FullSizedModal = styled(Modal)`
}
`;
const FullscreenModal: FC<Props> = ({ title, closeFunction, body, active, closeButtonLabel }) => {
const FullscreenModal: FC<Props> = ({ title, closeFunction, body, active, initialFocusRef, closeButtonLabel }) => {
const [t] = useTranslation("repos");
const footer = <Button label={closeButtonLabel || t("diff.fullscreen.close")} action={closeFunction} color="secondary" />;
const footer = (
<Button label={closeButtonLabel || t("diff.fullscreen.close")} action={closeFunction} color="secondary" />
);
return <FullSizedModal title={title} closeFunction={closeFunction} body={body} footer={footer} active={active} />;
return (
<FullSizedModal
title={title}
closeFunction={closeFunction}
body={body}
footer={footer}
active={active}
initialFocusRef={initialFocusRef}
/>
);
};
export default FullscreenModal;

58
scm-ui/ui-components/src/modals/Modal.stories.tsx
View File

@@ -24,13 +24,13 @@
import { storiesOf } from "@storybook/react";
import { MemoryRouter } from "react-router-dom";
import React, { useState, FC } from "react";
import React, { FC, useRef, useState } from "react";
import Modal from "./Modal";
import Checkbox from "../forms/Checkbox";
import styled from "styled-components";
import ExternalLink from "../navigation/ExternalLink";
import { Radio, Textarea, InputField } from "../forms";
import { ButtonGroup, Button } from "../buttons";
import { InputField, Radio, Textarea } from "../forms";
import { Button, ButtonGroup } from "../buttons";
import Notification from "../Notification";
import { Autocomplete } from "../index";
import { SelectValue } from "@scm-manager/ui-types";
@@ -52,9 +52,8 @@ const text = `Mind-paralyzing change needed improbability vortex machine sorts s
Kakrafoon humanoid undergarment ship powered by GPP-guided bowl of petunias nothing was frequently away incredibly
ordinary mob.`;
// eslint-disable-next-line @typescript-eslint/no-empty-function
const doNothing = () => {
// nothing to do
// Do nothing
};
const withFormElementsBody = (
<>
@@ -114,6 +113,21 @@ storiesOf("Modal/Modal", module)
footer={withFormElementsFooter}
/>
))
.add("With initial input field focus", () => {
const ref = useRef<HTMLInputElement | null>(null);
return (
<Modal
closeFunction={doNothing}
active={true}
title={"Hitchhiker Modal"}
footer={withFormElementsFooter}
initialFocusRef={ref}
>
<InputField ref={ref} />
</Modal>
);
})
.add("With initial button focus", () => <RefModal />)
.add("With long tooltips", () => {
return (
<NonCloseableModal>
@@ -285,9 +299,20 @@ const NestedModal: FC = ({ children }) => {
const [showOuter, setShowOuter] = useState(true);
const [showInner, setShowInner] = useState(false);
const outerBody = (
<>
{showInner && (
<Modal
body={children}
closeFunction={() => setShowInner(!showInner)}
active={showInner}
title="Inner Hitchhiker Modal"
/>
)}
<Button title="Open inner modal" className="button" action={() => setShowInner(true)}>
Open inner modal
</Button>
</>
);
return (
@@ -301,14 +326,21 @@ const NestedModal: FC = ({ children }) => {
size="M"
/>
)}
{showInner && (
<Modal
body={children}
closeFunction={() => setShowInner(!showInner)}
active={showInner}
title="Inner Hitchhiker Modal"
/>
)}
</>
);
};
const RefModal = () => {
const ref = useRef<HTMLButtonElement>(null);
return (
<Modal
closeFunction={doNothing}
active={true}
title={"Hitchhiker Modal"}
footer={withFormElementsFooter}
initialFocusRef={ref}
>
<button ref={ref}>Hello</button>
</Modal>
);
};

94
scm-ui/ui-components/src/modals/Modal.tsx
View File

@@ -21,12 +21,10 @@
* OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
* SOFTWARE.
*/
import React, { FC, KeyboardEvent, useRef } from "react";
import React, { FC, MutableRefObject, useRef } from "react";
import classNames from "classnames";
import usePortalRootElement from "../usePortalRootElement";
import ReactDOM from "react-dom";
import styled from "styled-components";
import { useTrapFocus } from "../useTrapFocus";
import { Dialog } from "@headlessui/react";
type ModalSize = "S" | "M" | "L";
@@ -35,13 +33,14 @@ const modalSizes: { [key in ModalSize]: number } = { S: 33, M: 50, L: 66 };
type Props = {
title: string;
closeFunction: () => void;
body: any;
body?: any;
footer?: any;
active: boolean;
className?: string;
headColor?: string;
headTextColor?: string;
size?: ModalSize;
initialFocusRef?: MutableRefObject<HTMLElement | null>;
overflowVisible?: boolean;
};
@@ -50,82 +49,67 @@ const SizedModal = styled.div<{ size?: ModalSize; overflow: string }>`
overflow: ${props => props.overflow};
`;
const DivWithOptionalOverflow = styled.div<{ overflow: string; borderBottomRadius: string }>`
overflow: ${props => props.overflow};
border-bottom-left-radius: ${props => props.borderBottomRadius};
border-bottom-right-radius: ${props => props.borderBottomRadius};
`;
const SectionWithOptionalOverflow = styled.section<{ overflow: string; borderBottomRadius: string }>`
overflow: ${props => props.overflow};
border-bottom-left-radius: ${props => props.borderBottomRadius};
border-bottom-right-radius: ${props => props.borderBottomRadius};
`;
export const Modal: FC<Props> = ({
title,
closeFunction,
body,
children,
footer,
active,
className,
headColor = "secondary-less",
headTextColor = "secondary-most",
size,
initialFocusRef,
overflowVisible
}) => {
const portalRootElement = usePortalRootElement("modalsRoot");
const initialFocusRef = useRef(null);
const trapRef = useTrapFocus({
includeContainer: true,
initialFocus: initialFocusRef.current,
returnFocus: true,
updateNodes: false
});
if (!portalRootElement) {
return null;
}
const isActive = active ? "is-active" : null;
const closeButtonRef = useRef<HTMLButtonElement | null>(null);
let showFooter = null;
if (footer) {
showFooter = <footer className="modal-card-foot">{footer}</footer>;
}
const onKeyDown = (event: KeyboardEvent<HTMLDivElement>) => {
if (closeFunction && "Escape" === event.key) {
closeFunction();
}
};
const overflowAttribute = overflowVisible ? "visible" : "auto";
const borderBottomRadiusAttribute = overflowVisible && !footer ? "inherit" : "unset";
const modalElement = (
<DivWithOptionalOverflow
className={classNames("modal", className, isActive)}
ref={trapRef}
onKeyDown={onKeyDown}
overflow={overflowAttribute}
borderBottomRadius={borderBottomRadiusAttribute}
return (
<Dialog
open={active}
onClose={closeFunction}
className={classNames(
"modal",
{ "is-active": active },
`is-overflow-${overflowAttribute}`,
`is-border-bottom-radius-${borderBottomRadiusAttribute}`,
className
)}
initialFocus={initialFocusRef ?? closeButtonRef}
>
<div className="modal-background" onClick={closeFunction} />
<Dialog.Overlay className="modal-background" />
<SizedModal className="modal-card" size={size} overflow={overflowAttribute}>
<header className={classNames("modal-card-head", `has-background-${headColor}`)}>
<Dialog.Title as="header" className={classNames("modal-card-head", `has-background-${headColor}`)}>
<h2 className={`modal-card-title m-0 has-text-${headTextColor}`}>{title}</h2>
<button className="delete" aria-label="close" onClick={closeFunction} ref={initialFocusRef} autoFocus />
</header>
<SectionWithOptionalOverflow className="modal-card-body" overflow={overflowAttribute} borderBottomRadius={borderBottomRadiusAttribute}>
{body}
</SectionWithOptionalOverflow>
<button
className="delete"
aria-label="close"
onClick={closeFunction}
ref={!initialFocusRef ? closeButtonRef : undefined}
/>
</Dialog.Title>
<section
className={classNames(
"modal-card-body",
`is-overflow-${overflowAttribute}`,
`is-border-bottom-radius-${borderBottomRadiusAttribute}`
)}
>
{body || children}
</section>
{showFooter}
</SizedModal>
</DivWithOptionalOverflow>
</Dialog>
);
return ReactDOM.createPortal(modalElement, portalRootElement);
};
export default Modal;

163
scm-ui/ui-components/src/useTrapFocus.ts
View File

@@ -1,163 +0,0 @@
/*
* MIT License
*
* Copyright (c) 2020-present Cloudogu GmbH and Contributors
*
* Permission is hereby granted, free of charge, to any person obtaining a copy
* of this software and associated documentation files (the "Software"), to deal
* in the Software without restriction, including without limitation the rights
* to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
* copies of the Software, and to permit persons to whom the Software is
* furnished to do so, subject to the following conditions:
*
* The above copyright notice and this permission notice shall be included in all
* copies or substantial portions of the Software.
*
* THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
* IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
* FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
* AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
* LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
* OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
* SOFTWARE.
*/
import { MutableRefObject, RefObject, useCallback, useEffect, useMemo, useRef, useState } from "react";
import { FocusableElement, tabbable } from "tabbable";
type Node = HTMLDivElement | null;
interface UseTrapFocus {
includeContainer?: boolean;
initialFocus?: "container" | Node;
returnFocus?: boolean;
updateNodes?: boolean;
}
// Based on https://tobbelindstrom.com/blog/useTrapFocus/
export const useTrapFocus = (options?: UseTrapFocus): MutableRefObject<Node> => {
const node = useRef<Node>(null);
const { includeContainer, initialFocus, returnFocus, updateNodes } = useMemo<UseTrapFocus>(
() => ({
includeContainer: false,
initialFocus: null,
returnFocus: true,
updateNodes: false,
...options,
}),
[options]
);
const [tabbableNodes, setTabbableNodes] = useState<FocusableElement[]>([]);
const previousFocusedNode = useRef<Node>(document.activeElement as Node);
const setInitialFocus = useCallback(() => {
if (initialFocus === "container") {
node.current?.focus();
} else {
initialFocus?.focus();
}
}, [initialFocus]);
const updateTabbableNodes = useCallback(() => {
const { current } = node;
if (current) {
const getTabbableNodes = tabbable(current, { includeContainer });
setTabbableNodes(getTabbableNodes);
return getTabbableNodes;
}
return [];
}, [includeContainer]);
useEffect(() => {
updateTabbableNodes();
if (node.current) setInitialFocus();
}, [setInitialFocus, updateTabbableNodes]);
useEffect(() => {
return () => {
const { current } = previousFocusedNode;
if (current && returnFocus) current.focus();
};
}, [returnFocus]);
const handleKeydown = useCallback(
(event) => {
const { key, keyCode, shiftKey } = event;
let getTabbableNodes = tabbableNodes;
if (updateNodes) getTabbableNodes = updateTabbableNodes();
if ((key === "Tab" || keyCode === 9) && getTabbableNodes.length) {
const firstNode = getTabbableNodes[0];
const lastNode = getTabbableNodes[getTabbableNodes.length - 1];
const { activeElement } = document;
if (!getTabbableNodes.includes(activeElement as FocusableElement)) {
event.preventDefault();
shiftKey ? lastNode.focus() : firstNode.focus();
}
if (shiftKey && activeElement === firstNode) {
event.preventDefault();
lastNode.focus();
}
if (!shiftKey && activeElement === lastNode) {
event.preventDefault();
firstNode.focus();
}
}
},
[tabbableNodes, updateNodes, updateTabbableNodes]
);
useEventListener({
type: "keydown",
listener: handleKeydown,
});
return node;
};
interface UseEventListener {
type: keyof WindowEventMap;
listener: EventListener;
element?: RefObject<Element> | Document | Window | null;
options?: AddEventListenerOptions;
}
export const useEventListener = ({
type,
listener,
element = isSSR ? undefined : window,
options,
}: UseEventListener): void => {
const savedListener = useRef<EventListener>();
useEffect(() => {
savedListener.current = listener;
}, [listener]);
const handleEventListener = useCallback((event: Event) => {
savedListener.current?.(event);
}, []);
useEffect(() => {
const target = getRefElement(element);
target?.addEventListener(type, handleEventListener, options);
return () => target?.removeEventListener(type, handleEventListener);
}, [type, element, options, handleEventListener]);
};
const isSSR = !(typeof window !== "undefined" && window.document?.createElement);
const getRefElement = <T>(element?: RefObject<Element> | T): Element | T | undefined | null => {
if (element && "current" in element) {
return element.current;
}
return element;
};

18
scm-ui/ui-styles/src/components/_main.scss
View File

@@ -759,6 +759,24 @@ form .field:not(.is-grouped) {
}
}
.is-overflow-visible {
overflow: visible;
}
.is-overflow-auto {
overflow: auto;
}
.is-border-bottom-radius-inherit {
border-bottom-left-radius: inherit;
border-bottom-right-radius: inherit;
}
.is-border-bottom-radius-unset {
border-bottom-left-radius: unset;
border-bottom-right-radius: unset;
}
// radio
//overwrite bulma's default margin
.radio + .radio {

112
scm-ui/ui-webapp/src/admin/plugins/components/PluginActionModal.tsx
View File

@@ -22,12 +22,13 @@
* SOFTWARE.
*/
import * as React from "react";
import { WithTranslation, withTranslation } from "react-i18next";
import { FC, useRef } from "react";
import { useTranslation } from "react-i18next";
import { PendingPlugins, PluginCollection } from "@scm-manager/ui-types";
import { Button, ButtonGroup, ErrorNotification, Modal } from "@scm-manager/ui-components";
import SuccessNotification from "./SuccessNotification";
type Props = WithTranslation & {
type Props = {
onClose: () => void;
pendingPlugins?: PendingPlugins;
installedPlugins?: PluginCollection;
@@ -37,35 +38,33 @@ type Props = WithTranslation & {
loading: boolean;
error?: Error | null;
success: boolean;
children?: React.Node;
};
class PluginActionModal extends React.Component<Props> {
renderNotifications = () => {
const { children, error, success } = this.props;
const PluginActionModal: FC<Props> = ({
error,
success,
children,
installedPlugins,
pendingPlugins,
description,
label,
loading,
onClose,
execute
}) => {
const [t] = useTranslation("admin");
const initialFocusRef = useRef<HTMLButtonElement>(null);
let notifications;
if (error) {
return <ErrorNotification error={error} />;
notifications = <ErrorNotification error={error} />;
} else if (success) {
return <SuccessNotification />;
notifications = <SuccessNotification />;
} else {
return children;
notifications = children;
}
};
renderModalContent = () => {
return (
<>
{this.renderUpdatable()}
{this.renderInstallQueue()}
{this.renderUpdateQueue()}
{this.renderUninstallQueue()}
</>
);
};
renderUpdatable = () => {
const { installedPlugins, t } = this.props;
return (
const updatable = (
<>
{installedPlugins && installedPlugins._embedded && installedPlugins._embedded.plugins && (
<>
@@ -81,11 +80,8 @@ class PluginActionModal extends React.Component<Props> {
)}
</>
);
};
renderInstallQueue = () => {
const { pendingPlugins, t } = this.props;
return (
const installQueue = (
<>
{pendingPlugins && pendingPlugins._embedded && pendingPlugins._embedded.new.length > 0 && (
<>
@@ -99,13 +95,8 @@ class PluginActionModal extends React.Component<Props> {
)}
</>
);
};
renderUpdateQueue = () => {
const { pendingPlugins, t } = this.props;
return (
<>
{pendingPlugins && pendingPlugins._embedded && pendingPlugins._embedded.update.length > 0 && (
const updateQueue = pendingPlugins && pendingPlugins._embedded && pendingPlugins._embedded.update.length > 0 && (
<>
<strong>{t("plugins.modal.updateQueue")}</strong>
<ul>
@@ -114,16 +105,9 @@ class PluginActionModal extends React.Component<Props> {
))}
</ul>
</>
)}
</>
);
};
renderUninstallQueue = () => {
const { pendingPlugins, t } = this.props;
return (
<>
{pendingPlugins && pendingPlugins._embedded && pendingPlugins._embedded.uninstall.length > 0 && (
const uninstallQueue = pendingPlugins && pendingPlugins._embedded && pendingPlugins._embedded.uninstall.length > 0 && (
<>
<strong>{t("plugins.modal.uninstallQueue")}</strong>
<ul>
@@ -132,53 +116,53 @@ class PluginActionModal extends React.Component<Props> {
))}
</ul>
</>
)}
);
const content = (
<>
{updatable}
{installQueue}
{updateQueue}
{uninstallQueue}
</>
);
};
renderBody = () => {
return (
const body = (
<>
<div className="media">
<div className="content">
<p>{this.props.description}</p>
{this.renderModalContent()}
<p>{description}</p>
{content}
</div>
</div>
<div className="media">{this.renderNotifications()}</div>
<div className="media">{notifications}</div>
</>
);
};
renderFooter = () => {
const { onClose, t, loading, error, success } = this.props;
return (
const footer = (
<ButtonGroup>
<Button
color="warning"
label={this.props.label}
label={label}
loading={loading}
action={this.props.execute}
action={execute}
disabled={!!error || success}
ref={initialFocusRef}
/>
<Button label={t("plugins.modal.abort")} action={onClose} />
</ButtonGroup>
);
};
render() {
const { onClose } = this.props;
return (
<Modal
title={this.props.label}
title={label}
closeFunction={onClose}
body={this.renderBody()}
footer={this.renderFooter()}
body={body}
footer={footer}
active={true}
initialFocusRef={initialFocusRef}
/>
);
}
}
};
export default withTranslation("admin")(PluginActionModal);
export default PluginActionModal;

5
scm-ui/ui-webapp/src/admin/plugins/components/PluginModal.tsx
View File

@@ -21,7 +21,7 @@
* OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
* SOFTWARE.
*/
import React, { FC, useEffect, useState } from "react";
import React, { FC, useEffect, useRef, useState } from "react";
import { useTranslation } from "react-i18next";
import classNames from "classnames";
import styled from "styled-components";
@@ -66,6 +66,7 @@ const PluginModal: FC<Props> = ({ onClose, pluginAction, plugin }) => {
const error = installError || uninstallError || updateError || pluginCenterAuthInfoError;
const loading = isInstalling || isUninstalling || isUpdating || isLoadingPluginCenterAuthInfo;
const isDone = isInstalled || isUninstalled || isUpdated;
const initialFocusRef = useRef<HTMLButtonElement>(null);
useEffect(() => {
if (isDone && !shouldRestart) {
@@ -108,6 +109,7 @@ const PluginModal: FC<Props> = ({ onClose, pluginAction, plugin }) => {
action={handlePluginAction}
loading={loading}
disabled={!!error || isDone}
ref={initialFocusRef}
/>
<Button label={t("plugins.modal.abort")} action={onClose} />
</ButtonGroup>
@@ -253,6 +255,7 @@ const PluginModal: FC<Props> = ({ onClose, pluginAction, plugin }) => {
body={body}
footer={footer()}
active={true}
initialFocusRef={initialFocusRef}
/>
);
};

3
scm-ui/ui-webapp/src/admin/roles/containers/DeleteRepositoryRole.tsx
View File

@@ -71,7 +71,8 @@ const DeleteRepositoryRole: FC<Props> = ({ confirmDialog = true, role }: Props)
},
{
label: t("repositoryRole.delete.confirmAlert.cancel"),
onClick: () => null
onClick: () => null,
autofocus: true
}
]}
close={() => setShowConfirmAlert(false)}

1
scm-ui/ui-webapp/src/components/HeaderDropDown.tsx
View File

@@ -50,7 +50,6 @@ const DropDownMenu = styled.div<DropDownMenuProps>`
right: -1.5rem;
left: auto;
`};
}
@media screen and (max-width: ${devices.desktop.width - 1}px) {

3
scm-ui/ui-webapp/src/groups/containers/DeleteGroup.tsx
View File

@@ -66,7 +66,8 @@ export const DeleteGroup: FC<Props> = ({ confirmDialog = true, group }) => {
},
{
label: t("deleteGroup.confirmAlert.cancel"),
onClick: () => null
onClick: () => null,
autofocus: true
}
]}
close={() => setShowConfirmAlert(false)}

73
scm-ui/ui-webapp/src/permissions/components/PermissionCheckbox.tsx
View File

@@ -21,11 +21,11 @@
* OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
* SOFTWARE.
*/
import React from "react";
import { WithTranslation, withTranslation } from "react-i18next";
import React, { FC } from "react";
import { useTranslation } from "react-i18next";
import { Checkbox } from "@scm-manager/ui-components";
type Props = WithTranslation & {
type Props = {
name: string;
checked: boolean;
onChange?: (value: boolean, name?: string) => void;
@@ -33,40 +33,53 @@ type Props = WithTranslation & {
role?: boolean;
};
class PermissionCheckbox extends React.Component<Props> {
render() {
const { name, checked, onChange, disabled, role, t } = this.props;
type InnerProps = Props & {
innerRef: React.Ref<HTMLInputElement>;
};
const PermissionCheckbox: FC<InnerProps> = ({ name, checked, onChange, disabled, role, innerRef }) => {
const [t] = useTranslation("plugins");
const key = name.split(":").join(".");
const label = role
? t("verbs.repository." + name + ".displayName")
: this.translateOrDefault("permissions." + key + ".displayName", key);
const helpText = role
? t("verbs.repository." + name + ".description")
: this.translateOrDefault("permissions." + key + ".description", t("permissions.unknown"));
return (
<Checkbox
key={name}
name={name}
label={label}
helpText={helpText}
checked={checked}
onChange={onChange}
disabled={disabled}
testId={label}
/>
);
}
translateOrDefault = (key: string, defaultText: string) => {
const translation = this.props.t(key);
const translateOrDefault = (key: string, defaultText: string) => {
const translation = t(key);
if (translation === key) {
return defaultText;
} else {
return translation;
}
};
}
export default withTranslation("plugins")(PermissionCheckbox);
const label = role
? t("verbs.repository." + name + ".displayName")
: translateOrDefault("permissions." + key + ".displayName", key);
const helpText = role
? t("verbs.repository." + name + ".description")
: translateOrDefault("permissions." + key + ".description", t("permissions.unknown"));
const commonCheckboxProps = {
key: name,
name,
label,
helpText,
checked,
disabled,
testId: label
};
if (innerRef) {
return (
<Checkbox
{...commonCheckboxProps}
onChange={onChange ? event => onChange(event.target.checked, name) : undefined}
ref={innerRef}
/>
);
}
return <Checkbox {...commonCheckboxProps} onChange={onChange ? newValue => onChange(newValue, name) : undefined} />;
};
export default React.forwardRef<HTMLInputElement, Props>((props, ref) => (
<PermissionCheckbox {...props} innerRef={ref} />
));

4
scm-ui/ui-webapp/src/repos/branches/components/BranchCommitDateCommitter.tsx
View File

@@ -31,7 +31,9 @@ import { useTranslation } from "react-i18next";
const BranchCommitDateCommitter: FC<{ branch: Branch }> = ({ branch }) => {
const [t] = useTranslation("repos");
const committedAt = <DateFromNow className={classNames("is-size-7", "has-text-secondary")} date={branch.lastCommitDate} />;
const committedAt = (
<DateFromNow className={classNames("is-size-7", "has-text-secondary")} date={branch.lastCommitDate} />
);
if (branch.lastCommitter?.name) {
return (
<>

3
scm-ui/ui-webapp/src/repos/branches/components/BranchTable.tsx
View File

@@ -82,7 +82,8 @@ const BranchTable: FC<Props> = ({ repository, baseUrl, branches, type, branchesD
},
{
label: t("branch.delete.confirmAlert.cancel"),
onClick: () => abortDelete()
onClick: () => abortDelete(),
autofocus: true
}
]}
close={() => abortDelete()}

3
scm-ui/ui-webapp/src/repos/branches/containers/DeleteBranch.tsx
View File

@@ -61,7 +61,8 @@ const DeleteBranch: FC<Props> = ({ repository, branch }: Props) => {
},
{
label: t("branch.delete.confirmAlert.cancel"),
onClick: () => null
onClick: () => null,
autofocus: true
}
]}
close={() => setShowConfirmAlert(false)}

4
scm-ui/ui-webapp/src/repos/components/NamespaceAndNameFields.tsx
View File

@@ -23,11 +23,11 @@
*/
import React, { FC, useEffect, useState } from "react";
import { CUSTOM_NAMESPACE_STRATEGY, RepositoryCreation} from "@scm-manager/ui-types";
import { CUSTOM_NAMESPACE_STRATEGY, RepositoryCreation } from "@scm-manager/ui-types";
import { useTranslation } from "react-i18next";
import { InputField } from "@scm-manager/ui-components";
import * as validator from "./form/repositoryValidation";
import { useNamespaceStrategies} from "@scm-manager/ui-api";
import { useNamespaceStrategies } from "@scm-manager/ui-api";
import NamespaceInput from "./NamespaceInput";
type Props = {

11
scm-ui/ui-webapp/src/repos/components/changesets/CreateTagModal.tsx
View File

@@ -22,7 +22,7 @@
* SOFTWARE.
*/
import React, { FC, useEffect, useState } from "react";
import React, { FC, useEffect, useRef, useState } from "react";
import { Modal, InputField, Button, Loading, ErrorNotification } from "@scm-manager/ui-components";
import { useTranslation } from "react-i18next";
import { Changeset, Repository } from "@scm-manager/ui-types";
@@ -43,13 +43,15 @@ const CreateTagModal: FC<Props> = ({ repository, changeset, onClose }) => {
);
const [t] = useTranslation("repos");
const [newTagName, setNewTagName] = useState("");
const initialFocusRef = useRef<HTMLInputElement>(null);
useEffect(() => {
if (createdTag) {
onClose();
}
}, [createdTag, onClose]);
const tagNames = tags?._embedded.tags.map(tag => tag.name);
const tagNames = tags?._embedded?.tags.map(tag => tag.name);
let validationError = "";
@@ -74,10 +76,12 @@ const CreateTagModal: FC<Props> = ({ repository, changeset, onClose }) => {
<InputField
name="name"
label={t("tags.create.form.field.name.label")}
onChange={val => setNewTagName(val)}
onChange={event => setNewTagName(event.target.value)}
value={newTagName}
validationError={!!validationError}
errorMessage={t(validationError)}
ref={initialFocusRef}
onReturnPressed={() => !validationError && newTagName.length > 0 && create(newTagName)}
/>
<div className="mt-5">{t("tags.create.hint")}</div>
</>
@@ -103,6 +107,7 @@ const CreateTagModal: FC<Props> = ({ repository, changeset, onClose }) => {
</>
}
closeFunction={onClose}
initialFocusRef={initialFocusRef}
/>
);
};

3
scm-ui/ui-webapp/src/repos/containers/ArchiveRepo.tsx
View File

@@ -59,7 +59,8 @@ const ArchiveRepo: FC<Props> = ({ repository, confirmDialog = true }) => {
},
{
label: t("archiveRepo.confirmAlert.cancel"),
onClick: () => null
onClick: () => null,
autofocus: true
}
]}
close={() => setShowConfirmAlert(false)}

3
scm-ui/ui-webapp/src/repos/containers/DeleteRepo.tsx
View File

@@ -71,7 +71,8 @@ const DeleteRepo: FC<Props> = ({ repository, confirmDialog = true }) => {
},
{
label: t("deleteRepo.confirmAlert.cancel"),
onClick: () => null
onClick: () => null,
autofocus: true
}
]}
close={() => setShowConfirmAlert(false)}

8
scm-ui/ui-webapp/src/repos/containers/RenameRepository.tsx
View File

@@ -22,7 +22,7 @@
* SOFTWARE.
*/
import React, { FC, useState } from "react";
import React, { FC, useRef, useState } from "react";
import { Repository } from "@scm-manager/ui-types";
import { Button, ButtonGroup, ErrorNotification, InputField, Level, Loading, Modal } from "@scm-manager/ui-components";
import { useTranslation } from "react-i18next";
@@ -53,6 +53,7 @@ const RenameRepository: FC<Props> = ({ repository }) => {
error: namespaceStrategyLoadError,
data: namespaceStrategies
} = useNamespaceStrategies();
const initialFocusRef = useRef<HTMLInputElement>(null);
if (isRenamed) {
return <Redirect to={`/repo/${namespace}/${name}`} />;
@@ -91,7 +92,9 @@ const RenameRepository: FC<Props> = ({ repository }) => {
helpText={t("help.nameHelpText")}
validationError={nameValidationError}
value={name}
onChange={handleNameChange}
onChange={event => handleNameChange(event.target.value)}
onReturnPressed={() => isValid && renameRepository(namespace, name)}
ref={initialFocusRef}
/>
<NamespaceInput
namespace={namespace}
@@ -130,6 +133,7 @@ const RenameRepository: FC<Props> = ({ repository }) => {
footer={footer}
body={modalBody}
closeFunction={() => setShowModal(false)}
initialFocusRef={initialFocusRef}
overflowVisible={true}
/>
);

3
scm-ui/ui-webapp/src/repos/containers/UnarchiveRepo.tsx
View File

@@ -56,7 +56,8 @@ const UnarchiveRepo: FC<Props> = ({ repository, confirmDialog = true }) => {
className: "is-outlined",
label: t("unarchiveRepo.confirmAlert.submit"),
isLoading,
onClick: () => unarchiveRepoCallback()
onClick: () => unarchiveRepoCallback(),
autofocus: true
},
{
label: t("unarchiveRepo.confirmAlert.cancel"),

3
scm-ui/ui-webapp/src/repos/permissions/components/DeletePermissionButton.tsx
View File

@@ -67,7 +67,8 @@ const DeletePermissionButton: FC<Props> = ({ namespaceOrRepository, permission,
},
{
label: t("permission.delete-permission-button.confirm-alert.cancel"),
onClick: () => null
onClick: () => null,
autofocus: true
}
]}
close={() => setShowConfirmAlert(false)}

8
scm-ui/ui-webapp/src/repos/permissions/containers/AdvancedPermissionsDialog.tsx
View File

@@ -21,7 +21,7 @@
* OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
* SOFTWARE.
*/
import React, { FC, useEffect, useState } from "react";
import React, { FC, useEffect, useRef, useState } from "react";
import { useTranslation } from "react-i18next";
import { Button, ButtonGroup, Modal, SubmitButton } from "@scm-manager/ui-components";
import PermissionCheckbox from "../../../permissions/components/PermissionCheckbox";
@@ -45,6 +45,8 @@ const createPreSelection = (availableVerbs: string[], selectedVerbs?: string[]):
const AdvancedPermissionsDialog: FC<Props> = ({ availableVerbs, selectedVerbs, readOnly, onSubmit, onClose }) => {
const [verbs, setVerbs] = useState<SelectedVerbs>({});
const [t] = useTranslation("repos");
const initialFocusRef = useRef<HTMLInputElement>(null);
useEffect(() => {
setVerbs(createPreSelection(availableVerbs, selectedVerbs));
}, [availableVerbs, selectedVerbs]);
@@ -58,7 +60,7 @@ const AdvancedPermissionsDialog: FC<Props> = ({ availableVerbs, selectedVerbs, r
}
};
const verbSelectBoxes = Object.entries(verbs).map(([name, checked]) => (
const verbSelectBoxes = Object.entries(verbs).map(([name, checked], index) => (
<PermissionCheckbox
key={name}
name={name}
@@ -66,6 +68,7 @@ const AdvancedPermissionsDialog: FC<Props> = ({ availableVerbs, selectedVerbs, r
onChange={handleChange}
disabled={readOnly}
role={true}
ref={index === 0 ? initialFocusRef : undefined}
/>
));
@@ -93,6 +96,7 @@ const AdvancedPermissionsDialog: FC<Props> = ({ availableVerbs, selectedVerbs, r
body={<>{verbSelectBoxes}</>}
footer={footer}
active={true}
initialFocusRef={initialFocusRef}
/>
);
};

6
scm-ui/ui-webapp/src/repos/sources/containers/SourcesView.tsx
View File

@@ -31,8 +31,8 @@ import { File, Link, Repository } from "@scm-manager/ui-types";
import { ErrorNotification, Loading, PdfViewer } from "@scm-manager/ui-components";
import SwitchableMarkdownViewer from "../components/content/SwitchableMarkdownViewer";
import styled from "styled-components";
import { ContentType, useContentType } from "@scm-manager/ui-api";
import {determineSyntaxHighlightingLanguage} from "../utils/files";
import { useContentType } from "@scm-manager/ui-api";
import { determineSyntaxHighlightingLanguage } from "../utils/files";
const NoSpacingSyntaxHighlighterContainer = styled.div`
& pre {
@@ -47,8 +47,6 @@ type Props = {
revision: string;
};
const SourcesView: FC<Props> = ({ file, repository, revision }) => {
const { data: contentTypeData, error, isLoading } = useContentType((file._links.self as Link).href);

3
scm-ui/ui-webapp/src/repos/tags/components/TagTable.tsx
View File

@@ -81,7 +81,8 @@ const TagTable: FC<Props> = ({ repository, baseUrl, tags }) => {
},
{
label: t("tag.delete.confirmAlert.cancel"),
onClick: () => abortDelete()
onClick: () => abortDelete(),
autofocus: true
}
]}
close={() => abortDelete()}

3
scm-ui/ui-webapp/src/repos/tags/container/DeleteTag.tsx
View File

@@ -59,7 +59,8 @@ const DeleteTag: FC<Props> = ({ tag, repository }) => {
},
{
label: t("tag.delete.confirmAlert.cancel"),
onClick: () => null
onClick: () => null,
autofocus: true
}
]}
close={() => setShowConfirmAlert(false)}

12
scm-ui/ui-webapp/src/users/components/UserConverter.tsx
View File

@@ -21,7 +21,7 @@
* OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
* SOFTWARE.
*/
import React, { FC, useEffect, useState } from "react";
import React, { FC, useEffect, useRef, useState } from "react";
import { useTranslation } from "react-i18next";
import classNames from "classnames";
import { User } from "@scm-manager/ui-types";
@@ -56,6 +56,7 @@ const UserConverter: FC<Props> = ({ user }) => {
} = useConvertToExternal();
const error = convertingToExternalError || convertingToInternalError || undefined;
const isLoading = isConvertingToExternal || isConvertingToInternal;
const initialFocusRef = useRef<HTMLInputElement>(null);
useEffect(() => setShowPasswordModal(false), [user]);
@@ -103,15 +104,12 @@ const UserConverter: FC<Props> = ({ user }) => {
}
};
const passwordChangeField = (
<PasswordConfirmation passwordChanged={changePassword} onReturnPressed={onReturnPressed} />
);
const passwordModal = (
<Modal
body={passwordChangeField}
closeFunction={() => setShowPasswordModal(false)}
active={showPasswordModal}
title={t("userForm.modal.passwordRequired")}
initialFocusRef={initialFocusRef}
footer={
<SubmitButton
action={() => password && passwordValid && convertToInternal(user, password)}
@@ -121,7 +119,9 @@ const UserConverter: FC<Props> = ({ user }) => {
label={t("userForm.modal.convertToInternal")}
/>
}
/>
>
<PasswordConfirmation passwordChanged={changePassword} onReturnPressed={onReturnPressed} ref={initialFocusRef} />
</Modal>
);
return (

3
scm-ui/ui-webapp/src/users/containers/DeleteUser.tsx
View File

@@ -66,7 +66,8 @@ const DeleteUser: FC<Props> = ({ confirmDialog = true, user }) => {
},
{
label: t("deleteUser.confirmAlert.cancel"),
onClick: () => null
onClick: () => null,
autofocus: true
}
]}
close={() => setShowConfirmAlert(false)}

5
yarn.lock
View File

@@ -1845,6 +1845,11 @@
resolved "https://registry.yarnpkg.com/@hapi/bourne/-/bourne-2.0.0.tgz#5bb2193eb685c0007540ca61d166d4e1edaf918d"
integrity sha512-WEezM1FWztfbzqIUbsDzFRVMxSoLy3HugVcux6KDDtTqzPsLE8NDRHfXvev66aH1i2oOKKar3/XDjbvh/OUBdg==
"@headlessui/react@^1.4.3":
version "1.4.3"
resolved "https://registry.yarnpkg.com/@headlessui/react/-/react-1.4.3.tgz#f77c6bb5cb4a614a5d730fb880cab502d48abf37"
integrity sha512-n2IQkaaw0aAAlQS5MEXsM4uRK+w18CrM72EqnGRl/UBOQeQajad8oiKXR9Nk15jOzTFQjpxzrZMf1NxHidFBiw==
"@hypnosphi/create-react-context@^0.3.1":
version "0.3.1"
resolved "https://registry.yarnpkg.com/@hypnosphi/create-react-context/-/create-react-context-0.3.1.tgz#f8bfebdc7665f5d426cba3753e0e9c7d3154d7c6"