diff --git a/GUI/src/components/FlowElementsPopup/MultiChoiceQuestionContent.tsx b/GUI/src/components/FlowElementsPopup/MultiChoiceQuestionContent.tsx index 855731a0..3a2d42a4 100644 --- a/GUI/src/components/FlowElementsPopup/MultiChoiceQuestionContent.tsx +++ b/GUI/src/components/FlowElementsPopup/MultiChoiceQuestionContent.tsx @@ -5,7 +5,7 @@ import { MdCheck, MdDeleteOutline, MdEdit } from 'react-icons/md'; import useServiceStore from 'store/new-services.store'; import useServiceListStore from 'store/services.store'; import { generateUniqueId } from 'utils/flow-utils'; -import { removeTrailingUnderscores } from 'utils/string-util'; +import { getLastDigits, removeTrailingUnderscores } from 'utils/string-util'; import { v4 } from 'uuid'; import Button from '../Button'; @@ -15,7 +15,7 @@ import Track from '../Track'; import './styles.scss'; -const maxButtons = parseInt((import.meta.env.REACT_APP_MULTI_CHOICE_QUESTION_MAX_BUTTONS as string) ?? '4'); +const maxButtons = Number.parseInt((import.meta.env.REACT_APP_MULTI_CHOICE_QUESTION_MAX_BUTTONS as string) ?? '4'); export interface MultiChoiceQuestionContentProps { question: string; @@ -39,6 +39,8 @@ const MultiChoiceQuestionContent: FC = ({ const serviceName = useServiceStore((state) => removeTrailingUnderscores(state.serviceNameDashed())); const selectedService = useServiceListStore((state) => state.selectedService); + const mcqNodeNumber = String(getLastDigits(node?.data.label ?? '')); + const handleEdit = (idx: number) => { setEditIndex(idx); setEditValue(buttons[idx].title); @@ -75,9 +77,7 @@ const MultiChoiceQuestionContent: FC = ({ { id: generateUniqueId(), title: '', - payload: `#service, /${selectedService?.type ?? 'POST'}/services/active/${serviceName}_mcq_${ - node?.data.label[node?.data.label.length - 1] - }_${buttons.length}`, + payload: `#service, /${selectedService?.type ?? 'POST'}/services/active/${serviceName}_mcq_${mcqNodeNumber}_${buttons.length}`, }, ]; setButtons(newButtons); diff --git a/GUI/src/components/FlowElementsPopup/index.tsx b/GUI/src/components/FlowElementsPopup/index.tsx index e9f34538..f4105d71 100644 --- a/GUI/src/components/FlowElementsPopup/index.tsx +++ b/GUI/src/components/FlowElementsPopup/index.tsx @@ -12,7 +12,13 @@ import { EndpointData } from 'types/endpoint'; import { MultiChoiceQuestionButton } from 'types/multi-choice-question'; import { NodeDataProps } from 'types/service-flow'; import { getValueByPath } from 'utils/object-util'; -import { isTemplate, removeTrailingUnderscores, stringToTemplate, templateToString } from 'utils/string-util'; +import { + getLastDigits, + isTemplate, + removeTrailingUnderscores, + stringToTemplate, + templateToString, +} from 'utils/string-util'; import { Button, Track } from '..'; import Popup from '../Popup'; @@ -55,24 +61,22 @@ const FlowElementsPopup: React.FC = () => { const endpointsVariables = useServiceStore((state) => state.endpointsResponseVariables); const stepType = node?.data.stepType; + const mcqNodeNumber = useMemo(() => String(getLastDigits(node?.data.label ?? '')), [node?.data.label]); + const defaultMultiChoiceQuestionButtons = useMemo( () => [ { id: '1', title: 'Jah', - payload: `#service, /${selectedService?.type ?? 'POST'}/services/active/${serviceName}_mcq_${ - node?.data.label[node?.data.label.length - 1] - }_0`, + payload: `#service, /${selectedService?.type ?? 'POST'}/services/active/${serviceName}_mcq_${mcqNodeNumber}_0`, }, { id: '2', title: 'Ei', - payload: `#service, /${selectedService?.type ?? 'POST'}/services/active/${serviceName}_mcq_${ - node?.data.label[node?.data.label.length - 1] - }_1`, + payload: `#service, /${selectedService?.type ?? 'POST'}/services/active/${serviceName}_mcq_${mcqNodeNumber}_1`, }, ], - [selectedService?.type, serviceName, node?.data.label], + [selectedService?.type, serviceName, mcqNodeNumber], ); const defaultDynamicChoices: DynamicChoices = useMemo( @@ -225,7 +229,7 @@ const FlowElementsPopup: React.FC = () => { }; const prepareAssignForSaving = (updatedNode: Node) => { - const flatEndpointVariables = endpointsVariables.flatMap((endpoint) => endpoint.chips); + const flatEndpointVariables = endpointsVariables.flatMap((endpoint) => endpoint.chips); assignElements.forEach((element) => { const key = removeTrailingUnderscores(element.key); element.key = key; @@ -372,11 +376,7 @@ const FlowElementsPopup: React.FC = () => { })); const updatedEdges = edges.map((edge) => { - if ( - !edge.label || - edge.source !== originalNode.id || - !connectedEdges.some((ce) => ce.id === edge.id) - ) + if (!edge.label || edge.source !== originalNode.id || !connectedEdges.some((ce) => ce.id === edge.id)) return edge; const rename = renamedButtons.find((r) => r.oldTitle === edge.label); if (rename) { diff --git a/GUI/src/components/Markdowify/index.tsx b/GUI/src/components/Markdowify/index.tsx index 55b72aba..162489e4 100644 --- a/GUI/src/components/Markdowify/index.tsx +++ b/GUI/src/components/Markdowify/index.tsx @@ -76,7 +76,7 @@ const htmlLinkToMarkdown = (value: string): string => { const tempDiv = document.createElement('div'); tempDiv.innerHTML = value; const links = tempDiv.querySelectorAll('a'); - + let result = value; links.forEach((link) => { const href = link.getAttribute('href') || ''; @@ -84,7 +84,7 @@ const htmlLinkToMarkdown = (value: string): string => { const markdown = href ? `[${text}](${href})` : text; result = result.replace(link.outerHTML, markdown); }); - + return result; }; diff --git a/GUI/src/services/service-builder.ts b/GUI/src/services/service-builder.ts index 33067b20..01b2a446 100644 --- a/GUI/src/services/service-builder.ts +++ b/GUI/src/services/service-builder.ts @@ -187,9 +187,7 @@ export const saveFlow = async ({ try { let yamlContent = getYamlContent(nodes, edges, name, description, showError); - const mcqNodes = nodes.filter( - (node) => node.data?.stepType === StepType.MultiChoiceQuestion, - ); + const mcqNodes = nodes.filter((node) => node.data?.stepType === StepType.MultiChoiceQuestion); if (mcqNodes.length > 0) { const nodesUpToFirstMcq = nodes.slice( @@ -605,9 +603,7 @@ function handleTextField( const spacePlaceholder = '___SPACE___'; const rawMessage = typeof parentNode.data.message === 'string' ? decodeHtmlEntities(parentNode.data.message) : ''; const markdownMessage = htmlToMarkdown - .translate( - rawMessage.replace('{{', '${').replace('}}', '}').replaceAll(' ', spacePlaceholder), - ) + .translate(rawMessage.replace('{{', '${').replace('}}', '}').replaceAll(' ', spacePlaceholder)) .replaceAll(spacePlaceholder, ' ') .replaceAll(/\\([-~>[\]_*#().!`=<\\])/g, String.raw`\\$1`); @@ -752,9 +748,7 @@ function handleMultiChoiceQuestion( ) { const rootServiceName = serviceName.replace(/_mcq_\d+_\d+$/, ''); parentNode.data.multiChoiceQuestion?.buttons.forEach((b) => { - b.payload = b.payload.replace(/\/[^/]*_mcq_/, `/${rootServiceName}_mcq_`); - }); return finishedFlow.set(parentStepName, { diff --git a/GUI/src/store/new-services.store.ts b/GUI/src/store/new-services.store.ts index db190b81..975209e4 100644 --- a/GUI/src/store/new-services.store.ts +++ b/GUI/src/store/new-services.store.ts @@ -304,7 +304,7 @@ const useServiceStore = create((set, get) => ({ name: 'Status Code', value: `${endpoint?.name.replaceAll(' ', '_')}_res.response.statusCodeValue`, data: `${endpoint?.name.replaceAll(' ', '_')}_res.response.statusCodeValue`, - } + }, ); const variable: EndpointResponseVariable = {