feat: Edit Release Pipeline Feature (#5650)

Author: tiagoapolo

frontend/common/services/useReleasePipelines.ts

@@ -74,6 +74,24 @@ export const releasePipelinesService = service
           url: `projects/${query.projectId}/release-pipelines/${query.pipelineId}/publish-pipeline/`,
         }),
       }),
+      updateReleasePipeline: builder.mutation<
+        Res['releasePipeline'],
+        Req['updateReleasePipeline']
+      >({
+        invalidatesTags: (res) => [
+          { id: 'LIST', type: 'ReleasePipelines' },
+          { id: res?.id, type: 'ReleasePipelines' },
+        ],
+        query: (query: Req['updateReleasePipeline']) => ({
+          body: {
+            description: query.description,
+            name: query.name,
+            stages: query.stages,
+          },
+          method: 'PUT',
+          url: `projects/${query.project}/release-pipelines/${query.id}/`,
+        }),
+      }),
       // END OF ENDPOINTS
     }),
   })
@@ -117,6 +135,7 @@ export const {
   useGetReleasePipelineQuery,
   useGetReleasePipelinesQuery,
   usePublishReleasePipelineMutation,
+  useUpdateReleasePipelineMutation,
   // END OF EXPORTS
 } = releasePipelinesService
 

frontend/common/types/requests.ts

@@ -77,13 +77,17 @@ export interface StageActionRequest {
   action_body: { enabled: boolean; segment_id?: number }
 }
 
