hunk.code_window:   /compute-scroll-into-view/1.0.17:
       resolution: {integrity: sha512-j4dx+Fb0URmzbwwMUrhqWM2BEWHdFGx+qZ9qqASHRPqvTYdqvWnHg0H1hIbcyLnvgnoNAVMlwkepyqM3DaIFUg==}
     /concat-map/0.0.1:
       resolution: {integrity: sha1-2Klr13/Wjfd5OnMDajug1UBdR3s=}
     /concat-stream/1.6.2:
       resolution: {integrity: sha512-27HBghJxjiZtIk3Ycvn/4kbJk/1uZuJFfuPEns6LaEvpvG1f0hTea8lilrouyo9mVc2GWdcEZ8OLoGmSADlrCw==}
  
hunk.labels: keep keep keep keep replace keep keep keep
hunk.after_edit:     resolution: {integrity: sha512-/Srv4dswyQNBfohGpz9o6Yb3Gz3SrUDqBH5rTuhGR7ahtlbYKnVxw2bCFMRljaA7EXHaXZ8wsHdodFvbkhKmqg==}
  
hunk.file_path: pnpm-lock.yaml
hunk.type: replace
file: import { useState } from 'react';
  import { Container, Grid } from '@mantine/core';
  import styled from '@emotion/styled';
  
  import { ExecutionDetail } from './ExecutionDetail';
  import { ExecutionDetailRawSnippet } from './ExecutionDetailShowRaw';
  import { ExecutionDetailTrigger } from './ExecutionDetailTrigger';
  import { colors, Text } from '../../design-system';
  import { When } from '../utils/When';
  
  const ExecutionDetailsStepContentWrapper = styled.div`
    margin: 0;
    padding: 0;
  `;
  
  const TimelineTitle = styled(Text)`
    font-size: 14px;
    font-weight: 700;
    line-height: 17px;
    padding-bottom: 20px;
  `;
  
  const GridColContainer = styled(Container)`
    background-color: ${({ theme }) => (theme.colorScheme === 'dark' ? colors.B20 : colors.B98)};
    border-radius: 7px;
    padding: 20px;
  `;
  
  export const ExecutionDetailsStepContent = ({ identifier, step, subscriberVariables }) => {
    const [detailId, setDetailId] = useState<string>('');
    const [executionDetailsRawSnippet, setExecutionDetailsRawSnippet] = useState<string>('');
    const { executionDetails } = step || {};
  
    const onShowExecutionDetail = (id, raw) => () => {
      setDetailId(id);
      setExecutionDetailsRawSnippet(raw);
    };
  
    const onHideExecutionDetail = () => {
      setExecutionDetailsRawSnippet('');
      setDetailId('');
    };
  
    return (
      <ExecutionDetailsStepContentWrapper key={`execution-detals-step-content-wrapper-${step.id}`}>
        <Grid gutter={20}>
          <Grid.Col span={6}>
            <GridColContainer>
              <TimelineTitle>Step Timeline</TimelineTitle>
              {executionDetails.map((executionDetail) => (
                <ExecutionDetail
                  key={`execution-detail-${executionDetail.id}`}
                  executionDetail={executionDetail}
                  showTriggerSnippet={detailId !== executionDetail.id}
                  onShowExecutionDetail={onShowExecutionDetail(executionDetail.id, executionDetail.raw)}
                  onHideExecutionDetail={onHideExecutionDetail}
                />
              ))}
            </GridColContainer>
          </Grid.Col>
          <Grid.Col span={6}>
            <GridColContainer>
              <When truthy={detailId.length === 0}>
                <ExecutionDetailTrigger identifier={identifier} step={step} subscriberVariables={subscriberVariables} />
              </When>
              <When truthy={detailId.length > 0 && executionDetailsRawSnippet}>
                <ExecutionDetailRawSnippet raw={executionDetailsRawSnippet} onClose={onHideExecutionDetail} />
              </When>
            </GridColContainer>
          </Grid.Col>
        </Grid>
      </ExecutionDetailsStepContentWrapper>
    );
  };
  