108 lines
2.6 KiB
TypeScript
108 lines
2.6 KiB
TypeScript
import { css, cx } from '@emotion/css';
|
|
import { useEffect, useRef, useState } from 'react';
|
|
import * as React from 'react';
|
|
|
|
import { GrafanaTheme2 } from '@grafana/data';
|
|
import { ConfirmButton, Input, Label, LegacyInputStatus, useStyles2 } from '@grafana/ui';
|
|
|
|
interface Props {
|
|
label: string;
|
|
value?: string;
|
|
inputType?: string;
|
|
disabled?: boolean;
|
|
onChange?: (value: string) => void;
|
|
}
|
|
|
|
export const ServiceAccountProfileRow = ({ label, value, inputType, disabled, onChange }: Props): JSX.Element => {
|
|
const inputElem = useRef<HTMLInputElement>(null);
|
|
const [inputValue, setInputValue] = useState(value);
|
|
const [isEditing, setIsEditing] = useState(false);
|
|
const styles = useStyles2(getStyles);
|
|
const inputId = `${label}-input`;
|
|
|
|
useEffect(() => {
|
|
if (isEditing) {
|
|
focusInput();
|
|
}
|
|
}, [isEditing]);
|
|
|
|
const onEditClick = () => {
|
|
setIsEditing(true);
|
|
};
|
|
|
|
const onCancelClick = () => {
|
|
setIsEditing(false);
|
|
setInputValue(value || '');
|
|
};
|
|
|
|
const onInputChange = (event: React.ChangeEvent<HTMLInputElement>, status?: LegacyInputStatus) => {
|
|
if (status === LegacyInputStatus.Invalid) {
|
|
return;
|
|
}
|
|
setInputValue(event.target.value);
|
|
};
|
|
|
|
const onInputBlur = (event: React.FocusEvent<HTMLInputElement>, status?: LegacyInputStatus) => {
|
|
if (status === LegacyInputStatus.Invalid) {
|
|
return;
|
|
}
|
|
setInputValue(event.target.value);
|
|
};
|
|
|
|
const focusInput = () => {
|
|
inputElem?.current?.focus();
|
|
};
|
|
|
|
const onSave = () => {
|
|
setIsEditing(false);
|
|
if (onChange) {
|
|
onChange(inputValue!);
|
|
}
|
|
};
|
|
|
|
return (
|
|
<tr>
|
|
<td>
|
|
<Label htmlFor={inputId}>{label}</Label>
|
|
</td>
|
|
<td className="width-25" colSpan={2}>
|
|
{!disabled && isEditing ? (
|
|
<Input
|
|
id={inputId}
|
|
type={inputType}
|
|
defaultValue={value}
|
|
onBlur={onInputBlur}
|
|
onChange={onInputChange}
|
|
ref={inputElem}
|
|
width={30}
|
|
/>
|
|
) : (
|
|
<span className={cx({ [styles.disabled]: disabled })}>{value}</span>
|
|
)}
|
|
</td>
|
|
<td>
|
|
{onChange && (
|
|
<ConfirmButton
|
|
closeOnConfirm
|
|
confirmText="Save"
|
|
onConfirm={onSave}
|
|
onClick={onEditClick}
|
|
onCancel={onCancelClick}
|
|
disabled={disabled}
|
|
>
|
|
Edit
|
|
</ConfirmButton>
|
|
)}
|
|
</td>
|
|
</tr>
|
|
);
|
|
};
|
|
|
|
const getStyles = (theme: GrafanaTheme2) => {
|
|
return {
|
|
disabled: css({
|
|
color: theme.colors.text.secondary,
|
|
}),
|
|
};
|
|
};
|