All files / modules/70-pipeline/components/execution/StepDetails/tabs/ManualInterventionTab ManualInterventionTab.tsx

100% Statements 27/27
100% Branches 3/3
100% Functions 6/6
100% Lines 26/26

Press n or j to go to the next uncovered block, b, p or k for the previous block.

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92              35x 35x 35x 35x 35x   35x 35x         35x 35x     35x             35x 10x   10x         10x       10x 10x 10x     6x 6x                     10x   10x 10x 1x         10x       18x     58x                                
/*
 * Copyright 2021 Harness Inc. All rights reserved.
 * Use of this source code is governed by the PolyForm Shield 1.0.0 license
 * that can be found in the licenses directory at the root of this repository, also available at
 * https://polyformproject.org/wp-content/uploads/2020/06/PolyForm-Shield-1.0.0.txt.
 */
 
import React from 'react'
import { chunk } from 'lodash-es'
import { useParams } from 'react-router-dom'
import { Thumbnail, useToaster } from '@wings-software/uicore'
import cx from 'classnames'
 
import { String, useStrings } from 'framework/strings'
import {
  useHandleManualInterventionInterrupt,
  ExecutionNode,
  HandleManualInterventionInterruptQueryParams
} from 'services/pipeline-ng'
import useRBACError from '@rbac/utils/useRBACError/useRBACError'
import { Strategy, strategyIconMap, stringsMap } from '@pipeline/utils/FailureStrategyUtils'
import type { ExecutionPathProps, PipelineType } from '@common/interfaces/RouteInterfaces'
 
import css from './ManualInterventionTab.module.scss'
 
export interface ManualInterventionTabProps {
  step: ExecutionNode
  allowedStrategies: Strategy[]
}
 
export function ManualInterventionTab(props: ManualInterventionTabProps): React.ReactElement {
  const { allowedStrategies, step } = props
  const { orgIdentifier, projectIdentifier, executionIdentifier, accountId } =
    useParams<PipelineType<ExecutionPathProps>>()
  const {
    mutate: handleInterrupt,
    loading,
    error
  } = useHandleManualInterventionInterrupt({
    planExecutionId: executionIdentifier,
    nodeExecutionId: step.uuid || /* istanbul ignore next */ ''
  })
  const { showError } = useToaster()
  const { getString } = useStrings()
  const { getRBACErrorMessage } = useRBACError()
 
  function handleChange(e: React.ChangeEvent<HTMLInputElement>): void {
    const interruptType = e.target.value as HandleManualInterventionInterruptQueryParams['interruptType']
    handleInterrupt(undefined, {
      queryParams: {
        interruptType,
        accountIdentifier: accountId,
        orgIdentifier,
        projectIdentifier
      },
      headers: { 'content-type': 'application/json' }
    })
  }
 
  const STRATEGIES: Strategy[][] = React.useMemo(() => chunk(allowedStrategies, 5), [allowedStrategies])
 
  React.useEffect(() => {
    if (error) {
      showError(getRBACErrorMessage(error), undefined, 'pipeline.error.intervention')
    }
    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, [error])
 
  return (
    <div className={cx(css.manualInterventionTab, { [css.loading]: loading })}>
      <String tagName="div" className={css.title} stringID="common.PermissibleActions" />
      {STRATEGIES.map((layer, i) => {
        return (
          <div key={i} className={css.actionRow}>
            {layer.map((strategy, j) => (
              <Thumbnail
                key={j}
                label={getString(stringsMap[strategy])}
                icon={strategyIconMap[strategy]}
                value={strategy}
                name={strategy}
                onClick={handleChange}
                className={css.thumbnail}
              />
            ))}
          </div>
        )
      })}
    </div>
  )
}