From 83b2b60f4bbf023d2c702e896da99c50d1e20c16 Mon Sep 17 00:00:00 2001 From: blam Date: Mon, 20 May 2024 14:09:36 +0200 Subject: [PATCH] feat: move around the secret widget and override the default password one Signed-off-by: blam --- .../components/SecretWidget/SecretWidget.tsx | 53 +++++++++++++++++++ .../src/next/components/SecretWidget/index.ts | 16 ++++++ .../src/next/components/Stepper/Stepper.tsx | 4 +- .../src/next/components/index.ts | 1 + .../fields/SecretInput/SecretInput.tsx | 26 +++------ 5 files changed, 79 insertions(+), 21 deletions(-) create mode 100644 plugins/scaffolder-react/src/next/components/SecretWidget/SecretWidget.tsx create mode 100644 plugins/scaffolder-react/src/next/components/SecretWidget/index.ts diff --git a/plugins/scaffolder-react/src/next/components/SecretWidget/SecretWidget.tsx b/plugins/scaffolder-react/src/next/components/SecretWidget/SecretWidget.tsx new file mode 100644 index 0000000000..e2d139f98b --- /dev/null +++ b/plugins/scaffolder-react/src/next/components/SecretWidget/SecretWidget.tsx @@ -0,0 +1,53 @@ +/* + * Copyright 2024 The Backstage Authors + * + * Licensed under the Apache License, Version 2.0 (the "License"); + * you may not use this file except in compliance with the License. + * You may obtain a copy of the License at + * + * http://www.apache.org/licenses/LICENSE-2.0 + * + * Unless required by applicable law or agreed to in writing, software + * distributed under the License is distributed on an "AS IS" BASIS, + * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. + * See the License for the specific language governing permissions and + * limitations under the License. + */ + +import { WidgetProps } from '@rjsf/utils'; +import { useTemplateSecrets } from '@backstage/plugin-scaffolder-react'; +import InputLabel from '@material-ui/core/InputLabel'; +import Input from '@material-ui/core/Input'; +import React from 'react'; + +/** + * Secret Widget for overriding the default password input widget + * @alpha + */ +export const SecretWidget = ( + props: Pick, +) => { + const { setSecrets, secrets } = useTemplateSecrets(); + const { + name, + onChange, + schema: { title }, + } = props; + + return ( + <> + {title} + { + onChange(Array(e.target?.value.length).fill('*').join('')); + setSecrets({ [name]: e.target?.value }); + }} + value={secrets[name] ?? ''} + type="password" + autoComplete="off" + /> + + ); +}; diff --git a/plugins/scaffolder-react/src/next/components/SecretWidget/index.ts b/plugins/scaffolder-react/src/next/components/SecretWidget/index.ts new file mode 100644 index 0000000000..9f0964516c --- /dev/null +++ b/plugins/scaffolder-react/src/next/components/SecretWidget/index.ts @@ -0,0 +1,16 @@ +/* + * Copyright 2024 The Backstage Authors + * + * Licensed under the Apache License, Version 2.0 (the "License"); + * you may not use this file except in compliance with the License. + * You may obtain a copy of the License at + * + * http://www.apache.org/licenses/LICENSE-2.0 + * + * Unless required by applicable law or agreed to in writing, software + * distributed under the License is distributed on an "AS IS" BASIS, + * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. + * See the License for the specific language governing permissions and + * limitations under the License. + */ +export * from './SecretWidget'; diff --git a/plugins/scaffolder-react/src/next/components/Stepper/Stepper.tsx b/plugins/scaffolder-react/src/next/components/Stepper/Stepper.tsx index 5bfdf1a44a..00232e2cd7 100644 --- a/plugins/scaffolder-react/src/next/components/Stepper/Stepper.tsx +++ b/plugins/scaffolder-react/src/next/components/Stepper/Stepper.tsx @@ -20,7 +20,6 @@ import MuiStep from '@material-ui/core/Step'; import MuiStepLabel from '@material-ui/core/StepLabel'; import Button from '@material-ui/core/Button'; import LinearProgress from '@material-ui/core/LinearProgress'; -import { makeStyles } from '@material-ui/core/styles'; import { type IChangeEvent } from '@rjsf/core'; import { ErrorSchema } from '@rjsf/utils'; import React, { @@ -49,6 +48,8 @@ import { } from '@backstage/plugin-scaffolder-react'; import { ReviewStepProps } from '@backstage/plugin-scaffolder-react'; import { ErrorListTemplate } from './ErrorListTemplate'; +import { makeStyles } from '@material-ui/core/styles'; +import { SecretWidget } from '../SecretWidget'; const useStyles = makeStyles(theme => ({ backButton: { @@ -232,6 +233,7 @@ export const Stepper = (stepperProps: StepperProps) => { showErrorList="top" templates={{ ErrorListTemplate }} onChange={handleChange} + widgets={{ password: SecretWidget }} experimental_defaultFormStateBehavior={{ allOf: 'populateDefaults', }} diff --git a/plugins/scaffolder-react/src/next/components/index.ts b/plugins/scaffolder-react/src/next/components/index.ts index 119f983a9f..02f00bb1a8 100644 --- a/plugins/scaffolder-react/src/next/components/index.ts +++ b/plugins/scaffolder-react/src/next/components/index.ts @@ -26,3 +26,4 @@ export * from './TaskLogStream'; export * from './TemplateCategoryPicker'; export * from './ScaffolderPageContextMenu'; export * from './ScaffolderField'; +export * from './SecretWidget'; diff --git a/plugins/scaffolder/src/components/fields/SecretInput/SecretInput.tsx b/plugins/scaffolder/src/components/fields/SecretInput/SecretInput.tsx index aac0cf809a..a588286d97 100644 --- a/plugins/scaffolder/src/components/fields/SecretInput/SecretInput.tsx +++ b/plugins/scaffolder/src/components/fields/SecretInput/SecretInput.tsx @@ -14,18 +14,15 @@ * limitations under the License. */ import React from 'react'; -import { useTemplateSecrets } from '@backstage/plugin-scaffolder-react'; import { ScaffolderRJSFFieldProps } from '@backstage/plugin-scaffolder-react'; -import { ScaffolderField } from '@backstage/plugin-scaffolder-react/alpha'; -import Input from '@material-ui/core/Input'; -import InputLabel from '@material-ui/core/InputLabel'; +import { + ScaffolderField, + SecretWidget, +} from '@backstage/plugin-scaffolder-react/alpha'; export const SecretInput = (props: ScaffolderRJSFFieldProps) => { - const { setSecrets, secrets } = useTemplateSecrets(); const { - name, - onChange, - schema: { title, description }, + schema: { description }, rawErrors, disabled, errors, @@ -40,18 +37,7 @@ export const SecretInput = (props: ScaffolderRJSFFieldProps) => { errors={errors} required={required} > - {title} - { - onChange(Array(e.target?.value.length).fill('*').join('')); - setSecrets({ [name]: e.target?.value }); - }} - value={secrets[name] ?? ''} - type="password" - autoComplete="off" - /> + ); };