Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
- Loading branch information
1 parent
4cb764f
commit 57b35e7
Showing
10 changed files
with
225 additions
and
169 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
2 changes: 1 addition & 1 deletion
2
...d/event-sources/EventSourcesSelector.scss → ...tem-selector-field/ItemSelectorField.scss
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,4 +1,4 @@ | ||
| .odc-event-source-selector { | ||
| .odc-item-selector-field { | ||
| display: flex; | ||
| flex-direction: column; | ||
| flex-flow: wrap; | ||
|
|
||
127 changes: 127 additions & 0 deletions
127
...ges/console-shared/src/components/formik-fields/item-selector-field/ItemSelectorField.tsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,127 @@ | ||
| import * as React from 'react'; | ||
| import * as _ from 'lodash'; | ||
| import { useField, useFormikContext, FormikValues } from 'formik'; | ||
| import { LoadingInline } from '@console/internal/components/utils'; | ||
| import { FormGroup, Alert } from '@patternfly/react-core'; | ||
| import { StarIcon } from '@patternfly/react-icons'; | ||
| import { getFieldId } from '@console/shared'; | ||
| import SelectorCard from './SelectorCard'; | ||
| import './ItemSelectorField.scss'; | ||
|
|
||
| interface Item { | ||
| name: string; | ||
| title: string; | ||
| displayName: string; | ||
| iconUrl?: string; | ||
| [x: string]: any; | ||
| } | ||
|
|
||
| interface NormalizedItem { | ||
| [item: string]: Item; | ||
| } | ||
|
|
||
| interface ItemSelectorFieldProps { | ||
| itemList: NormalizedItem; | ||
| name: string; | ||
| label?: string; | ||
| loadingItems?: boolean; | ||
| isRecommending?: boolean; | ||
| recommended?: string; | ||
| couldNotRecommend?: boolean; | ||
| onSelect?: (name: string) => void; | ||
| } | ||
|
|
||
| const ItemSelectorField: React.FC<ItemSelectorFieldProps> = ({ | ||
| itemList, | ||
| name, | ||
| label, | ||
| loadingItems, | ||
| isRecommending, | ||
| recommended, | ||
| couldNotRecommend, | ||
| onSelect, | ||
| }) => { | ||
| const [selected, { error: selectedError, touched: selectedTouched }] = useField(name); | ||
| const { setFieldValue, setFieldTouched, validateForm } = useFormikContext<FormikValues>(); | ||
| const itemCount = _.keys(itemList).length; | ||
|
|
||
| const handleItemChange = React.useCallback( | ||
| (image: string) => { | ||
| setFieldValue(name, image); | ||
| setFieldTouched(name, true); | ||
| validateForm(); | ||
| }, | ||
| [name, setFieldValue, setFieldTouched, validateForm], | ||
| ); | ||
|
|
||
| React.useEffect(() => { | ||
| if (!selected.value && itemCount === 1) { | ||
| const image = _.find(itemList); | ||
| handleItemChange(image.name); | ||
| } | ||
| if (!selected.value && recommended) { | ||
| handleItemChange(recommended); | ||
| } | ||
| }, [itemCount, itemList, handleItemChange, selected.value, recommended]); | ||
|
|
||
| if (itemCount === 1) { | ||
| return null; | ||
| } | ||
|
|
||
| const fieldId = getFieldId(name, 'selector'); | ||
| const isValid = !(selectedTouched && selectedError); | ||
| const errorMessage = !isValid ? selectedError : ''; | ||
|
|
||
| return ( | ||
| <FormGroup | ||
| fieldId={fieldId} | ||
| label={label} | ||
| helperTextInvalid={errorMessage} | ||
| isValid={isValid} | ||
| isRequired | ||
| > | ||
| {isRecommending && ( | ||
| <> | ||
| <LoadingInline /> Detecting recommended {label}... | ||
| </> | ||
| )} | ||
| {recommended && ( | ||
| <> | ||
| <Alert variant="success" title="Builder image(s) detected." isInline> | ||
| Recommended {label} are represented by{' '} | ||
| <StarIcon style={{ color: 'var(--pf-global--primary-color--100)' }} /> icon. | ||
| </Alert> | ||
| <br /> | ||
| </> | ||
| )} | ||
| {couldNotRecommend && ( | ||
| <> | ||
| <Alert variant="warning" title="Unable to detect the builder image." isInline> | ||
| Select the most appropriate one from the list to continue. | ||
| </Alert> | ||
| <br /> | ||
| </> | ||
| )} | ||
| {loadingItems ? ( | ||
| <LoadingInline /> | ||
| ) : ( | ||
| <div id="item-selector-field" className="odc-item-selector-field"> | ||
| {_.values(itemList).map((item) => ( | ||
| <SelectorCard | ||
| key={item.name} | ||
| title={item.title} | ||
| iconUrl={item.iconUrl} | ||
| name={item.name} | ||
| displayName={item.displayName} | ||
| selected={selected.value === item.name} | ||
| recommended={recommended === item.name} | ||
| onChange={onSelect || handleItemChange} | ||
| /> | ||
| ))} | ||
| </div> | ||
| )} | ||
| </FormGroup> | ||
| ); | ||
| }; | ||
|
|
||
| export default ItemSelectorField; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
13 changes: 0 additions & 13 deletions
13
frontend/packages/dev-console/src/components/import/builder/BuilderImageSelector.scss
This file was deleted.
Oops, something went wrong.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
39 changes: 8 additions & 31 deletions
39
frontend/packages/knative-plugin/src/components/add/event-sources/EventSourcesSelector.tsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,39 +1,16 @@ | ||
| import * as React from 'react'; | ||
| import * as _ from 'lodash'; | ||
| import { useFormikContext, FormikValues } from 'formik'; | ||
| import SelectorCard from '@console/dev-console/src/components/import/builder/SelectorCard'; | ||
| import { ItemSelectorField } from '@console/shared'; | ||
| import FormSection from '@console/dev-console/src/components/import/section/FormSection'; | ||
| import './EventSourcesSelector.scss'; | ||
| import { NormalizedEventSources } from '../import-types'; | ||
|
|
||
| interface EventSourcesSelectorProps { | ||
| eventSourceList: any; | ||
| eventSourceList: NormalizedEventSources; | ||
| } | ||
|
|
||
| const EventSourcesSelector: React.FC<EventSourcesSelectorProps> = ({ eventSourceList }) => { | ||
| const { values, setFieldValue, setFieldTouched, validateForm } = useFormikContext<FormikValues>(); | ||
|
|
||
| const handleTypeChange = React.useCallback( | ||
| (value: string) => { | ||
| setFieldValue('type', value); | ||
| setFieldTouched('type', true); | ||
| validateForm(); | ||
| }, | ||
| [setFieldValue, setFieldTouched, validateForm], | ||
| ); | ||
| return ( | ||
| <FormSection title="Type" fullWidth> | ||
| <div id="event-source-selector-field" className="odc-event-source-selector"> | ||
| {_.values(eventSourceList).map((type) => ( | ||
| <SelectorCard | ||
| key={type.name} | ||
| image={type} | ||
| selected={values.type === type.name} | ||
| onChange={handleTypeChange} | ||
| /> | ||
| ))} | ||
| </div> | ||
| </FormSection> | ||
| ); | ||
| }; | ||
| const EventSourcesSelector: React.FC<EventSourcesSelectorProps> = ({ eventSourceList }) => ( | ||
| <FormSection title="Type" fullWidth> | ||
| <ItemSelectorField itemList={eventSourceList} name="type" /> | ||
| </FormSection> | ||
| ); | ||
|
|
||
| export default EventSourcesSelector; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Oops, something went wrong.