Merge pull request #692 from devtron-labs/feat/poll-release-status

feat: poll release status

Author: AbhishekA1509

package-lock.json

@@ -1,6 +1,6 @@
 {
     "name": "@devtron-labs/devtron-fe-common-lib",
-    "version": "1.11.0-pre-1",
+    "version": "1.11.0-pre-2",
     "description": "Supporting common component library",
     "type": "module",
     "main": "dist/index.js",

package.json

@@ -0,0 +1,68 @@
+import { useEffect } from 'react'
+import { animate, motion, useMotionValue, useTransform } from 'framer-motion'
+
+import { Tooltip } from '@Common/Tooltip'
+
+import { CX, CY, END_ANGLE, RADIUS, START_ANGLE } from './constants'
+import { AnimatedTimerProps } from './types'
+
+const polarToCartesian = (cx: number, cy: number, r: number, angleInDegrees: number) => {
+    const angleInRadians = ((angleInDegrees - 90) * Math.PI) / 180.0
+    return {
+        x: cx + r * Math.cos(angleInRadians),
+        y: cy + r * Math.sin(angleInRadians),
+    }
+}
+
+const describeArcPath = (cx: number, cy: number, r: number, endAngle: number) => {
+    const startAngle = 0
+    const largeArcFlag = endAngle - startAngle <= 180 ? '0' : '1'
+    const start = polarToCartesian(cx, cy, r, endAngle)
+    const end = polarToCartesian(cx, cy, r, startAngle)
+
+    return `
+      M ${cx} ${cy}
+      L ${start.x} ${start.y}
+      A ${r} ${r} 0 ${largeArcFlag} 0 ${end.x} ${end.y}
+      Z
+    `
+}
+
+const AnimatedTimer = ({ duration, onComplete, size = 24, tooltipContent }: AnimatedTimerProps) => {
+    const angle = useMotionValue<number>(START_ANGLE)
+    const d = useTransform(angle, (currentAngle) => describeArcPath(CX, CY, RADIUS, currentAngle))
+    useEffect(() => {
+        const controls = animate(angle, END_ANGLE, {
+            duration,
+            ease: 'easeInOut',
+            onComplete,
+        })
+        return controls.stop
+    }, [duration])
+
+    return (
+        <Tooltip alwaysShowTippyOnHover={!!tooltipContent} content={tooltipContent}>
+            <div className="flex">
+                <svg
+                    width={CX * 2}
+                    height={CY * 2}
+                    viewBox={`0 0 ${CX * 2} ${CY * 2}`}
+                    fill="none"
+                    xmlns="http://www.w3.org/2000/svg"
+                    className={`icon-dim-${size}`}
+                >
+                    <path
+                        fillRule="evenodd"
+                        clipRule="evenodd"
+                        d="M12 3C7.02944 3 3 7.02944 3 12C3 16.9706 7.02944 21 12 21C16.9706 21 21 16.9706 21 12C21 7.02944 16.9706 3 12 3ZM1 12C1 5.92487 5.92487 1 12 1C18.0751 1 23 5.92487 23 12C23 18.0751 18.0751 23 12 23C5.92487 23 1 18.0751 1 12Z"
+                        fill="var(--O500)"
+                    />
+
+                    <motion.path fill="var(--O200)" d={d} />
+                </svg>
+            </div>
+        </Tooltip>
+    )
+}
+
+export default AnimatedTimer

src/Assets/IconV2/ic-arrow-clockwise.svg

@@ -0,0 +1,5 @@
+export const CX = 12
+export const CY = 12
+export const RADIUS = 6
+export const START_ANGLE = 0
+export const END_ANGLE = 360

src/Shared/Components/AnimatedTimer/AnimatedTimer.component.tsx

@@ -0,0 +1 @@
+export { default as AnimatedTimer } from './AnimatedTimer.component'

src/Shared/Components/AnimatedTimer/constants.ts

@@ -0,0 +1,17 @@
+import { animate } from 'framer-motion'
+
+import { TooltipProps } from '@Common/Tooltip'
+import { IconBaseSizeType } from '@Shared/index'
+
+export interface AnimatedTimerProps extends Pick<Parameters<typeof animate>[2], 'onComplete'> {
+    /**
+     * The time in seconds for the timer to animate.
+     */
+    duration: number
+    onComplete?: () => void
+    /**
+     * @default 24
+     */
+    size?: IconBaseSizeType
+    tooltipContent?: TooltipProps['content']
+}

src/Shared/Components/AnimatedTimer/index.ts

@@ -53,7 +53,7 @@ const LogStageAccordion = ({
     }
 
     const getFormattedTimeDifference = (): string => {
-        const timeDifference = getTimeDifference(startTime, endTime)
+        const timeDifference = getTimeDifference({ startTime, endTime })
         if (timeDifference === '0s') {
             return '< 1s'
         }

src/Shared/Components/AnimatedTimer/types.ts

@@ -5,6 +5,7 @@ import { ReactComponent as ICAborted } from '@IconsV2/ic-aborted.svg'
 import { ReactComponent as ICAdd } from '@IconsV2/ic-add.svg'
 import { ReactComponent as ICApica } from '@IconsV2/ic-apica.svg'
 import { ReactComponent as ICAppGroup } from '@IconsV2/ic-app-group.svg'
+import { ReactComponent as ICArrowClockwise } from '@IconsV2/ic-arrow-clockwise.svg'
 import { ReactComponent as ICArrowRight } from '@IconsV2/ic-arrow-right.svg'
 import { ReactComponent as ICArrowsLeftRight } from '@IconsV2/ic-arrows-left-right.svg'
 import { ReactComponent as ICAther } from '@IconsV2/ic-ather.svg'
@@ -113,6 +114,7 @@ export const iconMap = {
     'ic-add': ICAdd,
     'ic-apica': ICApica,
     'ic-app-group': ICAppGroup,
+    'ic-arrow-clockwise': ICArrowClockwise,
     'ic-arrow-right': ICArrowRight,
     'ic-arrows-left-right': ICArrowsLeftRight,
     'ic-ather': ICAther,

src/Shared/Components/CICDHistory/LogStageAccordion.tsx

@@ -17,6 +17,7 @@
 import { FC, SVGProps } from 'react'
 
 import { TooltipProps } from '@Common/Tooltip/types'
+import { IconBaseColorType, IconBaseSizeType } from '@Shared/index'
 
 type IconMap = Record<string, FC<SVGProps<SVGSVGElement>>>
 
@@ -29,17 +30,13 @@ export interface IconBaseProps {
      * The size of the icon in pixels.
      * @default 16
      */
-    size?: 6 | 8 | 10 | 12 | 14 | 16 | 18 | 20 | 22 | 24 | 28 | 30 | 32 | 34 | 36 | 40 | 42 | 44 | 48 | 72 | 80
+    size?: IconBaseSizeType
     /** Props to configure the tooltip when hovering over the icon. */
     tooltipProps?: TooltipProps
     /**
      * The color of the icon (color tokens). \
      * If `null`, the default color present in icon is used.
      * @example `'B500'`, `'N200'`, `'G50'`, `'R700'`
      */
-    color:
-        | `${'B' | 'N' | 'G' | 'Y' | 'R' | 'V' | 'O'}${`${1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9}00` | '50' | '0'}`
-        | 'white'
-        | 'black'
-        | null
+    color: IconBaseColorType
 }