Merge pull request #105 from devtron-labs/feat-deployment-window-common-lib

feat: Generalize common function from Deployment window

Author: shivani170

package-lock.json

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

package.json

@@ -159,6 +159,7 @@ const cdMaterialListModal = (artifacts: any[], offset: number, artifactId?: numb
             registryType: material.registryType ?? '',
             imagePath: material.image ?? '',
             registryName: material.registryName ?? '',
+            deploymentWindowArtifactMetadata: material.deploymentWindowArtifactMetadata ?? null,
         }
     })
     return materials

src/Common/Common.service.ts

@@ -278,6 +278,97 @@ export enum SortingOrder {
  */
 export const DEFAULT_BASE_PAGE_SIZE = 20
 
+/**
+ * Deployment Window
+ */
+export enum MODAL_TYPE {
+    HIBERNATE = 'HIBERNATE',
+    UNHIBERNATE = 'UNHIBERNATE',
+    RESTORE = 'RESTORE',
+    DEPLOY = 'DEPLOY',
+    RESOURCE = 'RESOURCE',
+    RESTART = 'RESTART',
+    PIPELINE = 'PIPELINE',
+    OVERVIEW = 'OVERVIEW',
+    APP_DETAILS_STATUS = 'APP_DETAILS_STATUS',
+}
+
+export enum ACTION_STATE {
+    ALLOWED = 'ALLOWED',
+    PARTIAL = 'PARTIAL',
+    BLOCKED = 'BLOCKED',
+}
+
+export enum DEPLOYMENT_WINDOW_TYPE {
+    MAINTENANCE = 'MAINTENANCE',
+    BLACKOUT = 'BLACKOUT',
+}
+export const arrowUnicode = '\u279d'
+
+export enum WEEK_DAYS_ENUM {
+    SUNDAY = 'SUNDAY',
+    MONDAY = 'MONDAY',
+    TUESDAY = 'TUESDAY',
+    WEDNESDAY = 'WEDNESDAY',
+    THURSDAY = 'THURSDAY',
+    FRIDAY = 'FRIDAY',
+    SATURDAY = 'SATURDAY',
+}
+
+export enum FREQUENCY_ENUM {
+    FIXED = 'FIXED',
+    DAILY = 'DAILY',
+    WEEKLY = 'WEEKLY',
+    MONTHLY = 'MONTHLY',
+    YEARLY = 'YEARLY',
+    WEEKLY_RANGE = 'WEEKLY_RANGE',
+}
+
+export const TIME_FORMAT = {
+    DD_MMM_YYYY_HH_MM: 'DD MMM YYYY, hh:mm',
+}
+
+export function getOrdinal(number) {
+    if (number % 100 >= 11 && number % 100 <= 13) {
+        return `${number}th`
+    }
+    switch (number % 10) {
+        case 1:
+            return `${number}st`
+        case 2:
+            return `${number}nd`
+        case 3:
+            return `${number}rd`
+        default:
+            return `${number}th`
+    }
+}
+
+export const TIME_HOUR_SUFFIX_FOR_12_HOUR_FORMAT = {
+    AM: 'AM',
+    PM: 'PM',
+    MIDNIGHT: 'midnight',
+    NOON: 'noon',
+}
+
+export const getTimeStampAMPMSuffix = (time: string): string => {
+    // time is in format HH:mm 24hr format
+    const [hoursStr, minutesStr] = time.split(':')
+    const hours = parseInt(hoursStr, 10)
+    const minutes = parseInt(minutesStr, 10)
+
+    if (hours === 12 && minutes === 0) {
+        return TIME_HOUR_SUFFIX_FOR_12_HOUR_FORMAT.NOON
+    }
+    if (hours === 0 && minutes === 0) {
+        return TIME_HOUR_SUFFIX_FOR_12_HOUR_FORMAT.MIDNIGHT
+    }
+    if (hours >= 12) {
+        return TIME_HOUR_SUFFIX_FOR_12_HOUR_FORMAT.PM
+    }
+    return TIME_HOUR_SUFFIX_FOR_12_HOUR_FORMAT.AM
+}
+
 export enum ReactSelectInputAction {
     inputChange = 'input-change',
     selectOption = 'select-option',

src/Common/Constants.ts

@@ -692,8 +692,13 @@ export const debounce = (func, timeout = 500) => {
 }
 
 /**
- * Sorts the relative dates based on the sorting direction
+ * Returns a capitalized string with first letter in uppercase and rest in lowercase
  */
+
+export const capitalizeFirstLetter = (text: string) => text.charAt(0).toUpperCase() + text.slice(1).toLowerCase()
+
+//  * Sorts the relative dates based on the sorting direction
+//  */
 export const handleRelativeDateSorting = (dateStringA, dateStringB, sortOrder) => {
     // For date, we show relative date hence the logic for sorting is reversed here
     const dateA = new Date(dateStringA).getTime()

src/Common/Helper.tsx

@@ -5,7 +5,7 @@ import { ReactComponent as QuestionFilled } from '../Assets/Icon/ic-help.svg'
 import { ReactComponent as Question } from '../Assets/Icon/ic-help-outline.svg'
 import 'tippy.js/animations/shift-toward-subtle.css'
 import { TippyCustomizedProps, TippyTheme } from './Types'
-import { not } from './Helper'
+import { not, stopPropagation } from './Helper'
 
 // This component will handle some of the new tippy designs and interactions
 // So this can be updated to support further for new features or interactions
@@ -19,7 +19,8 @@ export const TippyCustomized = (props: TippyCustomizedProps) => {
         document.addEventListener('keydown', closeOnEsc)
     }
 
-    const closeTippy = () => {
+    const closeTippy = (e) => {
+        stopPropagation(e)
         if (tippyRef.current?.hide) {
             tippyRef.current.hide()
             tippyRef.current = null
@@ -33,7 +34,7 @@ export const TippyCustomized = (props: TippyCustomizedProps) => {
 
     const closeOnEsc = (e) => {
         if (e.keyCode === 27) {
-            closeTippy()
+            closeTippy(e)
         }
     }
 
@@ -163,7 +164,7 @@ export const TippyCustomized = (props: TippyCustomizedProps) => {
             content={getTippyContent()}
             trigger={trigger || 'mouseenter'}
             onMount={onTippyMount}
-            onClickOutside={closeTippy}
+            onClickOutside={(tippyInstance, e) => closeTippy(e)}
             showOnCreate={showOnCreate || false}
             animation={animation || 'fade'}
             duration={duration || 300}

src/Common/TippyCustomized.tsx

@@ -1,7 +1,7 @@
 import React, { ReactNode, CSSProperties } from 'react'
 import { Placement } from 'tippy.js'
 import { ImageComment, ReleaseTag } from './ImageTags.Types'
-import { DockerConfigOverrideType, SortingOrder, TaskErrorObj } from '.'
+import { ACTION_STATE, DEPLOYMENT_WINDOW_TYPE, DockerConfigOverrideType, SortingOrder, TaskErrorObj } from '.'
 
 /**
  * Generic response type object with support for overriding the result type
@@ -174,7 +174,6 @@ export interface RadioGroupComposition {
     Radio?: React.FC<any>
 }
 
-
 export interface RadioGroupProps {
     children: ReactNode
     value: string
@@ -276,6 +275,12 @@ export enum MaterialDataSource {
     EXTERNAL = 'ext',
 }
 
+export interface DeploymentWindowArtifactMetadata {
+    id: number
+    name: string
+    type: DEPLOYMENT_WINDOW_TYPE
+}
+
 export interface CDMaterialType {
     index: number
     id: string
@@ -313,6 +318,7 @@ export interface CDMaterialType {
     createdTime?: string
     deployed?: boolean
     dataSource?: MaterialDataSource
+    deploymentWindowArtifactMetadata?: DeploymentWindowArtifactMetadata
 }
 
 export enum CDMaterialServiceEnum {
@@ -407,6 +413,7 @@ export interface CommonNodeAttr {
     deploymentAppCreated?: boolean
     isLast?: boolean
     downstreamEnvironments?: DownstreamNodesEnvironmentsType[]
+    isDeploymentBlocked?: boolean
 }
 
 export enum DeploymentAppTypes {
@@ -803,3 +810,13 @@ export type SortingParams<T = string> =
           sortBy: T
       }
     | { sortOrder?: never; sortBy?: never }
+
+export interface DeploymentWindowProfileMetaData {
+    name: string
+    userActionState: ACTION_STATE
+    type: string | DEPLOYMENT_WINDOW_TYPE
+    calculatedTimestamp: string
+    isActive: boolean
+    excludedUserEmails: string[]
+    warningMessage: string
+}