-export type ReleasePipelineRequest = {
+export interface ReleasePipelineRequest {
   project: number
   name: string
   description?: string
   stages: PipelineStageRequest[]
 }
 
+export interface UpdateReleasePipelineRequest extends ReleasePipelineRequest {
+  id: number
+}
+
 export type PipelineStageRequest = {
   name: string
   environment: number
@@ -706,6 +710,7 @@ export type Req = {
   getReleasePipelines: PagedRequest<{ projectId: number }>
   getReleasePipeline: { projectId: number; pipelineId: number }
   createReleasePipeline: ReleasePipelineRequest
+  updateReleasePipeline: UpdateReleasePipelineRequest
   getPipelineStages: PagedRequest<{
     projectId: number
     pipelineId: number

frontend/common/utils/utils.tsx

@@ -27,6 +27,7 @@ import { defaultFlags } from 'common/stores/default-flags'
 import Color from 'color'
 import { selectBuildVersion } from 'common/services/useBuildVersion'
 import { getStore } from 'common/store'
+import { TimeUnit } from 'components/release-pipelines/constants'
 
 const semver = require('semver')
 
@@ -599,6 +600,53 @@ const Utils = Object.assign({}, require('./base/_utils'), {
   removeElementFromArray(array: any[], index: number) {
     return array.slice(0, index).concat(array.slice(index + 1))
   },
+  getExistingWaitForTime: (
+    waitFor: string | undefined,
+  ): { amountOfTime: number; timeUnit: (typeof TimeUnit)[keyof typeof TimeUnit] } | undefined => {
+    if (!waitFor) {
+      return
+    }
+
+    const timeParts = waitFor.split(':')
+
+    if (timeParts.length != 3) return
+
+    const [hours, minutes, seconds] = timeParts
+
+    const amountOfMinutes = Number(minutes)
+    const amountOfHours = Number(hours)
+    const amountOfSeconds = Number(seconds)
+
+    if (amountOfHours + amountOfMinutes + amountOfSeconds === 0) {
+      return
+    }
+
+    // Days
+    if (
+      amountOfHours % 24 === 0 &&
+      amountOfMinutes === 0 &&
+      amountOfSeconds === 0
+    ) {
+      return {
+        amountOfTime: amountOfHours / 24,
+        timeUnit: TimeUnit.DAY,
+      }
+    }
+
+    // Hours
+    if (amountOfHours > 0 && amountOfMinutes === 0 && amountOfSeconds === 0) {
+      return {
+        amountOfTime: amountOfHours,
+        timeUnit: TimeUnit.HOUR,
+      }
+    }
+
+    // Minutes
+    return {
+      amountOfTime: amountOfMinutes,
+      timeUnit: TimeUnit.MINUTE,
+    }
+  },
   renderWithPermission(permission: boolean, name: string, el: ReactNode) {
     return permission ? (
       el
@@ -608,6 +656,7 @@ const Utils = Object.assign({}, require('./base/_utils'), {
       </Tooltip>
     )
   },
+
   sanitiseDiffString: (value: FlagsmithValue) => {
     if (value === undefined || value == null) {
       return ''
@@ -671,11 +720,11 @@ const Utils = Object.assign({}, require('./base/_utils'), {
       }
     }
   },
-
   tagDisabled: (tag: Tag | undefined) => {
     const hasStaleFlagsPermission = Utils.getPlansPermission('STALE_FLAGS')
     return tag?.type === 'STALE' && !hasStaleFlagsPermission
   },
+
   toKebabCase: (string: string) =>
     string
       .replace(/([a-z])([A-Z])/g, '$1-$2')
@@ -705,7 +754,6 @@ const Utils = Object.assign({}, require('./base/_utils'), {
         return true
     }
   },
-
   validateRule(rule: SegmentCondition) {
     if (!rule) return false
     if (rule.delete) {
@@ -762,6 +810,7 @@ const Utils = Object.assign({}, require('./base/_utils'), {
         )
     }
   },
+
   valueToFeatureState(value: FlagsmithValue, trimSpaces = true) {
     const val = Utils.getTypedValue(value, undefined, trimSpaces)
 
@@ -790,7 +839,6 @@ const Utils = Object.assign({}, require('./base/_utils'), {
       type: 'unicode',
     }
   },
-
   valueToTrait(value: FlagsmithValue) {
     const val = Utils.getTypedValue(value)
 

frontend/web/components/base/DropdownMenu.tsx

@@ -68,25 +68,36 @@ const DropdownMenu: React.FC<DropdownMenuProps> = ({
         createPortal(
           <div ref={dropDownRef} className='feature-action__list'>
             {items.map((item, index) => (
-              <div
+              <Tooltip
                 key={index}
-                className={classNames('feature-action__item', {
-                  'feature-action__item_disabled': item.disabled,
-                })}
-                data-test={item.dataTest}
-                onClick={(e) => {
-                  e.stopPropagation()
-                  if (!item.disabled) {
-                    item.onClick(e)
-                    setIsOpen(false)
-                  }
-                }}
+                title={
+                  <div
+                    className={classNames('feature-action__item', {
+                      'feature-action__item_disabled': item.disabled,
+                    })}
+                    data-test={item.dataTest}
+                    onClick={(e) => {
+                      e.stopPropagation()
+                      if (!item.disabled) {
+                        item.onClick(e)
+                        setIsOpen(false)
+                      }
+                    }}
+                  >
+                    {item.icon && (
+                      <Icon
+                        name={item.icon}
+                        width={iconWidth}
+                        fill={iconFill}
+                      />
+                    )}
+                    <span>{item.label}</span>
+                  </div>
+                }
+                place='right'
               >
-                {item.icon && (
-                  <Icon name={item.icon} width={iconWidth} fill={iconFill} />
-                )}
-                <span>{item.label}</span>
-              </div>
+                {item.tooltip ?? ''}
+              </Tooltip>
             ))}
           </div>,
           document.body,

frontend/web/components/base/accordion/AccordionCard.tsx

@@ -7,13 +7,15 @@ interface AccordionCardProps {
   children?: React.ReactNode
   title?: string
   className?: string
+  defaultOpen?: boolean
 }
 
 const AccordionCard: FC<AccordionCardProps> = ({
   children,
+  defaultOpen = false,
   title = 'Summary',
 }) => {
-  const [open, setOpen] = useState(false)
+  const [open, setOpen] = useState(defaultOpen)
 
   return (
     <div className='d-flex flex-column px-3 py-3 accordion-card m-0'>

frontend/web/components/pages/ReleasePipelinesPage.tsx

@@ -1,7 +1,7 @@
 import PageTitle from 'components/PageTitle'
 import { useGetReleasePipelinesQuery } from 'common/services/useReleasePipelines'
 import { Button } from 'components/base/forms/Button'
-import { useHistory, useRouteMatch } from 'react-router'
+import { useHistory, useRouteMatch } from 'react-router-dom'
 import ConfigProvider from 'common/providers/ConfigProvider'
 import ReleasePipelinesList from 'components/release-pipelines/ReleasePipelinesList'
 import { useState } from 'react'