feat: Display values.yaml file and allow new file on upgrade (#536)

assets/src/components/cd/services/ServiceSettings.tsx

@@ -44,7 +44,7 @@ export function ServiceSettings({
   )
 }
 
-function ChartUpdate({ repo, state, updateState }) {
+export function ChartUpdate({ repo, state, updateState }) {
   const { data } = useHelmRepositoryQuery({
     variables: {
       name: repo?.name || '',
@@ -178,7 +178,7 @@ export function ModalForm({
           gap: theme.spacing.medium,
         }}
       >
-        {!serviceDeployment.helm?.chart && (
+        {serviceDeployment.repository && (
           <>
             <ServiceGitRefField
               value={state.gitRef}

assets/src/components/cd/services/ServiceUpdateHelmValues.tsx

@@ -0,0 +1,225 @@
+import { Button } from '@pluralsh/design-system'
+
+import { useTheme } from 'styled-components'
+import {
+  FormEvent,
+  useCallback,
+  useEffect,
+  useMemo,
+  useRef,
+  useState,
+} from 'react'
+import isEmpty from 'lodash/isEmpty'
+
+import {
+  HelmConfigAttributes,
+  ServiceDeploymentDetailsFragment,
+  ServiceDeploymentsRowFragment,
+  ServiceUpdateAttributes,
+  useServiceDeploymentQuery,
+  useUpdateServiceDeploymentMutation,
+} from 'generated/graphql'
+
+import { isNonNullable } from 'utils/isNonNullable'
+
+import { GqlError } from 'components/utils/Alert'
+import { ModalMountTransition } from 'components/utils/ModalMountTransition'
+import { useUpdateState } from 'components/hooks/useUpdateState'
+import LoadingIndicator from 'components/utils/LoadingIndicator'
+
+import ModalAlt from '../ModalAlt'
+
+import { ServiceSettingsHelmValues } from './deployModal/DeployServiceSettingsHelmValues'
+
+export function ServiceUpdateHelmValues({
+  serviceDeployment,
+  refetch,
+  open,
+  onClose,
+}: {
+  serviceDeployment: ServiceDeploymentsRowFragment
+  refetch: Nullable<() => void>
+  open: boolean
+  onClose: Nullable<() => void>
+}) {
+  return (
+    <ModalMountTransition open={open}>
+      <ModalForm
+        serviceDeployment={serviceDeployment}
+        refetch={refetch}
+        open={open}
+        onClose={onClose}
+      />
+    </ModalMountTransition>
+  )
+}
+
+export function ModalForm({
+  serviceDeployment,
+  ...props
+}: {
+  serviceDeployment: ServiceDeploymentsRowFragment
+  open: boolean
+  onClose: Nullable<() => void>
+  refetch: Nullable<() => void>
+}) {
+  const repo = serviceDeployment.helm?.repository
+  const { data } = useServiceDeploymentQuery({
+    variables: {
+      id: serviceDeployment.id || '',
+    },
+    skip: !repo?.name || !repo?.namespace,
+  })
+
+  if (!data?.serviceDeployment) {
+    return <LoadingIndicator />
+  }
+
+  return (
+    <ModalFormInner
+      serviceDeployment={data.serviceDeployment}
+      {...props}
+    />
+  )
+}
+
+export function ModalFormInner({
+  serviceDeployment,
+  open,
+  onClose,
+  refetch,
+}: {
+  serviceDeployment: ServiceDeploymentDetailsFragment
+  open: boolean
+  onClose: Nullable<() => void>
+  refetch: Nullable<() => void>
+}) {
+  const theme = useTheme()
+  const repo = serviceDeployment.helm?.repository
+  const { data } = useServiceDeploymentQuery({
+    variables: {
+      id: serviceDeployment.id || '',
+    },
+    skip: !repo?.name || !repo?.namespace,
+  })
+
+  const filteredValuesFiles =
+    data?.serviceDeployment?.helm?.valuesFiles?.filter(isNonNullable)
+
+  const {
+    state,
+    update: updateState,
+    hasUpdates,
+  } = useUpdateState({
+    helmValues: data?.serviceDeployment?.helm?.values ?? '',
+    helmValuesFiles:
+      filteredValuesFiles && !isEmpty(filteredValuesFiles)
+        ? filteredValuesFiles
+        : [''],
+  })
+  const [errors, setErrors] = useState(false)
+
+  const attributes = useMemo<Pick<ServiceUpdateAttributes, 'helm'>>(() => {
+    const helm: Pick<HelmConfigAttributes, 'values' | 'valuesFiles'> = {
+      values: state.helmValues || '',
+      valuesFiles: (state.helmValuesFiles || []).filter((value) => !!value),
+    }
+
+    return { helm }
+  }, [state])
+
+  const [updateService, { loading, error }] =
+    useUpdateServiceDeploymentMutation({
+      variables: {
+        id: serviceDeployment.id,
+        attributes,
+      },
+      onCompleted: () => {
+        refetch?.()
+        onClose?.()
+      },
+    })
+  const closeModal = useCallback(() => {
+    onClose?.()
+  }, [onClose])
+
+  const disabled = !hasUpdates && !errors
+  const onSubmit = useCallback(
+    (e: FormEvent) => {
+      e.preventDefault()
+      if (disabled) {
+        return
+      }
+      updateService()
+    },
+    [disabled, updateService]
+  )
+
+  const inputRef = useRef<HTMLInputElement>()
+
+  useEffect(() => {
+    inputRef.current?.focus?.()
+  }, [])
+
+  return (
+    <ModalAlt
+      header="Update Helm values"
+      open={open}
+      portal
+      onClose={closeModal}
+      asForm
+      formProps={{ onSubmit }}
+      actions={
+        <>
+          <Button
+            type="submit"
+            disabled={disabled}
+            loading={loading}
+            primary
+          >
+            Update
+          </Button>
+          <Button
+            type="button"
+            secondary
+            onClick={closeModal}
+          >
+            Cancel
+          </Button>
+        </>
+      }
+    >
+      <div
+        css={{
+          display: 'flex',
+          flexDirection: 'column',
+          gap: theme.spacing.medium,
+        }}
+      >
+        <ServiceSettingsHelmValues
+          helmValues={state.helmValues}
+          setHelmValues={(next) =>
+            updateState({
+              helmValues:
+                typeof next === 'function' ? next(state.helmValues) : next,
+            })
+          }
+          helmValuesFiles={state.helmValuesFiles}
+          setHelmValuesFiles={(next) =>
+            updateState({
+              helmValuesFiles:
+                typeof next === 'function' ? next(state.helmValuesFiles) : next,
+            })
+          }
+          setHelmValuesErrors={setErrors}
+        />
+      </div>
+      {error && (
+        <GqlError
+          header="Problem updating Helm values"
+          error={error}
+        />
+      )}
+    </ModalAlt>
+  )
+}

assets/src/components/cd/services/ServicesColumns.tsx

@@ -5,6 +5,7 @@ import {
   GitHubLogoIcon,
   GlobeIcon,
   ListBoxItem,
+  ListIcon,
   PeopleIcon,
   Tooltip,
   TrashCanIcon,
@@ -33,6 +34,7 @@ import { ServiceDeprecations } from './ServiceDeprecations'
 import { CreateGlobalService } from './CreateGlobalService'
 import { DeleteGlobalService } from './DeleteGlobalService'
 import { ServiceSettings } from './ServiceSettings'
+import { ServiceUpdateHelmValues } from './ServiceUpdateHelmValues'
 
 const columnHelper = createColumnHelper<Edge<ServiceDeploymentsRowFragment>>()
 
@@ -216,6 +218,7 @@ enum MenuItemKey {
   DeleteGlobal = 'deleteGlobal',
   Permissions = 'permissions',
   Settings = 'settings',
+  HelmValues = 'helmValues',
   Delete = 'delete',
 }
 
@@ -273,6 +276,14 @@ export const ColActions = columnHelper.accessor(({ node }) => node?.id, {
               label="Permissions"
               textValue="Permissions"
             />
+            {serviceDeployment.helm && (
+              <ListBoxItem
+                key={MenuItemKey.HelmValues}
+                leftContent={<ListIcon />}
+                label="Helm values"
+                textValue="Helm values"
+              />
+            )}
             <ListBoxItem
               key={MenuItemKey.Settings}
               leftContent={<GearTrainIcon />}
@@ -314,6 +325,14 @@ export const ColActions = columnHelper.accessor(({ node }) => node?.id, {
               setMenuKey('')
             }}
           />
+          <ServiceUpdateHelmValues
+            serviceDeployment={serviceDeployment}
+            open={menuKey === MenuItemKey.HelmValues}
+            onClose={() => {
+              setMenuKey('')
+            }}
+            refetch={refetch}
+          />
           <ServiceSettings
             serviceDeployment={serviceDeployment}
             open={menuKey === MenuItemKey.Settings}

assets/src/components/cd/services/deployModal/DeployService.tsx

@@ -31,7 +31,7 @@ import {
   Secret,
 } from './DeployServiceSettingsSecrets'
 import DeployServiceSettingsHelm from './DeployServiceSettingsHelm'
-import { DeployServiceSettingsHelmValues } from './DeployServiceSettingsHelmValues'
+import { ServiceSettingsHelmValues } from './DeployServiceSettingsHelmValues'
 
 enum FormState {
   Initial = 'initial',
@@ -430,7 +430,7 @@ export function DeployServiceModal({
             </div>
           </RepoKindSelector>
         ) : formState === FormState.HelmValues ? (
-          <DeployServiceSettingsHelmValues
+          <ServiceSettingsHelmValues
             helmValues={helmValues}
             setHelmValues={setHelmValues}
             helmValuesFiles={helmValuesFiles}