Merge branch 'main' of https://github.com/devtron-labs/devtron-fe-common-lib into refactor/component-migration

Author: arunjaindev

package-lock.json

@@ -1,6 +1,6 @@
 {
     "name": "@devtron-labs/devtron-fe-common-lib",
-    "version": "0.0.72-beta-2",
+    "version": "0.0.75",
     "description": "Supporting common component library",
     "type": "module",
     "main": "dist/index.js",
@@ -80,8 +80,8 @@
         "react-router-dom": "^5.3.0",
         "react-draggable": "^4.4.5",
         "react-ga4": "^1.4.1",
-        "@typeform/embed-react": "2.20.0"
-
+        "@typeform/embed-react": "2.20.0",
+        "yaml": "^2.4.1"
     },
     "dependencies": {
         "react-monaco-editor": "^0.54.0",

package.json

@@ -21,7 +21,7 @@ import 'monaco-editor'
 // import YamlWorker from 'web-worker:monaco-yaml/lib/esm/yaml.worker';
 import { Progressing } from '../Progressing'
 import { useWindowSize } from '../Hooks/UseWindowSize/UseWindowSize'
-import { cleanKubeManifest, copyToClipboard, useJsonYaml } from '../Helper'
+import { YAMLStringify, cleanKubeManifest, copyToClipboard, useJsonYaml } from '../Helper'
 import Select from '../Select/Select'
 import RadioGroup from '../RadioGroup/RadioGroup'
 
@@ -300,7 +300,7 @@ const CodeEditor: React.FC<CodeEditorInterface> & CodeEditorComposition = React.
             }
             let final = value
             if (obj) {
-                final = state.mode === 'json' ? JSON.stringify(obj, null, tabSize) : YAML.stringify(obj, { indent: 2 })
+                final = state.mode === 'json' ? JSON.stringify(obj, null, tabSize) : YAMLStringify(obj, { indent: 2 })
             }
             dispatch({ type: 'setCode', value: final })
         }, [value, noParsing])

src/Common/CodeEditor/CodeEditor.tsx

@@ -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

@@ -290,6 +290,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

@@ -369,7 +369,7 @@ export function useJsonYaml(value, tabSize = 4, language = 'json', shouldRun = f
         }
         if (obj && typeof obj === 'object') {
             setJson(JSON.stringify(obj, null, tabSize))
-            setYaml(YAML.stringify(obj, { indent: 2 }))
+            setYaml(YAML.stringify(obj, { indent: 2, lineWidth: 0 }))
             setNativeObject(obj)
             setError('')
         } else {
@@ -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()
@@ -711,3 +716,11 @@ export const handleRelativeDateSorting = (dateStringA, dateStringB, sortOrder) =
         return sortOrder === SortingOrder.ASC ? dateB - dateA : dateA - dateB
     }
 }
+
+/**
+ * Returns a stringified YAML with default indentation & line width
+ */
+
+export const YAMLStringify = (obj: object | unknown, option?: object) => (
+    YAML.stringify(obj, { indent: 2, lineWidth: 0, ...option  })
+)

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}