feat(UI): add enabled field to explicitly set in automatedSync in SyncPolicy

[aali309]

Adding enable field to explicitly set in automatedSync in SyncPolicy on UI

Fixes #21647
Part of: #21999

This PR add a boolean field named enable in Spec.SyncPolicy.Automated for explicitly enabling or disabling automatedSync.
These changes don't affect the current behaviour.
This field can be set using

spec:
  syncPolicy:
    automated:
      enabled: true

Checklist:

• Either (a) I've created an enhancement proposal and discussed it with the community, (b) this is a bug fix, or (c) this does not need to be in the release notes.
• The title of the PR states what changed and the related issues number (used for the release note).
• The title of the PR conforms to the Toolchain Guide
• I've included "Closes [ISSUE #]" or "Fixes [ISSUE #]" in the description to automatically close the associated issue.
• I've updated both the CLI and UI to expose my feature, or I plan to submit a second PR with them.
• Does this PR require documentation updates?
• I've updated documentation as required by this PR.
• I have signed off all my commits as required by DCO
• I have written unit and/or e2e tests for my change. PRs without these are unlikely to be merged.
• My build is green (troubleshooting builds).
• My new feature complies with the feature status guidelines.
• I have added a brief description of why this PR is necessary and/or what this PR solves.
• Optional. My organization is added to USERS.md.
• Optional. For bug fixes, I've indicated what older releases this fix should be cherry-picked into (this may or may not happen depending on risk/complexity).

[bunnyshell]

🔴 Preview Environment stopped on Bunnyshell

See: Environment Details | Pipeline Logs

Available commands (reply to this comment):

• 🔵 /bns:start to start the environment
• 🚀 /bns:deploy to redeploy the environment
• ❌ /bns:delete to remove the environment

[aali309]

@anandrkskd can you please take a look at this, its part of what you did on the UI side. cc @anandf

[agaudreault]

@aali309 For UI PRs, please provide UI screenshot or videos of the previous vs. new experience.

[aali309]

Creating applications before:

Creating applications After:

Application summary view before:

Application summary view after:

[anandrkskd]

While trying a test case, which might be confusing for user

• If the existing user has enabled the automated Sync using .spec.syncPolicy.automated: {}, UI shows the checkbox for ENABLE AUTO-SYNC is not ticked.

• It is same, if the field .spec.syncPolicy.automated.enabled: false is set, the UI shows the same as the above

• Autosync enabled using .spec.syncPolicy.automated: {}
  

• autoSync disabled using .spec.syncPolicy.automated.enabled: false
  

[anandrkskd]

Is this an intended behaviour?
when the enabled field is set to false, whenever we are making changes using UI to enable the prune resource or self heal fields the enabled field is reset to true

Screen.Recording.2025-04-02.at.2.43.39.PM.mov

@aali309 this seems like a bug, can we confirm this behaviour?

[aali309]

Is this an intended behaviour? when the enabled field is set to false, whenever we are making changes using UI to enable the prune resource or self heal fields the enabled field is reset to true

Screen.Recording.2025-04-02.at.2.43.39.PM.mov
@aali309 this seems like a bug, can we confirm this behaviour?

Yes, its a bug, fixed now. THNX @anandrkskd

[anandrkskd]

I have checked the changes and seems to be behaving as expected, thanks @aali309.
LGTM

[keithchong]

Could we still simply call setAutoSync from here like for the other two flags? So pass the current state of the enabled flag to ensure it's preserved, and then you don't have to change setAutoSync, other than to allow enabled to be passed in?

When we're enabling autosync, eg. automated is first added, do you want to maintain the previous behaviour so that you only introduce the enabled element when the user checks the enabled checkbox?

The checkbox being unchecked right now maps to two different situations in the actual CRD. Unchecked, is for enabled: false as well as for when the enabled field does not exist. Checked, is for enabled: true in the CRD only, which is ok. This can lead to inconsistencies when you initialize the state of the checkbox when you first visit the page. It is particularly evident when you make changes directly to YAML (via the YAML source in the UI, or changing it externally).

So, it's like you need a third state and perhaps the use of another widget. Potentially, a drop down combo could be used with three selections: 1. a blank entry, 2. true and 3. false. One for each of the three situations.

On a separate note, the UI representation for selfHeal and prune could be improved - I see they have similar issues.

[keithchong]

Something like this:

                                                    setAutoSync(
                                                        ctx,
                                                        val ? 'Enable Auto-Sync?' : 'Disable Auto-Sync?',
                                                        val
                                                            ? 'If checked, application will automatically sync when changes are detected'
                                                            : 'Are you sure you want to disable automated application synchronization',
                                                        app.spec.syncPolicy.automated.prune,
                                                        app.spec.syncPolicy.automated.selfHeal,
                                                        val
                                                    )

[aali309]

The behaviour on the back end is that the enabled field is enabled by default when sync is automated. Also to make the behaviour consistent across both the UI and backend. The UI's checkbox logic (automated.enabled !== false) matches the backend's logic (Enabled == nil || *Enabled).
So when you set automated: {}, you're effectively enabling auto-sync because Enabled is nil, which is treated as enabled by design.

This means:
When automated: {}, then enabled is undefined and undefined !== false evaluates to true, therefore, the checkbox appears ticked.
This behaviour is actually documented in docs/user-guide/auto_sync.md:

Setting spec.syncPolicy.automated.enabled flag to null will be treated as automated sync as enabled.
So there are three equivalent ways to enable auto-sync:

1. automated: {}
2. automated: {enabled: null}
3. automated: {enabled: true}

And only one way to explicitly disable it:
automated: {enabled: false}