Helm values - GUI configuration

src/components/charts/chartValues/ChartValues.tsx

@@ -8,7 +8,7 @@ import { ChartInstalledConfig, ChartKind } from '../../v2/values/chartValuesDiff
 
 export default function ChartValues() {
     const { chartId, chartValueId } = useParams<{ chartId: string; chartValueId: string }>()
-    const [loader, setLoader] = useState(false)
+    const [loader, setLoader] = useState(true)
     const [errorStatusCode, setErrorStatusCode] = useState(0)
     const [appStoreApplicationName, setAppStoreApplicationName] = useState('')
     const [valueName, setValueName] = useState('')
@@ -34,7 +34,6 @@ export default function ChartValues() {
 
     async function getChartDetails() {
         try {
-            setLoader(true)
             const { result: chartVersionMinResult } = await getChartVersionsMin(chartId)
             setChartVersions(chartVersionMinResult)
 

src/components/charts/charts.service.ts

@@ -196,7 +196,7 @@ export function updateChartGroupEntries(payload) {
 }
 
 export function getReadme(appStoreApplicationVersionId: number) {
-    return get(`app-store/discover/application/readme/${appStoreApplicationVersionId}`)
+    return get(`app-store/discover/application/chartInfo/${appStoreApplicationVersionId}`)
 }
 
 export function getChartGroupInstallationDetails(chartGroupId: number | string) {

src/components/common/RadioGroup/RadioGroup.tsx

@@ -49,7 +49,7 @@ const RadioGroup: React.FC<RadioGroupInterface> & RadioGroupComposition = React.
     )
 })
 
-function Radio({ value, children, className = '', showTippy = false, tippyContent = '', canSelect = true }) {
+function Radio({ value, children, className = '', showTippy = false, tippyContent = '', canSelect = true, isDisabled = false }) {
     const { name, selected, select, disabled, onChange } = useRadioContext()
     return (
         <ConditionalWrap
@@ -73,7 +73,7 @@ function Radio({ value, children, className = '', showTippy = false, tippyConten
                         }
                         onChange(e)
                     }}
-                    disabled={disabled}
+                    disabled={isDisabled || disabled}
                 />
                 <span className="radio__item-label">{children}</span>
             </label>

src/components/common/formFields/Checkbox.tsx

@@ -4,7 +4,7 @@ export enum CHECKBOX_VALUE {
     CHECKED = 'CHECKED',
     INTERMEDIATE = 'INTERMEDIATE',
 }
-interface CheckboxProps {
+export interface CheckboxProps {
     onChange: (event) => void
     isChecked: boolean
     value: 'CHECKED' | 'INTERMEDIATE'

src/components/common/formFields/Widgets/Widgets.scss

@@ -0,0 +1,74 @@
+.styled-field.form__row {
+    .info-label-icon {
+        svg circle {
+            fill: var(--N500);
+        }
+    }
+
+    .error-label-icon {
+        svg g path:nth-of-type(2) {
+            fill: var(--R500);
+        }
+    }
+}
+
+.styled-form-box {
+    > .styled-form-box:last-of-type {
+        margin-bottom: 0 !important;
+    }
+}
+
+.required-field::after {
+    content: ' *';
+    color: var(--R500);
+}
+
+.slider-input-box-container {
+    .slider-input {
+        -webkit-appearance: none;
+        width: 450px;
+        height: 12px;
+        border-radius: 6px;
+        background: linear-gradient(to right, var(--B500) 0%, var(--B500) 50%, var(--N200) 50%, var(--N200) 100%);
+        outline: none;
+        transition: background 450ms ease-in;
+    }
+
+    .slider-input::-webkit-slider-thumb {
+        -webkit-appearance: none;
+        appearance: none;
+        height: 24px;
+        width: 24px;
+        border-radius: 50%;
+        background-image: radial-gradient(circle, var(--B500) 35%, white 36%);
+        box-shadow: 0px 0px 4px rgba(0, 0, 0, 0.4);
+        cursor: pointer;
+    }
+
+    .slider-input::-moz-range-thumb {
+        height: 24px;
+        width: 24px;
+        border-radius: 50%;
+        background-image: radial-gradient(circle, var(--B500) 35%, white 36%);
+        box-shadow: 0px 0px 4px rgba(0, 0, 0, 0.4);
+        cursor: pointer;
+    }
+
+    .slider-input-box-wrapper {
+        .slider-input-box,
+        .slider-input-unit {
+            padding: 6px 10px;
+        }
+
+        .slider-input-box {
+            width: 98px;
+            background-color: var(--N50);
+            outline: none;
+        }
+
+        .slider-input-unit {
+            background-color: white;
+            border-left: none;
+        }
+    }
+}