feat(KFLUXUI-1008): add version details page

[marcin-michal]

Fixes

KFLUXUI-1008

Description

Adds the version details page, with version about the version and it's last commit/build pipeline run.

The information about commit and pipeline run is not working right now, as there is no label to identify versions pipeline runs yet.

Builds upon #712 which should be merged first.

Type of change

• Feature
• Bugfix
• Code style update (formatting, renaming)
• Refactoring (no functional changes, no api changes)
• Build related changes
• Documentation content changes
• Other (please describe):

Screen shots / Gifs for design review

How to test or reproduce?

1. Spin up local Konflux cluster https://github.com/konflux-ci/konflux-ci/?tab=readme-ov-file#konflux-ci
2. Once running, apply new Component CR https://github.com/sahil143/kflux-scripts/blob/main/yamls/crds/kflux-components-crd.yaml

kubectl apply -f yamls/crds/kflux-components-crd.yaml

3. Change line 164 here https://github.com/sahil143/kflux-scripts/blob/main/scripts/mock-components.mjs#L164 to this

    await $`kubectl patch components.kflux.dev ${name} -n ${namespace} --type merge --subresource=status -p ${JSON.stringify(
      { status }
    )}`;

4. Run yarn run create-mock-components on one of the precreated namespaces in the local cluster.
5. Apply this to be able to view the new component CR

apiVersion: rbac.authorization.k8s.io/v1
kind: ClusterRole
metadata:
  name: konflux-kflux-dev-components-admin
  labels:
    rbac.konflux-ci.dev/aggregate-to-admin: "true"
rules:
- apiGroups:
  - kflux.dev
  resources:
  - components
  verbs:
  - get
  - list
  - watch
  - create
  - update
  - patch
  - delete
  - deletecollection

6. Configure Konflux UI to run with the local Konflux https://github.com/konflux-ci/konflux-ui?tab=readme-ov-file#running-with-konflux-ci
7. Navigate to the new version page (any of the component names that were generated by the script) https://localhost:8080/ns/<ns>/components/<component>/versions/<versionREVISION>. Note that the revision should be used in the URL, not the name.

[coderabbitai]

Important

Review skipped

Draft detected.

Please check the settings in the CodeRabbit UI or the .coderabbit.yaml file in this repository. To trigger a single review, invoke the @coderabbitai review command.

You can disable this status message by setting the reviews.review_status to false in the CodeRabbit configuration file.

Use the checkbox below for a quick retry:

• 🔍 Trigger review

Note

.coderabbit.yaml has unrecognized properties

CodeRabbit is using all valid settings from your configuration. Unrecognized properties (listed below) have been ignored and may indicate typos or deprecated fields that can be removed.

⚠️ Parsing warnings (1)

Validation error: Unrecognized key(s) in object: 'version', 'include', 'exclude', 'rules', 'limits'

⚙️ Configuration instructions

• Please see the configuration documentation for more information.
• You can also validate your configuration using the online YAML validator.
• If your editor has YAML language server enabled, you can add the path at the top of this file to enable auto-completion and validation: # yaml-language-server: $schema=https://coderabbit.ai/integrations/schema.v2.json

✨ Finishing Touches

🧪 Generate unit tests (beta)

• Create PR with unit tests
• Post copyable unit tests in a comment

---

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

• X
• Mastodon
• Reddit
• LinkedIn

_{Comment @coderabbitai help to get the list of available commands and usage tips.}

[snyk-io]

✅ Snyk checks have passed. No issues have been found so far.

Status	Scanner	Critical	High	Medium	Low	Total (0)
✅	Open Source Security	0	0	0	0	0 issues
✅	Licenses	0	0	0	0	0 issues
✅	Code Security	0	0	0	0	0 issues

💻 Catch issues earlier using the plugins for VS Code, JetBrains IDEs, Visual Studio, and Eclipse.