update logic to disable pinning

Author: mabela416

packages/reporter/src/commands/command.cy.tsx

@@ -234,48 +234,9 @@ describe('commands', () => {
     })
   })
 
-  describe('studio click message', () => {
+  describe('studio active state', () => {
     beforeEach(() => {
-      // Reset appState before each test
       appState.reset()
-      appState.isRunning = false
-    })
-
-    it('should show click message when studio is not active', () => {
-      appState.studioActive = false
-
-      cy.mount(
-        <div>
-          <Command
-            model={
-              new CommandModel({
-                name: 'get',
-                message: '.foo',
-                state: 'passed',
-                hasConsoleProps: true,
-                number: 1,
-                type: 'parent',
-                hookId: '1',
-                testId: '1',
-                id: 1,
-                numElements: 1,
-              })
-            }
-            scrollIntoView={() => {}}
-            aliasesWithDuplicates={[]}
-          />
-        </div>,
-      )
-
-      // Click on the command
-      cy.get('.command-wrapper').click()
-
-      // The tooltip message should appear
-      cy.get('.cy-tooltip').should('contain', 'Printed output to your console')
-    })
-
-    it('should NOT show click message when studio is active', () => {
-      appState.studioActive = true
 
       cy.mount(
         <div>
@@ -299,73 +260,23 @@ describe('commands', () => {
           />
         </div>,
       )
-
-      cy.get('.command-wrapper').click()
-
-      cy.get('.cy-tooltip').should('not.exist')
     })
 
-    it('should NOT show click message when test is running', () => {
+    it('allows pinning command when studio is not active', () => {
       appState.studioActive = false
-      appState.isRunning = true
-
-      cy.mount(
-        <div>
-          <Command
-            model={
-              new CommandModel({
-                name: 'get',
-                message: '.foo',
-                state: 'passed',
-                hasConsoleProps: true,
-                number: 1,
-                type: 'parent',
-                hookId: '1',
-                testId: '1',
-                id: 1,
-                numElements: 1,
-              })
-            }
-            scrollIntoView={() => {}}
-            aliasesWithDuplicates={[]}
-          />
-        </div>,
-      )
+      cy.get('.command-pin-target').should('exist')
 
-      cy.get('.command-wrapper').click()
+      cy.get('.command-pin-target').click()
 
-      cy.get('.cy-tooltip').should('not.exist')
+      cy.contains('Printed output to your console').should('be.visible')
     })
 
-    it('should NOT show click message when command has no console props', () => {
-      appState.studioActive = false
-
-      cy.mount(
-        <div>
-          <Command
-            model={
-              new CommandModel({
-                name: 'get',
-                message: '.foo',
-                state: 'passed',
-                hasConsoleProps: false,
-                number: 1,
-                type: 'parent',
-                hookId: '1',
-                testId: '1',
-                id: 1,
-                numElements: 1,
-              })
-            }
-            scrollIntoView={() => {}}
-            aliasesWithDuplicates={[]}
-          />
-        </div>,
-      )
+    it('does not allow pinning when studio is active', () => {
+      appState.studioActive = true
 
-      cy.get('.command-wrapper').click()
+      cy.get('.command-pin-target').should('not.exist')
 
-      cy.get('.cy-tooltip').should('not.exist')
+      cy.get('.command-wrapper-container').should('exist')
     })
   })
 })

packages/reporter/src/commands/command.tsx

@@ -432,7 +432,7 @@ const Command: React.FC<CommandProps> = observer(({ model, aliasesWithDuplicates
   }
 
   const _shouldShowClickMessage = () => {
-    return !appState.isRunning && !!model.hasConsoleProps && !appState.studioActive
+    return !appState.isRunning && !!model.hasConsoleProps
   }
 
   const _toggleColumnPin = () => {
@@ -495,6 +495,48 @@ const Command: React.FC<CommandProps> = observer(({ model, aliasesWithDuplicates
     return null
   }
 
+  let commandContent = (<div className='command-wrapper-container'>
+    <div
+      className={cs('command-wrapper-text', {
+        'command-wrapper-text-group': model.hasChildren && groupId,
+        'command-wrapper-text-group-parent': model.hasChildren && !groupId,
+      })}
+      onMouseEnter={() => _snapshot(true)}
+      onMouseLeave={() => _snapshot(false)}
+    >
+      {groupPlaceholder}
+
+      {model.hasChildren && groupId && (
+        <div className={cs('command-expander-column-group', { 'nested-group-expander': model.groupLevel })} onClick={(e) => {
+          e.stopPropagation()
+          model.toggleOpen()
+        }}>
+          <ChevronIcon className={cs('command-expander', { 'command-expander-is-open': model.hasChildren && !!model.isOpen })} />
+        </div>
+      )}
+      <CommandDetails model={model} groupId={groupId} aliasesWithDuplicates={aliasesWithDuplicates} />
+      <CommandControls model={model} commandName={commandName} />
+    </div>
+    {model.isCyPrompt && model.state === 'passed' && (
+      <Button
+        variant="indigo-dark-mode"
+        size="20"
+        onClick={(e) => {
+          e.stopPropagation()
+          events.emit('prompt:get-code', { testId: model.testId, logId: model.id })
+        }}
+        className="command-prompt-get-code mr-1 whitespace-nowrap"
+      >
+        <IconTechnologyAngleBrackets
+          className='command-prompt-get-code-indicator pr-1'
+          size='16'
+          strokeColor='white'
+        />
+        <span>Get code</span>
+      </Button>
+    )}
+  </div>)
+
   return (
     <>
       <li className={cs('command', `command-name-${commandName}`)}>
@@ -511,54 +553,15 @@ const Command: React.FC<CommandProps> = observer(({ model, aliasesWithDuplicates
           )}
         >
           <NavColumns model={model} isPinned={_isPinned()} toggleColumnPin={_toggleColumnPin} />
-          <FlashOnClick
+          {appState.studioActive ? commandContent : <FlashOnClick
             message='Printed output to your console'
             onClick={_toggleColumnPin}
             shouldShowMessage={_shouldShowClickMessage}
             wrapperClassName={cs('command-pin-target', { 'command-group': !!groupId, 'command-group-no-children': !model.hasChildren && model.group })}
           >
-            <div className='command-wrapper-container'>
-              <div
-                className={cs('command-wrapper-text', {
-                  'command-wrapper-text-group': model.hasChildren && groupId,
-                  'command-wrapper-text-group-parent': model.hasChildren && !groupId,
-                })}
-                onMouseEnter={() => _snapshot(true)}
-                onMouseLeave={() => _snapshot(false)}
-              >
-                {groupPlaceholder}
-
-                {model.hasChildren && groupId && (
-                  <div className={cs('command-expander-column-group', { 'nested-group-expander': model.groupLevel })} onClick={(e) => {
-                    e.stopPropagation()
-                    model.toggleOpen()
-                  }}>
-                    <ChevronIcon className={cs('command-expander', { 'command-expander-is-open': model.hasChildren && !!model.isOpen })} />
-                  </div>
-                )}
-                <CommandDetails model={model} groupId={groupId} aliasesWithDuplicates={aliasesWithDuplicates} />
-                <CommandControls model={model} commandName={commandName} />
-              </div>
-              {model.isCyPrompt && model.state === 'passed' && (
-                <Button
-                  variant="indigo-dark-mode"
-                  size="20"
-                  onClick={(e) => {
-                    e.stopPropagation()
-                    events.emit('prompt:get-code', { testId: model.testId, logId: model.id })
-                  }}
-                  className="command-prompt-get-code mr-1 whitespace-nowrap"
-                >
-                  <IconTechnologyAngleBrackets
-                    className='command-prompt-get-code-indicator pr-1'
-                    size='16'
-                    strokeColor='white'
-                  />
-                  <span>Get code</span>
-                </Button>
-              )}
-            </div>
-          </FlashOnClick>
+            {commandContent}
+          </FlashOnClick>}
+
         </div>
         <Progress model={model} />
         {model.hasChildren && model.isOpen && (