diff --git a/features/admin.flow-builder-core.v1/components/element-panel/element-panel-draggable-node.tsx b/features/admin.flow-builder-core.v1/components/element-panel/element-panel-draggable-node.tsx index 4034984db8d..cab71a23e04 100644 --- a/features/admin.flow-builder-core.v1/components/element-panel/element-panel-draggable-node.tsx +++ b/features/admin.flow-builder-core.v1/components/element-panel/element-panel-draggable-node.tsx @@ -61,7 +61,12 @@ const ElementPanelDraggableNode: FunctionComponent - { node?.display?.label } + + { node?.display?.label } + { node?.display?.description && ( + { node?.display?.description } + ) } + diff --git a/features/admin.flow-builder-core.v1/components/elements/components/adapters/button-adapter.tsx b/features/admin.flow-builder-core.v1/components/elements/components/adapters/button-adapter.tsx index bc6f94fee73..d56cdb96bfc 100644 --- a/features/admin.flow-builder-core.v1/components/elements/components/adapters/button-adapter.tsx +++ b/features/admin.flow-builder-core.v1/components/elements/components/adapters/button-adapter.tsx @@ -85,8 +85,8 @@ export const ButtonAdapter: FunctionComponent = ({ type="source" position={ Position.Left } /> - = ({ { diff --git a/features/admin.flow-builder-core.v1/components/elements/components/common-component-factory.tsx b/features/admin.flow-builder-core.v1/components/elements/components/common-component-factory.tsx index 15ad6b5c8d9..bfa828beca5 100644 --- a/features/admin.flow-builder-core.v1/components/elements/components/common-component-factory.tsx +++ b/features/admin.flow-builder-core.v1/components/elements/components/common-component-factory.tsx @@ -29,7 +29,8 @@ import OTPInputAdapter from "./adapters/input/otp-input-adapter"; import PhoneNumberInputAdapter from "./adapters/input/phone-number-input-adapter"; import RichTextAdapter from "./adapters/rich-text-adapter"; import TypographyAdapter from "./adapters/typography-adapter"; -import { Component, ComponentTypes, InputVariants } from "../../../models/component"; +import { ComponentTypes, InputVariants } from "../../../models/component"; +import { Element } from "../../../models/elements"; /** * Props interface of {@link CommonComponentFactory} @@ -42,7 +43,7 @@ export interface CommonComponentFactoryPropsInterface extends IdentifiableCompon /** * The node properties. */ - node: Component; + node: Element; } /** diff --git a/features/admin.flow-builder-core.v1/components/elements/nodes/step/reorderable-component.tsx b/features/admin.flow-builder-core.v1/components/elements/nodes/step/reorderable-component.tsx new file mode 100644 index 00000000000..7dba3345469 --- /dev/null +++ b/features/admin.flow-builder-core.v1/components/elements/nodes/step/reorderable-component.tsx @@ -0,0 +1,116 @@ +/** + * Copyright (c) 2024, WSO2 LLC. (https://www.wso2.com). + * + * WSO2 LLC. licenses this file to you 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 Box, { BoxProps } from "@oxygen-ui/react/Box"; +import { IdentifiableComponentInterface } from "@wso2is/core/models"; +import { GetDragItemProps } from "@wso2is/dnd"; +import { useNodeId } from "@xyflow/react"; +import classNames from "classnames"; +import React, { FunctionComponent, ReactElement, SVGProps } from "react"; +import useAuthenticationFlowBuilderCore from "../../../../hooks/use-authentication-flow-builder-core-context"; +import { Component } from "../../../../models/component"; +import { Element } from "../../../../models/elements"; +import getWidgetElements from "../../../../utils/get-widget-elements"; +import isWidget from "../../../../utils/is-widget"; + +/** + * Props interface of {@link ReorderableComponent} + */ +export interface ReorderableComponentPropsInterface + extends IdentifiableComponentInterface, + Omit { + /** + * The component to be rendered. + */ + component: Component; + /** + * Additional props needed for the draggable functionality. + */ + draggableProps?: Partial; +} + +// TODO: Move this to Oxygen UI. +/* eslint-disable max-len */ +const GridDotsVerticalIcon = ({ ...rest }: SVGProps): ReactElement => ( + + + + + + + +); + +/** + * Re-orderable component inside a step node. + * + * @param props - Props injected to the component. + * @returns ReorderableComponent component. + */ +export const ReorderableComponent: FunctionComponent = ({ + component, + className, + "data-componentid": componentId = "reorderable-component", + draggableProps +}: ReorderableComponentPropsInterface): ReactElement => { + const nodeId: string = useNodeId(); + const { ComponentFactory, setLastInteractedElement } = useAuthenticationFlowBuilderCore(); + + // Widgets have a flow property which contains the elements of the sub flow. + // If the component is a widget, render the elements of the flow. + if (isWidget(component)) { + return ( + <> + { getWidgetElements(component)?.map((element: Element) => ( + + ) + ) } + + ); + } + + return ( + setLastInteractedElement(component) } + data-componentid={ `${componentId}-${component.type}` } + { ...draggableProps } + // TODO: Temporary disable draggable until the dragging animation issue is fixed. + draggable={ false } + > +
+ +
+
+ +
+ + ); +}; + +export default ReorderableComponent; diff --git a/features/admin.flow-builder-core.v1/components/elements/nodes/step/step.scss b/features/admin.flow-builder-core.v1/components/elements/nodes/step/step.scss index 67fa6152242..fcc23f2b592 100644 --- a/features/admin.flow-builder-core.v1/components/elements/nodes/step/step.scss +++ b/features/admin.flow-builder-core.v1/components/elements/nodes/step/step.scss @@ -64,6 +64,9 @@ .flow-builder-step-content-form-field-content { width: 100%; + display: flex; + flex-direction: column; + gap: var(--oxygen-spacing-1); .adapter { position: relative; @@ -80,6 +83,8 @@ } } } + + } } } diff --git a/features/admin.flow-builder-core.v1/components/elements/nodes/step/step.tsx b/features/admin.flow-builder-core.v1/components/elements/nodes/step/step.tsx index 83b413820bf..381664ff9c7 100644 --- a/features/admin.flow-builder-core.v1/components/elements/nodes/step/step.tsx +++ b/features/admin.flow-builder-core.v1/components/elements/nodes/step/step.tsx @@ -34,10 +34,10 @@ import React, { MouseEvent, MutableRefObject, ReactElement, - SVGProps, useCallback, useRef } from "react"; +import ReorderableComponent from "./reorderable-component"; import useAuthenticationFlowBuilderCore from "../../../../hooks/use-authentication-flow-builder-core-context"; import { Component } from "../../../../models/component"; import "./step.scss"; @@ -47,21 +47,6 @@ import "./step.scss"; */ export interface StepPropsInterface extends Node, IdentifiableComponentInterface {} -// TODO: Move this to Oxygen UI. -/* eslint-disable max-len */ -const GridDotsVerticalIcon = ({ ...rest }: SVGProps): ReactElement => ( - - - - - - - -); - /** * Node for representing an empty step in the flow builder. * @@ -75,7 +60,7 @@ export const Step: FunctionComponent = ({ const nodeId: string = useNodeId(); const node: Pick = useNodesData(nodeId); const { deleteElements, updateNodeData } = useReactFlow(); - const { onElementDropOnCanvas, ComponentFactory, setLastInteractedElement } = useAuthenticationFlowBuilderCore(); + const { onElementDropOnCanvas } = useAuthenticationFlowBuilderCore(); const { generateComponentId } = useDnD(); const ref: MutableRefObject = useRef(null); @@ -99,8 +84,11 @@ export const Step: FunctionComponent = ({ // If the component has variants, add the default variant to the root. if (!isEmpty(newComponent?.variants)) { - const defaultVariantType: string = newComponent?.display?.defaultVariant ?? newComponent?.variants[0]?.variant; - const defaultVariant: Component = newComponent.variants.find((variant: Component) => variant.variant === defaultVariantType); + const defaultVariantType: string = + newComponent?.display?.defaultVariant ?? newComponent?.variants[0]?.variant; + const defaultVariant: Component = newComponent.variants.find( + (variant: Component) => variant.variant === defaultVariantType + ); newComponent = { ...newComponent, @@ -136,11 +124,7 @@ export const Step: FunctionComponent = ({ onDrop={ handleDrop } onDrag={ handleDragOver } > - + = ({ } = getDragItemProps(index); return ( - setLastInteractedElement(component) } - { ...otherDragItemProps } - // TODO: Fix this. Temporary fix to prevent dragging issues. - draggable={ false } - > -
- -
-
- -
- + draggableProps={ otherDragItemProps } + /> ); }) } diff --git a/features/admin.flow-builder-core.v1/data/widgets.json b/features/admin.flow-builder-core.v1/data/widgets.json index 288fa6f872e..1849937f6a5 100644 --- a/features/admin.flow-builder-core.v1/data/widgets.json +++ b/features/admin.flow-builder-core.v1/data/widgets.json @@ -1,16 +1,89 @@ [ { "category": "WIDGET", - "type": "RECAPTCHA", + "type": "IDENTIFIER_PASSWORD", "version": "0.1.0", "deprecated": false, "display": { - "label": "reCAPTCHA", - "image": "https://www.gstatic.com/recaptcha/api2/logo_48.png" + "label": "Username + Password", + "description": "Basic registration experience with simple username & password", + "image": "https://www.svgrepo.com/show/390092/security-protection-password.svg" }, "config": { - "version": 2, - "field": {} + "field": { + "className": "wso2is-widget username-password" + }, + "flow": { + "blocks": [ + { + "elements": [ + "dnd-element_d6707724-df80-4f69-bbbd-6303217b660e", + "dnd-element_4f84cb89-62de-488d-aeb4-163dcb948148", + "dnd-element_b5c04863-dc63-4fe6-831b-df8a2a946a9f" + ], + "id": "flow-block-c2a56cea-abf8-4608-a617-92fb1f61e136" + } + ], + "elements": [ + { + "category": "FIELD", + "type": "INPUT", + "variant": "TEXT", + "display": { + "label": "Text", + "image": "https://www.svgrepo.com/show/532231/text-size.svg" + }, + "config": { + "field": { + "type": "text", + "hint": "", + "label": "Username", + "required": true, + "placeholder": "Enter your username", + "name": "http://wso2.org/claims/username" + } + }, + "id": "dnd-element_d6707724-df80-4f69-bbbd-6303217b660e" + }, + { + "category": "FIELD", + "type": "INPUT", + "variant": "PASSWORD", + "display": { + "label": "Password Input", + "image": "https://www.svgrepo.com/show/529125/password.svg" + }, + "config": { + "field": { + "name": "password", + "type": "password", + "hint": "", + "label": "Password", + "required": true, + "placeholder": "Enter your password" + } + }, + "id": "dnd-element_4f84cb89-62de-488d-aeb4-163dcb948148" + }, + { + "category": "ACTION", + "type": "BUTTON", + "id": "dnd-element_b5c04863-dc63-4fe6-831b-df8a2a946a9f", + "variant": "PRIMARY", + "display": { + "label": "Button", + "image": "https://www.svgrepo.com/show/450681/button.svg" + }, + "config": { + "field": { + "type": "submit", + "text": "Continue" + } + } + } + ] + }, + "styles": {} } }, { @@ -20,204 +93,11 @@ "deprecated": false, "display": { "label": "Email OTP", + "description": "Registration experience with Email", "image": "https://www.svgrepo.com/show/368868/otp.svg" }, "config": { "field": {} - }, - "flow": { - "nodes": [ - { - "id": "flow-node-{{STEP_NUMBER}}", - "elements": [ - "flow-display-header-rg6pwt0", - "flow-block-attributes-53fdsfsp", - "flow-action-go-back-er212kfl" - ], - "actions": [ - { - "id": "flow-action-next-tyG3hp31", - "action": { - "type": "NEXT", - "meta": { - "actionType": "ATTRIBUTE_COLLECTION" - } - }, - "next": [ - "{{NEXT_STEP_ID}}" - ] - }, - { - "id": "flow-action-go-back-er212kfl", - "action": { - "type": "PREVIOUS" - }, - "previous": [ - "{{PREVIOUS_STEP_ID}}" - ] - } - ] - }, - { - "id": "flow-node-{{STEP_NUMBER}}", - "elements": [ - "flow-display-header-GG456y7", - "flow-block-attributes-45owsew2", - "flow-action-go-back-yt5g5t" - ], - "actions": [ - { - "id": "flow-action-verify-otp-ssd5g6h", - "action": { - "type": "NEXT", - "meta": { - "actionType": "VERIFICATION" - } - }, - "next": [ - "{{NEXT_STEP_ID}}" - ] - }, - { - "id": "flow-action-go-back-yt5g5t", - "action": { - "type": "PREVIOUS" - }, - "previous": [ - "{{PREVIOUS_STEP_ID}}" - ] - } - ] - } - ], - "blocks": [ - { - "id": "flow-block-attributes-53fdsfsp", - "nodes": [ - "flow-field-email-Rt8uJ6D3", - "flow-action-next-tyG3hp31" - ] - }, - { - "id": "flow-block-attributes-45owsew2", - "nodes": [ - "flow-field-otp-mn44gh0j", - "flow-action-verify-otp-ssd5g6h" - ] - } - ], - "elements": [ - { - "id": "flow-display-header-rg6pwt0", - "category": "DISPLAY", - "type": "TYPOGRAPHY", - "version": "0.1.0", - "variant": "H3", - "config": { - "field": { - "text": "Enter Email" - } - } - }, - { - "id": "flow-field-email-Rt8uJ6D3", - "category": "FIELD", - "type": "INPUT", - "version": "0.1.0", - "variant": "EMAIL", - "config": { - "field": { - "type": "email", - "name": "email", - "hint": "", - "label": "Email", - "required": true, - "placeholder": "Enter your email address" - } - } - }, - { - "id": "flow-action-next-tyG3hp31", - "category": "ACTION", - "type": "BUTTON", - "version": "0.1.0", - "variant": "PRIMARY", - "config": { - "field": { - "type": "submit", - "text": "Continue" - } - } - }, - { - "id": "flow-action-go-back-er212kfl", - "category": "ACTION", - "type": "BUTTON", - "version": "0.1.0", - "variant": "SECONDARY", - "config": { - "field": { - "type": "submit", - "text": "Go back" - } - } - }, - { - "id": "flow-display-header-GG456y7", - "category": "DISPLAY", - "type": "TYPOGRAPHY", - "version": "0.1.0", - "variant": "H3", - "config": { - "field": { - "text": "OTP Verification" - } - } - }, - { - "id": "flow-field-otp-mn44gh0j", - "category": "FIELD", - "type": "INPUT", - "version": "0.1.0", - "variant": "OTP", - "config": { - "field": { - "type": "text", - "name": "otp", - "hint": "", - "label": "OTP", - "required": true, - "placeholder": "Enter the OTP" - } - } - }, - { - "id": "flow-action-verify-otp-ssd5g6h", - "category": "ACTION", - "type": "BUTTON", - "version": "0.1.0", - "variant": "PRIMARY", - "config": { - "field": { - "type": "submit", - "text": "Continue" - } - } - }, - { - "id": "flow-action-go-back-yt5g5t", - "category": "ACTION", - "type": "BUTTON", - "version": "0.1.0", - "variant": "SECONDARY", - "config": { - "field": { - "type": "submit", - "text": "Go back" - } - } - } - ] } }, { @@ -227,10 +107,26 @@ "deprecated": false, "display": { "label": "SMS OTP", + "description": "Registration experience with SMS OTP", "image": "https://www.svgrepo.com/show/381137/transaction-password-otp-verification-code-security.svg" }, "config": { "field": {} } + }, + { + "category": "WIDGET", + "type": "RECAPTCHA", + "version": "0.1.0", + "deprecated": false, + "display": { + "label": "reCAPTCHA", + "description": "Add reCAPTCHA to your registration experience", + "image": "https://www.gstatic.com/recaptcha/api2/logo_48.png" + }, + "config": { + "version": 2, + "field": {} + } } ] diff --git a/features/admin.flow-builder-core.v1/models/base.ts b/features/admin.flow-builder-core.v1/models/base.ts index a004e1383a6..5f078518407 100644 --- a/features/admin.flow-builder-core.v1/models/base.ts +++ b/features/admin.flow-builder-core.v1/models/base.ts @@ -88,6 +88,10 @@ export interface BaseDisplay { * The default variant of the component or the primitive. */ defaultVariant?: string; + /** + * Description of the component or the primitive. + */ + description?: string; } /** diff --git a/features/admin.flow-builder-core.v1/models/widget.ts b/features/admin.flow-builder-core.v1/models/widget.ts index b714d89b3c0..a102f2021b3 100644 --- a/features/admin.flow-builder-core.v1/models/widget.ts +++ b/features/admin.flow-builder-core.v1/models/widget.ts @@ -16,10 +16,13 @@ * under the License. */ +import { Payload } from "./api"; import { Component } from "./component"; export type Widget = Component; +export type SubFlow = Partial; + /** * Interface for the properties of a widget. */ @@ -28,8 +31,12 @@ export interface WidgetExtendedConfig { * Version of the widget. */ version?: string; + /** + * Sub flow to render for the widget. + */ + flow?: SubFlow; } export enum WidgetTypes { - AttributeCollector = "ATTRIBUTE_COLLECTOR", + IdentifierPassword = "IDENTIFIER_PASSWORD", } diff --git a/features/admin.flow-builder-core.v1/utils/get-widget-elements.ts b/features/admin.flow-builder-core.v1/utils/get-widget-elements.ts new file mode 100644 index 00000000000..f7207423508 --- /dev/null +++ b/features/admin.flow-builder-core.v1/utils/get-widget-elements.ts @@ -0,0 +1,37 @@ +/** + * Copyright (c) 2024, WSO2 LLC. (https://www.wso2.com). + * + * WSO2 LLC. licenses this file to you 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 { Element } from "../models/elements"; + +/** + * Retrieves the elements of a widget. + * + * A widget is identified by the presence of a `flow` property in its configuration. + * This function returns the elements defined in the widget's flow configuration. + * + * @param element - The widget element to retrieve elements from. + * @returns An array of elements if the widget has a flow configuration, otherwise an empty array. + * + * @example + * const elements = getWidgetElements(widget); // Returns an array of elements. + */ +const getWidgetElements = (element: Element): Element[] => { + return element?.config?.flow?.elements; +}; + +export default getWidgetElements; diff --git a/features/admin.registration-flow-builder.v1/components/element-property-panel/widgets/attribute-collector-properties.scss b/features/admin.flow-builder-core.v1/utils/is-widget.ts similarity index 57% rename from features/admin.registration-flow-builder.v1/components/element-property-panel/widgets/attribute-collector-properties.scss rename to features/admin.flow-builder-core.v1/utils/is-widget.ts index 66762e7250e..7334299a5e0 100644 --- a/features/admin.registration-flow-builder.v1/components/element-property-panel/widgets/attribute-collector-properties.scss +++ b/features/admin.flow-builder-core.v1/utils/is-widget.ts @@ -16,10 +16,22 @@ * under the License. */ -.authentication-flow-builder-attribute-collector-property { - padding: var(--oxygen-spacing-2); +import { Element } from "../models/elements"; - .MuiAccordionSummary-content { - margin: 0; - } -} +/** + * Checks if the given element is a widget. + * + * A widget is identified by the presence of a `flow` property in its configuration. + * + * @param element - The element to check. + * @returns True if the element is a widget, otherwise false. + * + * @example + * const result = isWidget(element); + * console.log(result); // true + */ +const isWidget = (element: Element): boolean => { + return element?.config?.flow; +}; + +export default isWidget; diff --git a/features/admin.flow-builder-core.v1/utils/transform-flow.ts b/features/admin.flow-builder-core.v1/utils/transform-flow.ts index a4a5e3ae33e..e565cae5f78 100644 --- a/features/admin.flow-builder-core.v1/utils/transform-flow.ts +++ b/features/admin.flow-builder-core.v1/utils/transform-flow.ts @@ -19,6 +19,7 @@ import { Edge, Node as XYFlowNode } from "@xyflow/react"; import omit from "lodash-es/omit"; import set from "lodash-es/set"; +import { v4 as uuidv4 } from "uuid"; import { ActionTypes } from "../models/actions"; import { Payload, @@ -57,7 +58,7 @@ const groupNodesIntoPages = (nodes: any[], edges: any[]): any[] => { nodes.forEach((node: any) => { if (!visitedNodes.has(node.id)) { - const pageId: string = `flow-page-${Object.keys(nodePages).length + 1}`; + const pageId: string = `flow-page-${uuidv4()}`; traverseNodes(node.id, pageId); } @@ -213,7 +214,7 @@ const transformFlow = (flowState: any): Payload => { if (component.category === "FIELD") { currentBlock = { elements: [ component.id ], - id: `flow-block-${payload.blocks.length + 1}` + id: `flow-block-${uuidv4()}` }; payload.blocks.push(currentBlock); nodeElements.push(currentBlock.id); diff --git a/features/admin.registration-flow-builder.v1/components/element-property-panel/extended-properties/field-extended-properties.tsx b/features/admin.registration-flow-builder.v1/components/element-property-panel/extended-properties/field-extended-properties.tsx index 3a0e3ee1526..b87de38de4c 100644 --- a/features/admin.registration-flow-builder.v1/components/element-property-panel/extended-properties/field-extended-properties.tsx +++ b/features/admin.registration-flow-builder.v1/components/element-property-panel/extended-properties/field-extended-properties.tsx @@ -59,7 +59,7 @@ const FieldExtendedProperties: FunctionComponent attribute.displayName } - sx={ { width: 300 } } + sx={ { width: "100%" } } renderInput={ (params: AutocompleteRenderInputParams) => } value={ selectedValue } onChange={ (_: ChangeEvent, attribute: Attribute) => { diff --git a/features/admin.registration-flow-builder.v1/components/element-property-panel/widget-property-factory.tsx b/features/admin.registration-flow-builder.v1/components/element-property-panel/widget-property-factory.tsx index 3694bd8d21a..f16df44b5ca 100644 --- a/features/admin.registration-flow-builder.v1/components/element-property-panel/widget-property-factory.tsx +++ b/features/admin.registration-flow-builder.v1/components/element-property-panel/widget-property-factory.tsx @@ -19,9 +19,7 @@ import CommonWidgetPropertyFactory, { CommonWidgetPropertyFactoryPropsInterface } from "@wso2is/admin.flow-builder-core.v1/components/element-property-panel/common-widget-property-factory"; -import { WidgetTypes } from "@wso2is/admin.flow-builder-core.v1/models/widget"; import React, { FunctionComponent, ReactElement } from "react"; -import AttributeCollectorProperties from "./widgets/attribute-collector-properties"; /** * Props interface of {@link WidgetPropertyFactory} @@ -41,8 +39,6 @@ const WidgetPropertyFactory: FunctionComponent { switch (element.type) { - case WidgetTypes.AttributeCollector: - return ; default: return ( = ({ - "data-componentid": componentId = "authentication-flow-builder-attribute-collector-properties" -}: AttributeCollectorPropertiesPropsInterface): ReactElement => { - const { data: attributes } = useGetSupportedProfileAttributes(); - const { lastInteractedNodeId } = useAuthenticationFlowBuilderCore(); - const { selectedAttributes, setSelectedAttributes } = useRegistrationFlowBuilder(); - - useEffect(() => { - if (lastInteractedNodeId && isEmpty(selectedAttributes[lastInteractedNodeId]) && !isEmpty(attributes)) { - setSelectedAttributes({ - ...selectedAttributes, - [lastInteractedNodeId]: [ attributes[0] ] - }); - } - }, [ lastInteractedNodeId, attributes ]); - - return ( - - Select and add user attributes you want to collect in this step - - { attributes?.map((attribute: Attribute) => { - return ( - - - - - setSelectedAttributes({ - ...selectedAttributes, - [lastInteractedNodeId]: [ - ...selectedAttributes[lastInteractedNodeId], - attribute - ] - }) - } - /> - { attribute.displayName } - - - - ); - }) } - - - ); -}; - -export default AttributeCollectorProperties; diff --git a/features/admin.registration-flow-builder.v1/components/elements/components/adapters/attributes/attribute-factory.tsx b/features/admin.registration-flow-builder.v1/components/elements/components/adapters/attributes/attribute-factory.tsx deleted file mode 100644 index 9215e54215f..00000000000 --- a/features/admin.registration-flow-builder.v1/components/elements/components/adapters/attributes/attribute-factory.tsx +++ /dev/null @@ -1,57 +0,0 @@ -/** - * Copyright (c) 2024, WSO2 LLC. (https://www.wso2.com). - * - * WSO2 LLC. licenses this file to you 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 TextField from "@oxygen-ui/react/TextField"; -import { IdentifiableComponentInterface } from "@wso2is/core/models"; -import { Node } from "@xyflow/react"; -import React, { FunctionComponent, ReactElement } from "react"; -import { Attribute } from "../../../../../models/attributes"; - -/** - * Props interface of {@link AttributeFactory} - */ -export interface AttributeFactoryPropsInterface extends IdentifiableComponentInterface { - /** - * The node properties. - */ - attribute: Attribute; -} - -/** - * Factory for generating the attributes. - * - * @param props - Props injected to the component. - * @returns The AttributeFactory component. - */ -export const AttributeFactory: FunctionComponent = ({ - attribute -}: AttributeFactoryPropsInterface & Node): ReactElement => { - - return ( - - ); -}; - -export default AttributeFactory; diff --git a/features/admin.registration-flow-builder.v1/components/elements/components/adapters/attributes/attributes-adapter.tsx b/features/admin.registration-flow-builder.v1/components/elements/components/adapters/attributes/attributes-adapter.tsx deleted file mode 100644 index ce737cd909e..00000000000 --- a/features/admin.registration-flow-builder.v1/components/elements/components/adapters/attributes/attributes-adapter.tsx +++ /dev/null @@ -1,55 +0,0 @@ -/** - * Copyright (c) 2024, WSO2 LLC. (https://www.wso2.com). - * - * WSO2 LLC. licenses this file to you 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 Stack from "@oxygen-ui/react/Stack"; -import { IdentifiableComponentInterface } from "@wso2is/core/models"; -import { useNodeId } from "@xyflow/react"; -import React, { FunctionComponent, ReactElement } from "react"; -import AttributeFactory from "./attribute-factory"; -import useRegistrationFlowBuilder from "../../../../../hooks/use-registration-flow-builder-core-context"; -import { Attribute } from "../../../../../models/attributes"; - -/** - * Props interface of {@link AttributesAdapter} - */ -export type AttributeCollectorNodePropsInterface = IdentifiableComponentInterface; - -/** - * Adapter to generate the attributes. - * - * @param props - Props injected to the component. - * @returns The AttributesAdapter component. - */ -const AttributesAdapter: FunctionComponent = ({ - "data-componentid": componentId = "attributes-adapter" -}: AttributeCollectorNodePropsInterface): ReactElement => { - const nodeId: string = useNodeId(); - const { selectedAttributes } = useRegistrationFlowBuilder(); - - return ( - - { selectedAttributes && - Object.prototype.hasOwnProperty.call(selectedAttributes, nodeId) && - selectedAttributes[nodeId].map((attribute: Attribute) => ( - - )) } - - ); -}; - -export default AttributesAdapter; diff --git a/features/admin.registration-flow-builder.v1/components/elements/components/component-factory.tsx b/features/admin.registration-flow-builder.v1/components/elements/components/component-factory.tsx index f4d0dba575c..553ff26cc88 100644 --- a/features/admin.registration-flow-builder.v1/components/elements/components/component-factory.tsx +++ b/features/admin.registration-flow-builder.v1/components/elements/components/component-factory.tsx @@ -19,12 +19,9 @@ import CommonComponentFactory, { CommonComponentFactoryPropsInterface } from "@wso2is/admin.flow-builder-core.v1/components/elements/components/common-component-factory"; -import { ElementCategories } from "@wso2is/admin.flow-builder-core.v1/models/elements"; -import { WidgetTypes } from "@wso2is/admin.flow-builder-core.v1/models/widget"; import { IdentifiableComponentInterface } from "@wso2is/core/models"; import { Node } from "@xyflow/react"; import React, { FunctionComponent, ReactElement } from "react"; -import AttributesAdapter from "./adapters/attributes/attributes-adapter"; /** * Props interface of {@link ComponentFactory} @@ -41,12 +38,6 @@ export const ComponentFactory: FunctionComponent node, nodeId }: ComponentFactoryPropsInterface & Node): ReactElement => { - if (node.category === ElementCategories.Widget) { - if (node.type === WidgetTypes.AttributeCollector) { - return ; - } - } - return ; }; diff --git a/features/admin.registration-flow-builder.v1/data/widgets.json b/features/admin.registration-flow-builder.v1/data/widgets.json index 83d2462684d..fe51488c706 100644 --- a/features/admin.registration-flow-builder.v1/data/widgets.json +++ b/features/admin.registration-flow-builder.v1/data/widgets.json @@ -1,18 +1 @@ -[ - { - "category": "WIDGET", - "type": "ATTRIBUTE_COLLECTOR", - "version": "0.1.0", - "deprecated": false, - "display": { - "label": "Attribute Collector", - "image": "https://www.svgrepo.com/show/450909/form-elements.svg" - }, - "config": { - "field": { - "className": "wso2is-attribute-collector" - }, - "styles": {} - } - } -] +[] diff --git a/modules/dnd/src/components/droppable-container.scss b/modules/dnd/src/components/droppable-container.scss index 207a6c1b029..d0cfd6cdcce 100644 --- a/modules/dnd/src/components/droppable-container.scss +++ b/modules/dnd/src/components/droppable-container.scss @@ -19,7 +19,7 @@ .droppable-container { display: flex; flex-direction: column; - gap: 8px; + gap: var(--oxygen-spacing-1); .draggable-item { cursor: grab;