add clear log button at bottom of log panel

onflow · Sep 21, 2023 · e94ed67 · e94ed67
1 parent bbc58fb
commit e94ed67
Show file tree

Hide file tree

Showing 3 changed files with 42 additions and 1 deletion.
diff --git a/src/components/Editor/BottomEditorPanel/RenderResponse/index.tsx b/src/components/Editor/BottomEditorPanel/RenderResponse/index.tsx
@@ -7,10 +7,11 @@ import { useProject } from 'providers/Project/projectHooks';
 import { PROJECT_SERIALIZATION_KEY } from 'providers/Project/projectMutator';
 import { SXStyles } from 'src/types';
 import { Flex } from 'theme-ui';
+import Button from 'components/Button';
 import { getResultType } from 'components/Editor/CadenceEditor/ControlPanel/utils';
 
 export const RenderResponse = () => {
-  const { active } = useProject();
+  const { active, clearLogPanel } = useProject();
   const { data, error, loading } = useQuery(GET_CACHED_EXECUTION_RESULTS, {
     context: {
       serializationKey: PROJECT_SERIALIZATION_KEY,
@@ -38,6 +39,10 @@ export const RenderResponse = () => {
       overflowY: 'auto',
       // height: '100%',
     },
+    button: {
+      marginTop: 'auto',
+      padding: '0.5rem',
+    },
   };
 
   return (
@@ -51,6 +56,16 @@ export const RenderResponse = () => {
             ),
           )
         : 'Welcome to the Playground!'}
+      {filteredResults.length > 0 && (
+        <Button
+          sx={styles.button}
+          variant="secondary"
+          size="sm"
+          onClick={() => clearLogPanel(resultType)}
+        >
+          Clear Log Contents
+        </Button>
+      )}
     </Flex>
   );
 };
diff --git a/src/providers/Project/index.tsx b/src/providers/Project/index.tsx
@@ -92,6 +92,7 @@ export interface ProjectContextValue {
   setCurrentEditor: (editor: monacoEditor.ICodeEditor) => void;
   currentEditor: monacoEditor.ICodeEditor | null;
   hightlightedLines: number[];
+  clearLogPanel: (resultType: string) => void;
 }
 
 export const ProjectContext: React.Context<ProjectContextValue> =
@@ -391,6 +392,16 @@ export const ProjectProvider: React.FC<ProjectProviderProps> = ({
     return res;
   };
 
+  const clearLogPanel = async (resultType: string) => {
+    try {
+      await mutator.clearLog(resultType);
+    } catch (e) {
+      console.error(e);
+      checkAppErrors();
+    } finally {
+      setIsSaving(false);
+    }
+  };
   const updateTransactionTemplate = async (
     templateId: string,
     script: string,
@@ -868,6 +879,7 @@ export const ProjectProvider: React.FC<ProjectProviderProps> = ({
         setCurrentEditor,
         currentEditor,
         hightlightedLines,
+        clearLogPanel,
       }}
     >
       {children}

diff --git a/src/providers/Project/projectMutator.ts b/src/providers/Project/projectMutator.ts
@@ -8,6 +8,7 @@ import {
   Project,
 } from 'api/apollo/generated/graphql';
 import {
+  CLEAR_EXECUTION_RESULTS,
   CREATE_CONTRACT_DEPLOYMENT,
   CREATE_CONTRACT_TEMPLATE,
   CREATE_PROJECT,
@@ -333,6 +334,19 @@ export default class ProjectMutator {
     return res;
   }
 
+  async clearLog(resultType: string) {
+    const res = await this.client.mutate({
+      mutation: CLEAR_EXECUTION_RESULTS,
+      variables: {
+        resultType,
+      },
+      context: {
+        serializationKey: PROJECT_SERIALIZATION_KEY,
+      },
+    });
+    return res;
+  }
+
   async updateTransactionTemplate(
     templateId: string,
     script: string,