Helm source support (#516)

Dockerfile

@@ -70,7 +70,7 @@ ENV HELM_VERSION=v3.10.3
 ENV TERRAFORM_VERSION=v1.2.9
 
 # renovate: datasource=github-releases depName=pluralsh/plural-cli
-ENV CLI_VERSION=v0.8.1
+ENV CLI_VERSION=v0.8.2
 
 # renovate: datasource=github-tags depName=kubernetes/kubernetes
 ENV KUBECTL_VERSION=v1.25.5

assets/src/components/cd/globalSettings/GlobalSettings.tsx

@@ -15,7 +15,9 @@ import {
   useDeploymentSettingsQuery,
 } from 'generated/graphql'
 
-import { useMemo } from 'react'
+import { useContext, useMemo } from 'react'
+
+import { LoginContext } from 'components/contexts'
 
 import { CD_BASE_CRUMBS } from '../ContinuousDeployment'
 
@@ -47,6 +49,10 @@ const directory = [
     path: 'repositories',
     label: 'Repositories',
   },
+  {
+    path: 'auto-update',
+    label: 'Auto Update',
+  },
 ]
 
 type GlobalSettingsContextType = {
@@ -60,6 +66,7 @@ export const useGlobalSettingsContext = () =>
 export function GlobalSettings() {
   const theme = useTheme()
   const { pathname } = useLocation()
+  const { configuration } = useContext<any>(LoginContext)
   const { data, refetch } = useDeploymentSettingsQuery({})
 
   const outletContext = useMemo(
@@ -70,6 +77,16 @@ export function GlobalSettings() {
     [data, refetch]
   )
 
+  const prunedDirectory = useMemo(
+    () =>
+      directory.filter(
+        ({ path }) =>
+          path !== 'auto-update' ||
+          (configuration?.byok && !data?.deploymentSettings?.selfManaged)
+      ),
+    [configuration, data]
+  )
+
   return (
     <ResponsiveLayoutPage>
       <ResponsiveLayoutSidenavContainer>
@@ -80,7 +97,7 @@ export function GlobalSettings() {
           }}
         >
           <SideNavEntries
-            directory={directory}
+            directory={prunedDirectory}
             pathname={pathname}
             pathPrefix={GLOBAL_SETTINGS_ABS_PATH}
           />

assets/src/components/cd/globalSettings/SelfManage.tsx

@@ -0,0 +1,44 @@
+import { CodeEditor } from '@pluralsh/design-system'
+import { GqlError } from 'components/utils/Alert'
+import { ScrollablePage } from 'components/utils/layout/ScrollablePage'
+import { useSelfManageMutation } from 'generated/graphql'
+import { useState } from 'react'
+import { useNavigate } from 'react-router-dom'
+
+const INTRO_TEXT =
+  '# Paste your helm values file here\n' +
+  '# this will create a service that will auto-update your instance\n' +
+  '# with these values persisted throughout'
+
+export default function SelfManage() {
+  const navigate = useNavigate()
+  const [values, setValues] = useState(INTRO_TEXT)
+  const [mutation, { loading, error }] = useSelfManageMutation({
+    variables: { values },
+    onCompleted: () => navigate('/cd/services'),
+  })
+
+  return (
+    <ScrollablePage
+      heading="Configure Automatic Upgrades"
+      gap="medium"
+      scrollable={false}
+    >
+      {error && (
+        <GqlError
+          error={error}
+          header="Failed to update service"
+        />
+      )}
+      <CodeEditor
+        value={INTRO_TEXT}
+        language="yaml"
+        save
+        saving={loading}
+        onChange={setValues}
+        onSave={() => mutation()}
+        saveLabel="Configure"
+      />
+    </ScrollablePage>
+  )
+}

assets/src/components/cd/repos/HelmHealthChip.tsx

@@ -0,0 +1,35 @@
+import { Chip, Tooltip } from '@pluralsh/design-system'
+
+export function HelmHealthChip({
+  ready,
+  message,
+}: {
+  ready: boolean
+  message?: string | null | undefined
+}) {
+  const chip = (
+    <Chip severity={ready ? 'success' : 'critical'}>
+      {ready ? 'Ready' : 'Failed'}
+    </Chip>
+  )
+
+  const errorLines = (message || '').split('\n').map((line, i, arr) => (
+    <>
+      {line}
+      {i !== arr.length - 1 && <br />}
+    </>
+  ))
+
+  if (message) {
+    return (
+      <Tooltip
+        placement="top"
+        label={<div css={{ maxWidth: 500 }}>{errorLines}</div>}
+      >
+        {chip}
+      </Tooltip>
+    )
+  }
+
+  return chip
+}

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

@@ -22,21 +22,28 @@ import { useServiceContext } from './service/ServiceDetails'
 const columnHelper =
   createColumnHelper<Nullable<ServiceDeploymentRevisionFragment>>()
 
-const ColGitRef = columnHelper.accessor((row) => row?.git.ref, {
+const ColGitRef = columnHelper.accessor((row) => row, {
   id: 'gitRef',
-  header: 'Commit ref',
+  header: 'Revision',
   meta: { truncate: true },
-  cell: ({ row: { original }, getValue }) => (
-    <Tooltip
-      placement="top-start"
-      label={getValue()}
-    >
-      <StackedText
-        first={getValue()}
-        second={`sha: ${original?.sha || ''}`}
-      />
-    </Tooltip>
-  ),
+  cell: ({ getValue }) => {
+    const rev = getValue()
+    const ref = rev?.helm?.chart
+      ? `${rev.helm.chart}@${rev.helm.version}`
+      : rev?.git?.ref
+
+    return (
+      <Tooltip
+        placement="top-start"
+        label={ref}
+      >
+        <StackedText
+          first={ref}
+          second={`sha: ${rev?.sha || ''}`}
+        />
+      </Tooltip>
+    )
+  },
 })
 
 const ColMessage = columnHelper.accessor((row) => row?.message, {
@@ -164,7 +171,7 @@ const ColActions = columnHelper.accessor((row) => row, {
                 following revision:
               </p>
               <p>
-                <div>{revision?.git.ref}</div>
+                <div>{revision?.git?.ref}</div>
                 <CaptionText css={{ color: theme.colors['text-light'] }}>
                   sha: {revision?.sha}
                 </CaptionText>

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

@@ -1,10 +1,12 @@
 import { Button, Switch } from '@pluralsh/design-system'
 import {
   ServiceDeploymentsRowFragment,
+  ServiceUpdateAttributes,
+  useHelmRepositoryQuery,
   useUpdateServiceDeploymentMutation,
 } from 'generated/graphql'
 import { useTheme } from 'styled-components'
-import { FormEvent, useCallback, useEffect, useRef } from 'react'
+import { FormEvent, useCallback, useEffect, useMemo, useRef } from 'react'
 import { GqlError } from 'components/utils/Alert'
 
 import { ModalMountTransition } from 'components/utils/ModalMountTransition'
@@ -17,6 +19,7 @@ import {
   ServiceGitFolderField,
   ServiceGitRefField,
 } from './deployModal/DeployServiceSettingsGit'
+import { ChartForm } from './deployModal/DeployServiceSettingsHelm'
 
 export function ServiceSettings({
   serviceDeployment,
@@ -41,6 +44,26 @@ export function ServiceSettings({
   )
 }
 
+function ChartUpdate({ repo, state, updateState }) {
+  const { data } = useHelmRepositoryQuery({
+    variables: {
+      name: repo?.name || '',
+      namespace: repo?.namespace || '',
+    },
+    skip: !repo?.name || !repo?.namespace,
+  })
+
+  return (
+    <ChartForm
+      charts={data?.helmRepository?.charts || []}
+      chart={state.helmChart}
+      setChart={(chart) => updateState({ helmChart: chart })}
+      version={state.helmVersion}
+      setVersion={(vsn) => updateState({ helmVersion: vsn })}
+    />
+  )
+}
+
 export function ModalForm({
   serviceDeployment,
   open,
@@ -59,22 +82,39 @@ export function ModalForm({
     update: updateState,
     hasUpdates,
   } = useUpdateState({
-    gitRef: serviceDeployment.git.ref ?? '',
-    gitFolder: serviceDeployment.git.folder ?? '',
+    gitRef: serviceDeployment.git?.ref ?? '',
+    gitFolder: serviceDeployment.git?.folder ?? '',
+    helmChart: serviceDeployment.helm?.chart ?? '',
+    helmVersion: serviceDeployment.helm?.version ?? '',
     protect: !!serviceDeployment.protect,
   })
 
+  const attributes = useMemo(() => {
+    const git =
+      state.gitRef && state.gitFolder
+        ? { folder: state.gitFolder, ref: state.gitRef }
+        : null
+    const helm =
+      state.helmChart && state.helmVersion
+        ? { chart: state.helmChart, version: state.helmVersion }
+        : null
+    let attributes: ServiceUpdateAttributes = { protect: state.protect }
+
+    if (git) {
+      attributes = { git, ...attributes }
+    }
+    if (helm) {
+      attributes = { helm, ...attributes }
+    }
+
+    return attributes
+  }, [state])
+
   const [updateService, { loading, error }] =
     useUpdateServiceDeploymentMutation({
       variables: {
         id: serviceDeployment.id,
-        attributes: {
-          git: {
-            folder: state.gitFolder,
-            ref: state.gitRef,
-          },
-          protect: state.protect,
-        },
+        attributes,
       },
       onCompleted: () => {
         refetch?.()
@@ -138,18 +178,29 @@ export function ModalForm({
           gap: theme.spacing.medium,
         }}
       >
-        <ServiceGitRefField
-          value={state.gitRef}
-          onChange={(e) => {
-            updateState({ gitRef: e.currentTarget.value })
-          }}
-        />
-        <ServiceGitFolderField
-          value={state.gitFolder}
-          onChange={(e) => {
-            updateState({ gitFolder: e.currentTarget.value })
-          }}
-        />
+        {!serviceDeployment.helm?.chart && (
+          <>
+            <ServiceGitRefField
+              value={state.gitRef}
+              onChange={(e) => {
+                updateState({ gitRef: e.currentTarget.value })
+              }}
+            />
+            <ServiceGitFolderField
+              value={state.gitFolder}
+              onChange={(e) => {
+                updateState({ gitFolder: e.currentTarget.value })
+              }}
+            />
+          </>
+        )}
+        {serviceDeployment.helm?.chart && (
+          <ChartUpdate
+            repo={serviceDeployment.helm?.repository}
+            state={state}
+            updateState={updateState}
+          />
+        )}
         <Switch
           checked={state.protect}
           onChange={(checked) => updateState({ protect: checked })}