From 930b5c197ad2dd3185045b06d2464732a97ffec3 Mon Sep 17 00:00:00 2001 From: Harrison Hogg Date: Mon, 26 Feb 2024 13:39:00 +0000 Subject: [PATCH] Added root and label class keys for autocomplete pickers Signed-off-by: Harrison Hogg --- .changeset/hungry-points-burn.md | 5 +++ .changeset/pretty-boats-promise.md | 5 +++ plugins/catalog-react/api-report.md | 11 ++++-- .../EntityAutocompletePicker.tsx | 19 ++++++++-- .../EntityAutocompletePicker/index.ts | 1 + .../EntityOwnerPicker/EntityOwnerPicker.tsx | 8 +++-- .../EntityProcessingStatusPicker.tsx | 11 ++++-- .../src/overridableComponents.ts | 2 ++ plugins/scaffolder-react/api-report-alpha.md | 17 +++++++++ .../TemplateCategoryPicker.tsx | 16 ++++++++- .../TemplateCategoryPicker/index.ts | 1 + plugins/scaffolder-react/src/next/index.ts | 1 + .../src/next/overridableComponents.ts | 36 +++++++++++++++++++ 13 files changed, 121 insertions(+), 12 deletions(-) create mode 100644 .changeset/hungry-points-burn.md create mode 100644 .changeset/pretty-boats-promise.md create mode 100644 plugins/scaffolder-react/src/next/overridableComponents.ts diff --git a/.changeset/hungry-points-burn.md b/.changeset/hungry-points-burn.md new file mode 100644 index 0000000000..c0dabf0446 --- /dev/null +++ b/.changeset/hungry-points-burn.md @@ -0,0 +1,5 @@ +--- +'@backstage/plugin-catalog-react': patch +--- + +Added 'root' and 'label' class keys for EntityAutocompletePicker, EntityOwnerPicker and EntityProcessingStatusPicker diff --git a/.changeset/pretty-boats-promise.md b/.changeset/pretty-boats-promise.md new file mode 100644 index 0000000000..751ccaf14c --- /dev/null +++ b/.changeset/pretty-boats-promise.md @@ -0,0 +1,5 @@ +--- +'@backstage/plugin-scaffolder-react': patch +--- + +Added 'root' and 'label' class key to TemplateCategoryPicker diff --git a/plugins/catalog-react/api-report.md b/plugins/catalog-react/api-report.md index 62bdf3f2c9..a492a72e9f 100644 --- a/plugins/catalog-react/api-report.md +++ b/plugins/catalog-react/api-report.md @@ -93,8 +93,12 @@ export type CatalogReactComponentsNameToClassKey = { CatalogReactEntityTagPicker: CatalogReactEntityTagPickerClassKey; CatalogReactEntityOwnerPicker: CatalogReactEntityOwnerPickerClassKey; CatalogReactEntityProcessingStatusPicker: CatalogReactEntityProcessingStatusPickerClassKey; + CatalogReactEntityAutocompletePickerClassKey: CatalogReactEntityAutocompletePickerClassKey; }; +// @public (undocumented) +export type CatalogReactEntityAutocompletePickerClassKey = 'root' | 'label'; + // @public export type CatalogReactEntityDisplayNameClassKey = 'root' | 'icon'; @@ -105,10 +109,13 @@ export type CatalogReactEntityLifecyclePickerClassKey = 'input'; export type CatalogReactEntityNamespacePickerClassKey = 'input'; // @public (undocumented) -export type CatalogReactEntityOwnerPickerClassKey = 'input'; +export type CatalogReactEntityOwnerPickerClassKey = 'input' | 'root' | 'label'; // @public (undocumented) -export type CatalogReactEntityProcessingStatusPickerClassKey = 'input'; +export type CatalogReactEntityProcessingStatusPickerClassKey = + | 'input' + | 'root' + | 'label'; // @public (undocumented) export type CatalogReactEntitySearchBarClassKey = 'searchToolbar' | 'input'; diff --git a/plugins/catalog-react/src/components/EntityAutocompletePicker/EntityAutocompletePicker.tsx b/plugins/catalog-react/src/components/EntityAutocompletePicker/EntityAutocompletePicker.tsx index 98e680aa12..1b7539b912 100644 --- a/plugins/catalog-react/src/components/EntityAutocompletePicker/EntityAutocompletePicker.tsx +++ b/plugins/catalog-react/src/components/EntityAutocompletePicker/EntityAutocompletePicker.tsx @@ -14,7 +14,7 @@ * limitations under the License. */ -import { Box, TextFieldProps, Typography } from '@material-ui/core'; +import { Box, TextFieldProps, Typography, makeStyles } from '@material-ui/core'; import ExpandMoreIcon from '@material-ui/icons/ExpandMore'; import { Autocomplete } from '@material-ui/lab'; import React, { useEffect, useMemo, useState } from 'react'; @@ -52,6 +52,17 @@ export type EntityAutocompletePickerProps< initialSelectedOptions?: string[]; }; +/** @public */ +export type CatalogReactEntityAutocompletePickerClassKey = 'root' | 'label'; + +const useStyles = makeStyles( + { + root: {}, + label: {}, + }, + { name: 'CatalogReactEntityAutocompletePicker' }, +); + /** @public */ export function EntityAutocompletePicker< T extends DefaultEntityFilters = DefaultEntityFilters, @@ -67,6 +78,8 @@ export function EntityAutocompletePicker< initialSelectedOptions = [], } = props; + const classes = useStyles(); + const { updateFilters, filters, @@ -127,8 +140,8 @@ export function EntityAutocompletePicker< if (availableOptions.length <= 1) return null; return ( - - + + {label} multiple diff --git a/plugins/catalog-react/src/components/EntityAutocompletePicker/index.ts b/plugins/catalog-react/src/components/EntityAutocompletePicker/index.ts index 684e7cef55..87811be894 100644 --- a/plugins/catalog-react/src/components/EntityAutocompletePicker/index.ts +++ b/plugins/catalog-react/src/components/EntityAutocompletePicker/index.ts @@ -16,6 +16,7 @@ export { EntityAutocompletePicker } from './EntityAutocompletePicker'; export type { + CatalogReactEntityAutocompletePickerClassKey, EntityAutocompletePickerProps, AllowedEntityFilters, } from './EntityAutocompletePicker'; diff --git a/plugins/catalog-react/src/components/EntityOwnerPicker/EntityOwnerPicker.tsx b/plugins/catalog-react/src/components/EntityOwnerPicker/EntityOwnerPicker.tsx index 5b5bd39310..87de6411b2 100644 --- a/plugins/catalog-react/src/components/EntityOwnerPicker/EntityOwnerPicker.tsx +++ b/plugins/catalog-react/src/components/EntityOwnerPicker/EntityOwnerPicker.tsx @@ -44,10 +44,12 @@ import { withStyles } from '@material-ui/core/styles'; import { useEntityPresentation } from '../../apis'; /** @public */ -export type CatalogReactEntityOwnerPickerClassKey = 'input'; +export type CatalogReactEntityOwnerPickerClassKey = 'input' | 'root' | 'label'; const useStyles = makeStyles( { + root: {}, + label: {}, input: {}, fullWidth: { width: '100%' }, boxLabel: { @@ -174,8 +176,8 @@ export const EntityOwnerPicker = (props?: EntityOwnerPickerProps) => { } return ( - - + + Owner { const availableAdvancedItems = ['Is Orphan', 'Has Error']; return ( - - + + Processing Status multiple diff --git a/plugins/catalog-react/src/overridableComponents.ts b/plugins/catalog-react/src/overridableComponents.ts index 6424c95ab5..b45fd30103 100644 --- a/plugins/catalog-react/src/overridableComponents.ts +++ b/plugins/catalog-react/src/overridableComponents.ts @@ -26,6 +26,7 @@ import { CatalogReactEntityOwnerPickerClassKey, CatalogReactEntityProcessingStatusPickerClassKey, } from './components'; +import { CatalogReactEntityAutocompletePickerClassKey } from './components/EntityAutocompletePicker/EntityAutocompletePicker'; /** @public */ export type CatalogReactComponentsNameToClassKey = { @@ -36,6 +37,7 @@ export type CatalogReactComponentsNameToClassKey = { CatalogReactEntityTagPicker: CatalogReactEntityTagPickerClassKey; CatalogReactEntityOwnerPicker: CatalogReactEntityOwnerPickerClassKey; CatalogReactEntityProcessingStatusPicker: CatalogReactEntityProcessingStatusPickerClassKey; + CatalogReactEntityAutocompletePickerClassKey: CatalogReactEntityAutocompletePickerClassKey; }; /** @public */ diff --git a/plugins/scaffolder-react/api-report-alpha.md b/plugins/scaffolder-react/api-report-alpha.md index a521fecc70..683b8cf8be 100644 --- a/plugins/scaffolder-react/api-report-alpha.md +++ b/plugins/scaffolder-react/api-report-alpha.md @@ -16,6 +16,7 @@ import { IconComponent } from '@backstage/core-plugin-api'; import { JsonObject } from '@backstage/types'; import { JsonValue } from '@backstage/types'; import { LayoutOptions } from '@backstage/plugin-scaffolder-react'; +import { Overrides } from '@material-ui/core/styles/overrides'; import { PropsWithChildren } from 'react'; import { default as React_2 } from 'react'; import { ReactElement } from 'react'; @@ -25,6 +26,7 @@ import { ScaffolderRJSFFormProps } from '@backstage/plugin-scaffolder-react'; import { ScaffolderStep } from '@backstage/plugin-scaffolder-react'; import { ScaffolderTaskOutput } from '@backstage/plugin-scaffolder-react'; import { SetStateAction } from 'react'; +import { StyleRules } from '@material-ui/core/styles/withStyles'; import { TaskStep } from '@backstage/plugin-scaffolder-common'; import { TemplateEntityV1beta3 } from '@backstage/plugin-scaffolder-common'; import { TemplateGroupFilter } from '@backstage/plugin-scaffolder-react'; @@ -32,6 +34,13 @@ import { TemplateParameterSchema } from '@backstage/plugin-scaffolder-react'; import { TemplatePresentationV1beta3 } from '@backstage/plugin-scaffolder-common'; import { UiSchema } from '@rjsf/utils'; +// @alpha (undocumented) +export type BackstageOverrides = Overrides & { + [Name in keyof ScaffolderReactComponentsNameToClassKey]?: Partial< + StyleRules + >; +}; + // @alpha (undocumented) export const createAsyncValidators: ( rootSchema: JsonObject, @@ -132,6 +141,14 @@ export type ScaffolderPageContextMenuProps = { onCreateClicked?: () => void; }; +// @alpha (undocumented) +export type ScaffolderReactComponentsNameToClassKey = { + ScaffolderReactTemplateCategoryPicker: ScaffolderReactTemplateCategoryPickerClassKey; +}; + +// @alpha (undocumented) +export type ScaffolderReactTemplateCategoryPickerClassKey = 'root' | 'label'; + // @alpha export const Stepper: (stepperProps: StepperProps) => React_2.JSX.Element; diff --git a/plugins/scaffolder-react/src/next/components/TemplateCategoryPicker/TemplateCategoryPicker.tsx b/plugins/scaffolder-react/src/next/components/TemplateCategoryPicker/TemplateCategoryPicker.tsx index eba6aebf93..9c85cacfc2 100644 --- a/plugins/scaffolder-react/src/next/components/TemplateCategoryPicker/TemplateCategoryPicker.tsx +++ b/plugins/scaffolder-react/src/next/components/TemplateCategoryPicker/TemplateCategoryPicker.tsx @@ -23,6 +23,7 @@ import { FormControlLabel, TextField, Typography, + makeStyles, } from '@material-ui/core'; import CheckBoxIcon from '@material-ui/icons/CheckBox'; import CheckBoxOutlineBlankIcon from '@material-ui/icons/CheckBoxOutlineBlank'; @@ -34,12 +35,24 @@ import { alertApiRef, useApi } from '@backstage/core-plugin-api'; const icon = ; const checkedIcon = ; +/** @alpha */ +export type ScaffolderReactTemplateCategoryPickerClassKey = 'root' | 'label'; + +const useStyles = makeStyles( + { + root: {}, + label: {}, + }, + { name: 'ScaffolderReactTemplateCategoryPicker' }, +); + /** * The Category Picker that is rendered on the left side for picking * categories and filtering the template list. * @alpha */ export const TemplateCategoryPicker = () => { + const classes = useStyles(); const alertApi = useApi(alertApiRef); const { error, loading, availableTypes, selectedTypes, setSelectedTypes } = useEntityTypeFilter(); @@ -57,8 +70,9 @@ export const TemplateCategoryPicker = () => { if (!availableTypes) return null; return ( - + + >; +}; + +declare module '@backstage/theme' { + interface OverrideComponentNameToClassKeys + extends ScaffolderReactComponentsNameToClassKey {} +}