Pull from buerokratt/dev

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<MultiChoiceQuestionContentProps> = ({
   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<MultiChoiceQuestionContentProps> = ({
       {
         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);

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<NodeDataProps>) => {
-    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) {

GUI/src/components/Markdowify/index.tsx

@@ -76,15 +76,15 @@ 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') || '';
     const text = link.textContent || href;
     const markdown = href ? `[${text}](${href})` : text;
     result = result.replace(link.outerHTML, markdown);
   });
-  
+
   return result;
 };
 

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, {

GUI/src/store/new-services.store.ts

@@ -304,7 +304,7 @@ const useServiceStore = create<ServiceStoreState>((set, get) => ({
             name: 'Status Code',
             value: `${endpoint?.name.replaceAll(' ', '_')}_res.response.statusCodeValue`,
             data: `${endpoint?.name.replaceAll(' ', '_')}_res.response.statusCodeValue`,
-          }
+          },
         );
 
         const variable: EndpointResponseVariable = {