@aehrc/smart-forms-renderer 0.40.0 → 0.40.2

package/src/components/FormComponents/Tables/GroupTable.tsx

@@ -25,13 +25,13 @@ import type {
   PropsWithQrRepeatGroupChangeHandler,
   PropsWithShowMinimalViewAttribute
 } from '../../../interfaces/renderProps.interface';
-import { nanoid } from 'nanoid';
 import useReadOnly from '../../../hooks/useReadOnly';
 import GroupTableView from './GroupTableView';
 import type { GroupTableRowModel } from '../../../interfaces/groupTable.interface';
 import { getGroupTableItemsToUpdate } from '../../../utils/groupTable';
 import useGroupTableRows from '../../../hooks/useGroupTableRows';
 import { flushSync } from 'react-dom';
+import { generateNewRepeatId } from '../../../utils/repeatId';
 
 interface GroupTableProps
   extends PropsWithQrRepeatGroupChangeHandler,
@@ -62,7 +62,10 @@ function GroupTable(props: GroupTableProps) {
 
   const readOnly = useReadOnly(qItem, parentIsReadOnly);
 
-  const { tableRows, selectedIds, setTableRows, setSelectedIds } = useGroupTableRows(qrItems);
+  const { tableRows, selectedIds, setTableRows, setSelectedIds } = useGroupTableRows(
+    qItem.linkId,
+    qrItems
+  );
 
   // Generate item labels as table headers
   const qItems = qItem.item;
@@ -101,7 +104,7 @@ function GroupTable(props: GroupTableProps) {
     const updatedTableRows = [...tableRows];
 
     const rowToRemove = updatedTableRows[index];
-    const updatedSelectedIds = selectedIds.filter((id) => id !== rowToRemove.nanoId);
+    const updatedSelectedIds = selectedIds.filter((id) => id !== rowToRemove.id);
 
     updatedTableRows.splice(index, 1);
 
@@ -114,21 +117,21 @@ function GroupTable(props: GroupTableProps) {
   }
 
   function handleAddRow() {
-    const newRowNanoId = nanoid();
+    const newRowId = generateNewRepeatId(qItem.linkId);
     setTableRows([
       ...tableRows,
       {
-        nanoId: newRowNanoId,
+        id: newRowId,
         qrItem: null
       }
     ]);
-    setSelectedIds([...selectedIds, newRowNanoId]);
+    setSelectedIds([...selectedIds, newRowId]);
   }
 
   function handleSelectAll() {
     // deselect all if all are selected, otherwise select all
     const updatedTableIds =
-      selectedIds.length === tableRows.length ? [] : tableRows.map((tableRow) => tableRow.nanoId);
+      selectedIds.length === tableRows.length ? [] : tableRows.map((tableRow) => tableRow.id);
     setSelectedIds(updatedTableIds);
     onQrRepeatGroupChange({
       linkId: qItem.linkId,
@@ -136,12 +139,12 @@ function GroupTable(props: GroupTableProps) {
     });
   }
 
-  function handleSelectRow(nanoId: string) {
+  function handleSelectRow(rowId: string) {
     const updatedSelectedIds = [...selectedIds];
 
-    const index = updatedSelectedIds.indexOf(nanoId);
+    const index = updatedSelectedIds.indexOf(rowId);
     if (index === -1) {
-      updatedSelectedIds.push(nanoId);
+      updatedSelectedIds.push(rowId);
     } else {
       updatedSelectedIds.splice(index, 1);
     }

package/src/components/FormComponents/Tables/GroupTableBody.tsx

@@ -41,7 +41,7 @@ interface GroupTableBodyProps
   qItemsIndexMap: Record<string, number>;
   onRowChange: (newQrRow: QuestionnaireResponseItem, index: number) => void;
   onRemoveRow: (index: number) => void;
-  onSelectRow: (nanoId: string) => void;
+  onSelectRow: (rowId: string) => void;
   onReorderRows: (newTableRows: GroupTableRowModel[]) => void;
 }
 
@@ -80,8 +80,8 @@ function GroupTableBody(props: GroupTableBodyProps) {
       <Droppable droppableId="gtable_rows" direction="vertical">
         {(droppableProvided, snapshot) => (
           <TableBody ref={droppableProvided.innerRef} {...droppableProvided.droppableProps}>
-            {tableRows.map(({ nanoId, qrItem: nullableQrItem }, index) => {
-              const itemIsSelected = selectedIds.indexOf(nanoId) !== -1;
+            {tableRows.map(({ id, qrItem: nullableQrItem }, index) => {
+              const itemIsSelected = selectedIds.indexOf(id) !== -1;
               const answeredQrItem = createEmptyQrItem(tableQItem, undefined);
               if (nullableQrItem) {
                 answeredQrItem.item = nullableQrItem.item;
@@ -89,9 +89,9 @@ function GroupTableBody(props: GroupTableBodyProps) {
 
               return (
                 <GroupTableRow
-                  key={nanoId}
+                  key={id}
                   index={index}
-                  nanoId={nanoId}
+                  rowId={id}
                   tableQItem={tableQItem}
                   answeredQrItem={answeredQrItem}
                   nullableQrItem={nullableQrItem}

package/src/components/FormComponents/Tables/GroupTableRow.tsx

@@ -39,7 +39,7 @@ interface GroupTableRowProps
     PropsWithShowMinimalViewAttribute,
     PropsWithParentIsReadOnlyAttribute,
     TableRowProps {
-  nanoId: string;
+  rowId: string;
   index: number;
   tableQItem: QuestionnaireItem;
   answeredQrItem: QuestionnaireResponseItem;
@@ -58,7 +58,7 @@ interface GroupTableRowProps
 
 function GroupTableRow(props: GroupTableRowProps) {
   const {
-    nanoId,
+    rowId,
     index,
     tableQItem,
     answeredQrItem,
@@ -78,7 +78,7 @@ function GroupTableRow(props: GroupTableRowProps) {
 
   if (isRepeated) {
     return (
-      <Draggable draggableId={nanoId} index={index}>
+      <Draggable draggableId={rowId} index={index}>
         {(draggableProvided, snapshot) => (
           <StyledGroupTableRow
             itemIsDragged={snapshot.isDragging}
@@ -106,7 +106,7 @@ function GroupTableRow(props: GroupTableRowProps) {
                 <SelectRowButton
                   isSelected={itemIsSelected}
                   readOnly={readOnly}
-                  onSelectItem={() => onSelectRow(nanoId)}
+                  onSelectItem={() => onSelectRow(rowId)}
                 />
               </>
             )}
@@ -150,7 +150,7 @@ function GroupTableRow(props: GroupTableRowProps) {
           <SelectRowButton
             isSelected={itemIsSelected}
             readOnly={readOnly}
-            onSelectItem={() => onSelectRow(nanoId)}
+            onSelectItem={() => onSelectRow(rowId)}
           />
         </>
       )}

package/src/components/FormComponents/Tables/GroupTableView.tsx

@@ -54,7 +54,7 @@ interface GroupTableViewProps
   onAddRow: () => void;
   onRowChange: (newQrRow: QuestionnaireResponseItem, index: number) => void;
   onRemoveRow: (index: number) => void;
-  onSelectRow: (nanoId: string) => void;
+  onSelectRow: (rowId: string) => void;
   onSelectAll: () => void;
   onReorderRows: (newTableRows: GroupTableRowModel[]) => void;
 }

package/src/components/Renderer/FormTopLevelItem.tsx

@@ -34,8 +34,10 @@ import useHidden from '../../hooks/useHidden';
 import GroupItemSwitcher from '../FormComponents/GroupItem/GroupItemSwitcher';
 import useReadOnly from '../../hooks/useReadOnly';
 import Box from '@mui/material/Box';
-import { isSpecificItemControl } from '../../utils';
+import { isRepeatItemAndNotCheckbox, isSpecificItemControl } from '../../utils';
 import GroupTable from '../FormComponents/Tables/GroupTable';
+import RepeatItem from '../FormComponents/RepeatItem/RepeatItem';
+import GridGroup from '../FormComponents/GridGroup/GridGroup';
 
 interface FormTopLevelItemProps
   extends PropsWithQrItemChangeHandler,
@@ -127,6 +129,20 @@ function FormTopLevelItem(props: FormTopLevelItemProps) {
 
   // If form is untabbed, it is rendered as a regular group
   if (itemIsGroup) {
+    // Item is 'grid'
+    const itemIsGrid = isSpecificItemControl(topLevelQItem, 'grid');
+    if (itemIsGrid) {
+      return (
+        <GridGroup
+          qItem={topLevelQItem}
+          qrItem={topLevelQRItem}
+          groupCardElevation={1}
+          parentIsReadOnly={parentIsReadOnly}
+          onQrItemChange={onQrItemChange}
+        />
+      );
+    }
+
     // GroupTable "gtable" can be rendered with either repeats:true or false
     if (isSpecificItemControl(topLevelQItem, 'gtable')) {
       return (
@@ -156,6 +172,22 @@ function FormTopLevelItem(props: FormTopLevelItemProps) {
   }
 
   // Otherwise, it is rendered as a non-group item
+  const itemRepeatsAndIsNotCheckbox = isRepeatItemAndNotCheckbox(topLevelQItem);
+  if (itemRepeatsAndIsNotCheckbox) {
+    return (
+      <Box mt={1}>
+        <RepeatItem
+          key={topLevelQItem.linkId}
+          qItem={topLevelQItem}
+          qrItem={topLevelQRItem}
+          groupCardElevation={1}
+          parentIsReadOnly={readOnly}
+          onQrItemChange={onQrItemChange}
+        />
+      </Box>
+    );
+  }
+
   return (
     <Box mt={1}>
       <SingleItem

package/src/hooks/useDateValidation.tsx

@@ -55,8 +55,8 @@ function useDateValidation(input: string, parseFail: boolean = false): string |
 
     const matches = input.split('/');
 
-    if (validateTwoMatches(matches[0], matches[1])) {
-      return null;
+    if (!validateTwoMatches(matches[0], matches[1])) {
+      return 'Input is an invalid date.';
     }
 
     return null;

package/src/hooks/useGroupTableRows.ts

@@ -19,12 +19,12 @@ import { useState } from 'react';
 import useInitialiseGroupTable from './useInitialiseGroupTable';
 import type { QuestionnaireResponseItem } from 'fhir/r4';
 
-function useGroupTableRows(qrItems: QuestionnaireResponseItem[]) {
-  const initialisedGroupTableRows = useInitialiseGroupTable(qrItems);
+function useGroupTableRows(linkId: string, qrItems: QuestionnaireResponseItem[]) {
+  const initialisedGroupTableRows = useInitialiseGroupTable(linkId, qrItems);
 
   const [tableRows, setTableRows] = useState(initialisedGroupTableRows);
   const [selectedIds, setSelectedIds] = useState<string[]>(
-    initialisedGroupTableRows.map((row) => row.nanoId)
+    initialisedGroupTableRows.map((row) => row.id)
   );
 
   return { tableRows, selectedIds, setTableRows, setSelectedIds };

package/src/hooks/useInitialiseGroupTable.ts

@@ -16,27 +16,23 @@
  */
 
 import type { QuestionnaireResponseItem } from 'fhir/r4';
-import { nanoid } from 'nanoid';
 import type { GroupTableRowModel } from '../interfaces/groupTable.interface';
+import { generateExistingRepeatId, generateNewRepeatId } from '../utils/repeatId';
 
-function useInitialiseGroupTable(qrItems: QuestionnaireResponseItem[]): GroupTableRowModel[] {
-  let initialGroupTableRows: GroupTableRowModel[] = [
-    {
-      nanoId: nanoid(),
-      qrItem: null
-    }
-  ];
-
-  if (qrItems.length > 0) {
-    initialGroupTableRows = qrItems.map((qrItem) => {
-      return {
-        nanoId: nanoid(),
-        qrItem
-      };
-    });
+function useInitialiseGroupTable(
+  linkId: string,
+  qrItems: QuestionnaireResponseItem[]
+): GroupTableRowModel[] {
+  if (qrItems.length === 0) {
+    return [{ id: generateNewRepeatId(linkId), qrItem: null }];
   }
 
-  return initialGroupTableRows;
+  return qrItems.map((qrItem, index) => {
+    return {
+      id: generateExistingRepeatId(linkId, index),
+      qrItem
+    };
+  });
 }
 
 export default useInitialiseGroupTable;

package/src/hooks/useInitialiseRepeatAnswers.ts

@@ -16,26 +16,23 @@
  */
 
 import type { QuestionnaireResponseItem, QuestionnaireResponseItemAnswer } from 'fhir/r4';
-import { nanoid } from 'nanoid';
 import { useMemo } from 'react';
+import { generateExistingRepeatId, generateNewRepeatId } from '../utils/repeatId';
 
 function useInitialiseRepeatAnswers(
+  linkId: string,
   qrItem: QuestionnaireResponseItem | null
 ): (QuestionnaireResponseItemAnswer | null)[] {
   return useMemo(() => {
-    let initialRepeatAnswers: (QuestionnaireResponseItemAnswer | null)[] = [{ id: nanoid() }];
-
-    if (qrItem?.answer) {
-      initialRepeatAnswers = qrItem.answer.map((answer) => {
-        if (!answer.id) {
-          answer.id = nanoid();
-        }
-        return answer;
-      });
+    if (!qrItem?.answer) {
+      return [{ id: generateNewRepeatId(linkId) }];
     }
 
-    return initialRepeatAnswers;
-  }, [qrItem]);
+    return qrItem.answer.map((answer, index) => ({
+      ...answer,
+      id: answer.id ?? generateExistingRepeatId(linkId, index)
+    }));
+  }, [linkId, qrItem]);
 }
 
 export default useInitialiseRepeatAnswers;

package/src/hooks/useInitialiseRepeatGroups.ts

@@ -15,38 +15,27 @@
  * limitations under the License.
  */
 
-import type { QuestionnaireItem, QuestionnaireResponseItem } from 'fhir/r4';
-import { nanoid } from 'nanoid';
+import type { QuestionnaireResponseItem } from 'fhir/r4';
 import type { RepeatGroupSingle } from '../interfaces/repeatGroup.interface';
 import { useMemo } from 'react';
+import { generateExistingRepeatId, generateNewRepeatId } from '../utils/repeatId';
 
 function useInitialiseRepeatGroups(
-  qItem: QuestionnaireItem,
+  linkId: string,
   qrItems: QuestionnaireResponseItem[]
 ): RepeatGroupSingle[] {
-  return useMemo(
-    () => {
-      let initialRepeatGroupAnswers: RepeatGroupSingle[] = [
-        {
-          nanoId: nanoid(),
-          qrItem: null
-        }
-      ];
+  return useMemo(() => {
+    if (qrItems.length === 0) {
+      return [{ id: generateNewRepeatId(linkId), qrItem: null }];
+    }
 
-      if (qrItems.length > 0) {
-        initialRepeatGroupAnswers = qrItems.map((qrItem) => {
-          return {
-            nanoId: nanoid(),
-            qrItem
-          };
-        });
-      }
-      return initialRepeatGroupAnswers;
-    },
-    // Requires checking of both qItem and qrItems
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-    [qItem, qrItems]
-  );
+    return qrItems.map((qrItem, index) => {
+      return {
+        id: generateExistingRepeatId(linkId, index),
+        qrItem
+      };
+    });
+  }, [linkId, qrItems]);
 }
 
 export default useInitialiseRepeatGroups;

package/src/hooks/useRepeatGroups.ts

@@ -19,6 +19,7 @@ import type { Dispatch, SetStateAction } from 'react';
 import { useEffect, useState } from 'react';
 import type { RepeatGroupSingle } from '../interfaces/repeatGroup.interface';
 import _isEqual from 'lodash/isEqual';
+import type { QuestionnaireResponseItem } from 'fhir/r4';
 
 function useRepeatGroups(
   valueFromProps: RepeatGroupSingle[]
@@ -27,10 +28,13 @@ function useRepeatGroups(
 
   useEffect(
     () => {
-      const valueFromPropsQRItems = valueFromProps.map(
-        (repeatGroupSingle) => repeatGroupSingle.qrItem
-      );
-      const repeatGroupsQRItems = repeatGroups.map((repeatGroupSingle) => repeatGroupSingle.qrItem);
+      const valueFromPropsQRItems = valueFromProps
+        .map((repeatGroupSingle) => repeatGroupSingle.qrItem)
+        .filter((qrItem): qrItem is QuestionnaireResponseItem => qrItem !== null);
+
+      const repeatGroupsQRItems = repeatGroups
+        .map((repeatGroupSingle) => repeatGroupSingle.qrItem)
+        .filter((qrItem): qrItem is QuestionnaireResponseItem => qrItem !== null);
 
       if (!_isEqual(valueFromPropsQRItems, repeatGroupsQRItems)) {
         setRepeatGroups(valueFromProps);

package/src/index.ts

@@ -42,6 +42,7 @@ export {
   destroyForm,
   getResponse,
   removeEmptyAnswersFromResponse,
+  removeInternalIdsFromResponse,
   isSpecificItemControl,
   isRepeatItemAndNotCheckbox,
   initialiseQuestionnaireResponse,

package/src/interfaces/groupTable.interface.ts

@@ -18,6 +18,6 @@
 import type { QuestionnaireResponseItem } from 'fhir/r4';
 
 export interface GroupTableRowModel {
-  nanoId: string;
+  id: string;
   qrItem: QuestionnaireResponseItem | null;
 }

package/src/interfaces/repeatGroup.interface.ts

@@ -23,6 +23,6 @@ export interface QrRepeatGroup {
 }
 
 export interface RepeatGroupSingle {
-  nanoId: string;
+  id: string;
   qrItem: QuestionnaireResponseItem | null;
 }

package/src/stories/assets/questionnaires/QIdRemoverDebugger.ts

@@ -0,0 +1,161 @@
+/*
+ * Copyright 2024 Commonwealth Scientific and Industrial Research
+ * Organisation (CSIRO) ABN 41 687 119 230.
+ *
+ * Licensed 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 type { Questionnaire } from 'fhir/r4';
+
+export const qMyPatient: Questionnaire = {
+  resourceType: 'Questionnaire',
+  id: 'canshare-myPatient1',
+  meta: {
+    versionId: '9',
+    lastUpdated: '2024-09-18T07:23:35.7317908+00:00'
+  },
+  extension: [
+    {
+      extension: [
+        {
+          url: 'name',
+          valueId: 'LaunchPatient'
+        },
+        {
+          url: 'type',
+          valueCode: 'Patient'
+        },
+        {
+          url: 'description',
+          valueString: 'The patient that is to be used to pre-populate the form'
+        }
+      ],
+      url: 'http://hl7.org/fhir/uv/sdc/StructureDefinition/sdc-questionnaire-launchContext'
+    },
+    {
+      extension: [
+        {
+          url: 'name',
+          valueId: 'LaunchPractitioner'
+        },
+        {
+          url: 'type',
+          valueCode: 'Practitioner'
+        },
+        {
+          url: 'description',
+          valueString: 'The practitioner that is to be used to pre-populate the form'
+        }
+      ],
+      url: 'http://hl7.org/fhir/uv/sdc/StructureDefinition/sdc-questionnaire-launchContext'
+    },
+    {
+      url: 'http://hl7.org/fhir/uv/sdc/StructureDefinition/sdc-questionnaire-itemExtractionContext',
+      valueCode: 'Patient'
+    }
+  ],
+  url: 'http://canshare.co.nz/questionnaire/myPatient1',
+  name: 'myPatient1',
+  status: 'active',
+  publisher: 'DEMO: David Hay',
+  useContext: [
+    {
+      code: {
+        system: 'http://terminology.hl7.org/CodeSystem/usage-context-type',
+        code: 'user',
+        display: 'User Type'
+      },
+      valueCodeableConcept: {
+        coding: [
+          {
+            code: 'extract',
+            display: 'Demo Extract'
+          }
+        ]
+      }
+    }
+  ],
+  item: [
+    {
+      linkId: 'myPatient1',
+      text: 'myPatient1',
+      type: 'group',
+      item: [
+        {
+          linkId: 'myPatient1.name',
+          definition: 'http://hl7.org/fhir/StructureDefinition/Patient#Patient.name',
+          text: 'name *',
+          type: 'group',
+          repeats: true,
+          item: [
+            {
+              linkId: 'myPatient1.name.first',
+              definition: 'http://hl7.org/fhir/StructureDefinition/Patient#Patient.name.given',
+              text: 'firstName *',
+              type: 'string',
+              repeats: true
+            },
+            {
+              linkId: 'myPatient1.name.lastName',
+              definition: 'http://hl7.org/fhir/StructureDefinition/Patient#Patient.name.family',
+              text: 'lastName',
+              type: 'string'
+            }
+          ]
+        },
+        {
+          linkId: 'myPatient1.hair',
+          definition: 'http://hl7.org/fhir/StructureDefinition/Patient#Patient.extension',
+          text: 'hair',
+          type: 'group',
+          item: [
+            {
+              linkId: 'myPatient1.hair.colour',
+              definition:
+                'http://hl7.org/fhir/StructureDefinition/Patient#Patient.extension.valueString',
+              text: 'colour',
+              type: 'string'
+            },
+            {
+              linkId: 'myPatient1.hair.url',
+              definition: 'http://hl7.org/fhir/StructureDefinition/Patient#Patient.extension.url',
+              text: 'url',
+              type: 'string'
+            }
+          ]
+        },
+        {
+          linkId: 'myPatient1.religion',
+          definition: 'http://hl7.org/fhir/StructureDefinition/Patient#Patient.extension',
+          text: 'religion',
+          type: 'group',
+          item: [
+            {
+              linkId: 'myPatient1.religion.brand',
+              definition:
+                'http://hl7.org/fhir/StructureDefinition/Patient#Patient.extension.valueString',
+              text: 'brand',
+              type: 'string'
+            },
+            {
+              linkId: 'myPatient1.religion.url1',
+              definition: 'http://hl7.org/fhir/StructureDefinition/Patient#Patient.extension.url',
+              text: 'url',
+              type: 'string'
+            }
+          ]
+        }
+      ]
+    }
+  ]
+};

package/src/stories/storybookWrappers/BuildFormButtonForStorybook.tsx

@@ -44,7 +44,7 @@ function BuildFormButtonForStorybook(props: BuildFormButtonProps) {
     <Box display="flex" mb={0.5} alignItems="center" columnGap={3}>
       <Tooltip title="Build form with questionnaire response" placement="right">
         <IconButton onClick={handleBuildForm} size="small" color="primary">
-          <Iconify icon="ph:hammer" sx={{ mb: 0.5 }} />
+          <Iconify icon="ph:hammer" />
         </IconButton>
       </Tooltip>
     </Box>

package/src/stories/storybookWrappers/IdRemoverButtonForStorybook.tsx

@@ -0,0 +1,51 @@
+/*
+ * Copyright 2024 Commonwealth Scientific and Industrial Research
+ * Organisation (CSIRO) ABN 41 687 119 230.
+ *
+ * Licensed 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.
+ */
+
+// @ts-ignore
+import React from 'react';
+import type { Questionnaire, QuestionnaireResponse } from 'fhir/r4';
+import { Box, IconButton, Tooltip } from '@mui/material';
+import ContentCutIcon from '@mui/icons-material/ContentCut';
+import { useQuestionnaireResponseStore } from '../../stores';
+import { removeInternalIdsFromResponse } from '../../utils/manageForm';
+
+interface IdRemoverButtonProps {
+  questionnaire: Questionnaire;
+  questionnaireResponse: QuestionnaireResponse;
+}
+
+function IdRemoverButtonForStorybook(props: IdRemoverButtonProps) {
+  const { questionnaire, questionnaireResponse } = props;
+
+  const updateResponse = useQuestionnaireResponseStore.use.updateResponse();
+
+  async function handleRemoveIds() {
+    updateResponse(removeInternalIdsFromResponse(questionnaire, questionnaireResponse));
+  }
+
+  return (
+    <Box display="flex" mb={0.5} alignItems="center" columnGap={3}>
+      <Tooltip title="Remove IDs from questionnaire response" placement="right">
+        <IconButton onClick={handleRemoveIds} size="small" color="primary">
+          <ContentCutIcon />
+        </IconButton>
+      </Tooltip>
+    </Box>
+  );
+}
+
+export default IdRemoverButtonForStorybook;