Merge remote-tracking branch 'origin/main' into feat/gui-view-hidden

Author: Elessar1802

package-lock.json

@@ -1,6 +1,6 @@
 {
     "name": "@devtron-labs/devtron-fe-common-lib",
-    "version": "0.0.97-beta-2",
+    "version": "0.1.3",
     "description": "Supporting common component library",
     "type": "module",
     "main": "dist/index.js",
@@ -60,7 +60,6 @@
         "moment": "^2.29.4",
         "monaco-editor": "0.44.0",
         "monaco-yaml": "5.1.1",
-        "react-monaco-editor": "^0.55.0",
         "prettier": "^3.1.1",
         "react-ga4": "^1.4.1",
         "react-mde": "^11.5.0",
@@ -94,7 +93,18 @@
         "fast-json-patch": "^3.1.1",
         "jsonpath-plus": "^9.0.0",
         "react-monaco-editor": "^0.54.0",
+        "@types/react-dates": "^21.8.6",
+        "react-dates": "^21.8.0",
         "sass": "^1.69.7",
         "tslib": "^2.4.1"
+    },
+    "overrides": {
+        "react-dates": {
+            "react": "^17.0.2",
+            "react-dom": "^17.0.2"
+        },
+        "react-monaco-editor": {
+            "monaco-editor": "0.44.0"
+        }
     }
-}
+}

package.json

@@ -15,11 +15,16 @@
  */
 
 import React, { createContext, useState } from 'react'
+import { BreadcrumbTextProps } from './Types'
 
 const initialState = {
     alias: {},
 }
 
+export const BreadcrumbText = ({ heading, isActive }: BreadcrumbTextProps) => (
+    <h2 className={`m-0 fs-16 fw-6 lh-32 ${isActive ? 'cn-9' : 'cb-5'}`}>{heading}</h2>
+)
+
 const Store = ({ children }) => {
     const [state, setState] = useState(initialState)
     return <BreadcrumbContext.Provider value={{ state, setState }}>{children}</BreadcrumbContext.Provider>

src/Assets/Icon/ic-calender-blank.svg

@@ -43,3 +43,8 @@ export interface Breadcrumbs {
 }
 
 export type UseBreadcrumbOptionalProps = UseBreadcrumbProps | null
+
+export interface BreadcrumbTextProps {
+    heading: string
+    isActive?: boolean
+}

src/Assets/Icon/ic-clock.svg

@@ -421,10 +421,6 @@ export enum FREQUENCY_ENUM {
     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`
@@ -512,4 +508,6 @@ export const DATE_TIME_FORMATS = {
     TWELVE_HOURS_FORMAT: 'ddd, DD MMM YYYY, hh:mm A',
     TWELVE_HOURS_FORMAT_WITHOUT_WEEKDAY: 'DD MMM YYYY, hh:mm A',
     TWELVE_HOURS_EXPORT_FORMAT: 'DD-MMM-YYYY hh.mm A',
+    DD_MMM_YYYY_HH_MM: 'DD MMM YYYY, hh:mm',
+    DD_MMM_YYYY: 'DD MMM YYYY',
 }

src/Assets/Icon/ic-info-filled-override.svg

@@ -15,7 +15,7 @@
  */
 
 import { CustomInputProps } from './Types'
-import { ReactComponent as Info } from '../../Assets/Icon/ic-info-filled.svg'
+import { ReactComponent as Info } from '../../Assets/Icon/ic-info-filled-override.svg'
 import { ReactComponent as ErrorIcon } from '../../Assets/Icon/ic-warning.svg'
 
 export const CustomInput = ({
@@ -135,9 +135,9 @@ export const CustomInput = ({
 
             {getInputError()}
             {helperText && (
-                <div className="form__text-field-info">
-                    <Info className="form__icon form__icon--info" />
-                    <p className="sentence-case">{helperText}</p>
+                 <div className="flex left top dc__gap-4 fs-11 lh-16 cn-7">
+                 <Info className="icon-dim-16" />
+                 <div>{helperText}</div>
                 </div>
             )}
         </div>

src/Common/BreadCrumb/BreadcrumbStore.tsx

@@ -1018,7 +1018,7 @@ export function useKeyDown() {
 export const DropdownIndicator = (props) => {
     return (
         <components.DropdownIndicator {...props}>
-            <ArrowDown className="icon-dim-20 icon-n5" />
+            <ArrowDown className="icon-dim-20 icon-n6" />
         </components.DropdownIndicator>
     )
 }