Only show controls when control=1 (#319)

* only show controls when control=1 * Fix embed mode tests by latest changes * ignore cypress screenshots
statelyai · Nov 18, 2021 · 7e0c490 · 7e0c490
1 parent 452a9c8
commit 7e0c490
Show file tree

Hide file tree

Showing 4 changed files with 25 additions and 15 deletions.
diff --git a/.gitignore b/.gitignore
@@ -25,4 +25,5 @@ yarn-error.log*
 *.generated.*
 public/monaco-editor
 cypress/videos
+cypress/screenshots
 .next
diff --git a/cypress/integration/embedded-mode.spec.ts b/cypress/integration/embedded-mode.spec.ts
@@ -17,6 +17,22 @@ createMachine({
 };
 
 describe('Embedded mode', () => {
+  describe('default controls', () => {
+    before(() => {
+      cy.interceptGraphQL({
+        getSourceFile: sourceFileFixture,
+      });
+      cy.visitEmbedWithNextPageProps({
+        sourceFile: sourceFileFixture,
+        controls: true,
+      });
+    });
+
+    it('RESET and fit_to_content button should be visible regardless of the mode only if constols is enabled', () => {
+      cy.getResetButton().should('be.visible');
+      cy.getFitToContentButton().should('be.visible');
+    });
+  });
   describe('default (mode:viz)1', () => {
     before(() => {
       cy.interceptGraphQL({
@@ -32,10 +48,6 @@ describe('Embedded mode', () => {
     it('canvas header should be hidden', () => {
       cy.getCanvasHeader().should('not.exist');
     });
-    it('RESET and fit_to_content should be visible', () => {
-      cy.getResetButton().should('be.visible');
-      cy.getFitToContentButton().should('be.visible');
-    });
   });
 
   describe('mode:panels', () => {
@@ -44,10 +56,6 @@ describe('Embedded mode', () => {
         getSourceFile: sourceFileFixture,
       });
     });
-    it('RESET and fit_to_content should be visible', () => {
-      cy.getResetButton().should('be.visible');
-      cy.getFitToContentButton().should('be.visible');
-    });
     it('should show panels view', () => {
       cy.visitEmbedWithNextPageProps({
         sourceFile: sourceFileFixture,
@@ -152,10 +160,6 @@ describe('Embedded mode', () => {
         mode: EmbedMode.Full,
       });
     });
-    it('RESET and fit_to_content should be visible', () => {
-      cy.getResetButton().should('be.visible');
-      cy.getFitToContentButton().should('be.visible');
-    });
     it('should show both canvas and panels', () => {
       cy.getCanvasGraph().should('be.visible');
       cy.getPanelsView().should('be.visible');

diff --git a/cypress/support/commands.ts b/cypress/support/commands.ts
@@ -126,6 +126,9 @@ const visitEmbedWithNextPageProps = ({
     searchParams.set('zoom', String(Number(zoom)));
   }
   if (typeof showOriginalLink === 'boolean') {
+    searchParams.set('showOriginalLink', String(Number(showOriginalLink)));
+  }
+  if (typeof controls === 'boolean') {
     searchParams.set('controls', String(Number(controls)));
   }
   cy.visit(`${path}?${searchParams}`);
@@ -223,7 +226,7 @@ const getResizeHandle = () => {
 };
 
 const getResetButton = () => cy.findByText('RESET')
-const getFitToContentButton = () => cy.findByLabelText('Fit to view')
+const getFitToContentButton = () => cy.findByLabelText('Fit to content')
 
 type DeepPartial<T> = T extends Function
   ? T

diff --git a/src/CanvasView.tsx b/src/CanvasView.tsx
@@ -69,6 +69,8 @@ export const CanvasView: React.FC = () => {
 
   const canShowWelcomeMessage = sourceState.hasTag('canShowWelcomeMessage');
 
+  const showControls = useMemo(() => !embed?.isEmbedded || embed.controls, [embed])
+
   const showZoomButtonsInEmbed = useMemo(
     () => !embed?.isEmbedded || (embed.controls && embed.zoom),
     [embed],
@@ -104,7 +106,7 @@ export const CanvasView: React.FC = () => {
         {isEmpty && canShowWelcomeMessage && <WelcomeArea />}
       </CanvasContainer>
 
-      <Box
+      {showControls && <Box
         display="flex"
         flexDirection="row"
         alignItems="center"
@@ -223,7 +225,7 @@ export const CanvasView: React.FC = () => {
             </Portal>
           </Menu>
         )}
-      </Box>
+      </Box>}
     </Box>
   );
 };