Skip to main content

Add or remove a shared resource type

Shared resources are the lists below the workload tabs (ConfigMaps, Secrets, PVCs, etc.).

This guide walks through adding a new type and removing an existing one.

Add a resource type​

Example: add a NetworkPolicy list.

You touch three files: baseline.js, App.jsx, and toValues.js. Optionally a Helm template too.

Step 1 — describe it in baseline.js​

Add an entry to resourceSections[]:

// ui/docs/src/app/charts/baseline.js — resourceSections[]
{
  key: 'networkPolicies',
  label: '🔒 Network Policies',
  tip: 'NetworkPolicies applied with this release',
  addLabel: 'NetworkPolicy',
  stateKey: 'networkPolicies',
  nextIdKey: 'netpolNext',
  createItem: (id) => ({ id, name: '', yaml: '' }),
  fields: [
    { key: 'name', label: 'Name', type: 'text', placeholder: 'allow-ingress' },
    {
      key: 'yaml',
      label: 'NetworkPolicy spec (YAML)',
      type: 'yaml',
      rows: 5,
      placeholder: 'podSelector: {}\ningress:\n  - from:\n    - podSelector: {}',
    },
  ],
},

The ResourceList component renders it automatically — no JSX changes needed.

Step 2 — add state in App.jsx​

// Add useState declarations
const [networkPolicies, setNetworkPolicies] = useState([])
const [netpolNext, setNetpolNext] = useState(0)

Pass them to ResourceList the same way existing resources are wired (look at how configMaps/setConfigMaps/cmNext/setCmNext are passed).

Add to the toValues() call and useMemo dep array:

const values = useMemo(() => toValues({
  workloads, configMaps, secrets, sealedSecrets, pvcs,
  networkPolicies,   // ← add
  global, persistentVolumes, extraManifests,
}), [...deps, networkPolicies])

Add prefill in prefillFromValues():

networkPolicies: (v.networkPolicies || []).map((np, i) => ({
  id: i,
  name: np.name || '',
  yaml: dumpOrEmpty({
    podSelector: np.podSelector,
    ingress: np.ingress,
    egress: np.egress,
  }),
})),

Also wire the setter in handleApplyUpload:

setNetworkPolicies(state.networkPolicies)
setNetpolNext(state.networkPolicies.length)

Step 3 — emit in toValues.js​

Add to the destructure:

export function toValues(state) {
  const { workloads, configMaps, secrets, sealedSecrets, pvcs,
          networkPolicies,   // ← add
          global, persistentVolumes, extraManifests } = state

Add the emit block:

const netpolList = (networkPolicies || [])
  .filter(np => np.name.trim())
  .map(np => clean({ name: np.name, ...parseYaml(np.yaml) }))
  .filter(Boolean)
if (netpolList.length) values.networkPolicies = netpolList

Step 4 — add the Helm template​

Create base-chart/templates/networkpolicy.yaml:

{{- range .Values.networkPolicies }}
---
apiVersion: networking.k8s.io/v1
kind: NetworkPolicy
metadata:
  name: {{ .name }}
  labels:
    app.kubernetes.io/instance: {{ $.Release.Name }}
    app.kubernetes.io/managed-by: {{ $.Release.Service }}
spec:
  {{- omit . "name" | toYaml | nindent 2 }}
{{- end }}

Remove a resource type​

Example: remove SealedSecrets.

Step 1 — remove from baseline.js​

Delete the entry with key: 'sealedSecrets' from resourceSections[].

Step 2 — remove state from App.jsx​

  • Delete const [sealedSecrets, setSealedSecrets] = useState([])
  • Delete const [ssNext, setSsNext] = useState(0)
  • Remove sealedSecrets from the toValues() call and useMemo dep array
  • Remove sealedSecrets from prefillFromValues() return value
  • Remove the setter calls from handleApplyUpload

Step 3 — remove from toValues.js​

  • Remove sealedSecrets from the destructure
  • Delete the ssList emit block

Step 4 — delete the Helm template​

rm base-chart/templates/sealedsecret.yaml

Checklist​

Adding a resource type​

  • Entry in resourceSections[] in baseline.js
  • useState + counter in App.jsx
  • Pass state + setter to ResourceList in App.jsx
  • Add to toValues() call and useMemo deps in App.jsx
  • Prefill in prefillFromValues() and setter in handleApplyUpload in App.jsx
  • Emit block in toValues.js
  • Helm template in base-chart/templates/

Removing a resource type​

  • Delete entry from resourceSections[] in baseline.js
  • Remove useState + counter from App.jsx
  • Remove from toValues() call and useMemo deps
  • Remove from prefillFromValues() and handleApplyUpload in App.jsx
  • Remove emit block from toValues.js
  • Delete Helm template