(feat) Minimal tweaks to the copy button feature (#183)

src/components/form-editor/form-editor.component.tsx

@@ -3,6 +3,7 @@ import {
   Button,
   Column,
   ComposedModal,
+  CopyButton,
   InlineLoading,
   InlineNotification,
   Form,
@@ -16,12 +17,11 @@ import {
   TabPanels,
   TabPanel,
 } from "@carbon/react";
-import { Download, Replicate } from "@carbon/react/icons";
+import { Download } from "@carbon/react/icons";
 import { useParams } from "react-router-dom";
 import { useTranslation } from "react-i18next";
 import { ExtensionSlot } from "@openmrs/esm-framework";
 import type { OHRIFormSchema } from "@openmrs/openmrs-form-engine-lib";
-
 import type { Schema, RouteParams } from "../../types";
 import { useClobdata } from "../../hooks/useClobdata";
 import { useForm } from "../../hooks/useForm";
@@ -62,6 +62,7 @@ const FormEditor: React.FC = () => {
   const [stringifiedSchema, setStringifiedSchema] = useState(
     schema ? JSON.stringify(schema, null, 2) : ""
   );
+  const [copied, setCopied] = useState(false);
 
   const isLoadingFormOrSchema =
     formUuid && (isLoadingClobdata || isLoadingForm);
@@ -244,6 +245,7 @@ const FormEditor: React.FC = () => {
 
   const handleCopySchema = useCallback(() => {
     navigator.clipboard.writeText(stringifiedSchema);
+    setCopied(true);
   }, [stringifiedSchema]);
 
   return (
@@ -275,18 +277,17 @@ const FormEditor: React.FC = () => {
             <div>
               <div className={styles.heading}>
                 <span className={styles.tabHeading}>
-                  {t("schemaEditor", "Schema Editor")}
+                  {t("schemaEditor", "Schema editor")}
                 </span>
                 {schema ? (
                   <>
-                    <Button
-                      kind="ghost"
-                      size="md"
+                    <CopyButton
+                      align="top"
+                      className="cds--btn--md"
                       enterDelayMs={300}
                       iconDescription={t("copySchema", "Copy schema")}
+                      kind="ghost"
                       onClick={handleCopySchema}
-                      renderIcon={(props) => <Replicate size={16} {...props} />}
-                      hasIconOnly
                     />
                     <a
                       download={`${form?.name}.json`}

src/components/interactive-builder/draggable-question.component.tsx

@@ -2,44 +2,45 @@ import React from "react";
 import { useDraggable } from "@dnd-kit/core";
 import { CSS } from "@dnd-kit/utilities";
 import { useTranslation } from "react-i18next";
-import { Button } from "@carbon/react";
-import { Edit, Replicate, TrashCan, Draggable } from "@carbon/react/icons";
+import { Button, CopyButton } from "@carbon/react";
+import { Draggable, Edit, TrashCan } from "@carbon/react/icons";
 import type { Question } from "../../types";
 import styles from "./draggable-question.scss";
 
 type DraggableQuestionProps = {
-  allQuestions: Array<Question>;
   question: Question;
   pageIndex: number;
   sectionIndex: number;
   questionIndex: number;
-  duplicateQuestion: (
+  handleDuplicateQuestion: (
     question: Question,
     pageId: number,
     sectionId: number
   ) => void;
   handleEditButtonClick: (question: Question) => void;
   handleDeleteButtonClick: (question: Question) => void;
+  questionCount: number;
 };
 
 export const DraggableQuestion: React.FC<DraggableQuestionProps> = ({
   question,
   pageIndex,
   sectionIndex,
   questionIndex,
-  duplicateQuestion,
+  handleDuplicateQuestion,
   handleDeleteButtonClick,
   handleEditButtonClick,
-  allQuestions,
+  questionCount,
 }) => {
   const { t } = useTranslation();
   const draggableId = `question-${pageIndex}-${sectionIndex}-${questionIndex}`;
 
   const { attributes, listeners, transform, isDragging, setNodeRef } =
     useDraggable({
       id: draggableId,
-      disabled: allQuestions.length <= 1,
+      disabled: questionCount <= 1,
     });
+
   const style = {
     transform: CSS.Translate.toString(transform),
   };
@@ -60,40 +61,38 @@ export const DraggableQuestion: React.FC<DraggableQuestionProps> = ({
         <p className={styles.questionLabel}>{question.label}</p>
       </div>
       <div className={styles.buttonsContainer}>
-        <Button
-          kind="ghost"
-          size="sm"
-          enterDelayMs={300}
+        <CopyButton
+          align="top"
+          className="cds--btn--sm"
+          feedback={t("duplicated", "Duplicated") + "!"}
           iconDescription={t("duplicateQuestion", "Duplicate question")}
-          onClick={() => {
-            if (!isDragging) {
-              duplicateQuestion(question, pageIndex, sectionIndex);
-            }
-          }}
-          renderIcon={(props) => <Replicate size={16} {...props} />}
-          hasIconOnly
+          kind="ghost"
+          onClick={() =>
+            !isDragging &&
+            handleDuplicateQuestion(question, pageIndex, sectionIndex)
+          }
         />
         <Button
-          kind="ghost"
-          size="sm"
           enterDelayMs={300}
+          hasIconOnly
           iconDescription={t("editQuestion", "Edit question")}
+          kind="ghost"
           onClick={() => {
             if (!isDragging) {
               handleEditButtonClick(question);
             }
           }}
           renderIcon={(props) => <Edit size={16} {...props} />}
-          hasIconOnly
+          size="md"
         />
         <Button
-          hasIconOnly
           enterDelayMs={300}
+          hasIconOnly
           iconDescription={t("deleteQuestion", "Delete question")}
           kind="ghost"
           onClick={handleDeleteButtonClick}
           renderIcon={(props) => <TrashCan size={16} {...props} />}
-          size="sm"
+          size="md"
         />
       </div>
     </div>