(feat) Add copy and download buttons to schema editor

openmrs · Aug 24, 2023 · 63357f6 · 63357f6
1 parent 9fe0f5d
commit 63357f6
Show file tree

Hide file tree

Showing 6 changed files with 58 additions and 11 deletions.
diff --git a/src/components/dashboard/dashboard.component.tsx b/src/components/dashboard/dashboard.component.tsx
@@ -181,7 +181,6 @@ function ActionButtons({
         href={window.URL.createObjectURL(downloadableSchema)}
       >
         <Button
-          className={styles.downloadButton}
           enterDelayMs={300}
           renderIcon={Download}
           kind={"ghost"}

diff --git a/src/components/form-editor/form-editor.component.tsx b/src/components/form-editor/form-editor.component.tsx
@@ -1,4 +1,4 @@
-import React, { useCallback, useEffect, useState } from "react";
+import React, { useCallback, useEffect, useMemo, useState } from "react";
 import {
   Button,
   Column,
@@ -16,6 +16,7 @@ import {
   TabPanels,
   TabPanel,
 } from "@carbon/react";
+import { Download, Replicate } from "@carbon/react/icons";
 import { useParams } from "react-router-dom";
 import { useTranslation } from "react-i18next";
 import { ExtensionSlot } from "@openmrs/esm-framework";
@@ -233,6 +234,18 @@ const FormEditor: React.FC = () => {
     );
   };
 
+  const downloadableSchema = useMemo(
+    () =>
+      new Blob([JSON.stringify(schema, null, 2)], {
+        type: "application/json",
+      }),
+    [schema]
+  );
+
+  const handleCopySchema = useCallback(() => {
+    navigator.clipboard.writeText(stringifiedSchema);
+  }, [stringifiedSchema]);
+
   return (
     <>
       <div className={styles.breadcrumbsContainer}>
@@ -260,9 +273,38 @@ const FormEditor: React.FC = () => {
               </Button>
             </div>
             <div>
-              <span className={styles.tabHeading}>
-                {t("schemaEditor", "Schema Editor")}
-              </span>
+              <div className={styles.heading}>
+                <span className={styles.tabHeading}>
+                  {t("schemaEditor", "Schema Editor")}
+                </span>
+                {schema ? (
+                  <>
+                    <Button
+                      kind="ghost"
+                      size="md"
+                      enterDelayMs={300}
+                      iconDescription={t("copySchema", "Copy schema")}
+                      onClick={handleCopySchema}
+                      renderIcon={(props) => <Replicate size={16} {...props} />}
+                      hasIconOnly
+                    />
+                    <a
+                      download={`${form?.name}.json`}
+                      href={window.URL.createObjectURL(downloadableSchema)}
+                    >
+                      <Button
+                        enterDelayMs={300}
+                        renderIcon={Download}
+                        kind={"ghost"}
+                        iconDescription={t("downloadSchema", "Download schema")}
+                        hasIconOnly
+                        size="md"
+                        tooltipAlignment="start"
+                      />
+                    </a>
+                  </>
+                ) : null}
+              </div>
               {formError ? (
                 <Error
                   error={formError}

diff --git a/src/components/form-editor/form-editor.scss b/src/components/form-editor/form-editor.scss
@@ -53,6 +53,12 @@
   padding: 1rem;
 }
 
+.heading {
+  display: flex;
+  margin-right: 1rem;
+  align-items: center;
+}
+
 .tabHeading {
   display: flex;
   align-items: center;

diff --git a/src/components/interactive-builder/draggable-question.component.tsx b/src/components/interactive-builder/draggable-question.component.tsx
@@ -63,7 +63,7 @@ export const DraggableQuestion: React.FC<DraggableQuestionProps> = ({
         <Button
           kind="ghost"
           size="sm"
-          enterDelayMs={200}
+          enterDelayMs={300}
           iconDescription={t("duplicateQuestion", "Duplicate question")}
           onClick={() => {
             if (!isDragging) {
@@ -76,7 +76,7 @@ export const DraggableQuestion: React.FC<DraggableQuestionProps> = ({
         <Button
           kind="ghost"
           size="sm"
-          enterDelayMs={200}
+          enterDelayMs={300}
           iconDescription={t("editQuestion", "Edit question")}
           onClick={() => {
             if (!isDragging) {
@@ -88,7 +88,7 @@ export const DraggableQuestion: React.FC<DraggableQuestionProps> = ({
         />
         <Button
           hasIconOnly
-          enterDelayMs={200}
+          enterDelayMs={300}
           iconDescription={t("deleteQuestion", "Delete question")}
           kind="ghost"
           onClick={handleDeleteButtonClick}

diff --git a/src/components/interactive-builder/editable-value.component.tsx b/src/components/interactive-builder/editable-value.component.tsx
@@ -45,7 +45,7 @@ const EditableValue: React.FC<EditableValueProps> = ({
       <Button
         kind="ghost"
         size="sm"
-        enterDelayMs={200}
+        enterDelayMs={300}
         iconDescription={t("editButton", "Edit {elementType}", {
           elementType: elementType,
         })}

diff --git a/src/components/interactive-builder/interactive-builder.component.tsx b/src/components/interactive-builder/interactive-builder.component.tsx
@@ -471,7 +471,7 @@ const InteractiveBuilder: React.FC<InteractiveBuilderProps> = ({
                   </div>
                   <Button
                     hasIconOnly
-                    enterDelayMs={200}
+                    enterDelayMs={300}
                     iconDescription={t("deletePage", "Delete page")}
                     kind="ghost"
                     onClick={() => {
@@ -511,7 +511,7 @@ const InteractiveBuilder: React.FC<InteractiveBuilderProps> = ({
                               </div>
                               <Button
                                 hasIconOnly
-                                enterDelayMs={200}
+                                enterDelayMs={300}
                                 iconDescription={t(
                                   "deleteSection",
                                   "Delete section"