[backport v2.8.next1] Add user retention admin interface

cypress/e2e/po/components/async-button.po.ts

@@ -5,6 +5,14 @@ export default class AsyncButtonPo extends ComponentPo {
     return this.self().click({ force });
   }
 
+  expectToBeDisabled(): Cypress.Chainable {
+    return this.self().should('have.attr', 'disabled', 'disabled');
+  }
+
+  expectToBeEnabled(): Cypress.Chainable {
+    return this.self().should('not.have.attr', 'disabled');
+  }
+
   label(name: string): Cypress.Chainable {
     return this.self().contains(name);
   }

cypress/e2e/po/components/labeled-input.po.ts

@@ -41,11 +41,9 @@ export default class LabeledInputPo extends ComponentPo {
   }
 
   value(): Cypress.Chainable {
-    throw new Error('Not implements');
-    // The text for the input field is in a shadow dom element. Neither the proposed two methods
-    // to dive in to the shadow dom work
-    // return this.input().find('div', { includeShadowDom: true }).invoke('text');
-    // return this.input().shadow().find('div').invoke('text');
+    return this.input().then(($element) => {
+      return $element.prop('value');
+    });
   }
 
   /**

cypress/e2e/po/components/link.po.ts

@@ -0,0 +1,7 @@
+import ComponentPo from '@/cypress/e2e/po/components/component.po';
+
+export default class LinkPo extends ComponentPo {
+  click(force = false): Cypress.Chainable {
+    return this.self().click({ force });
+  }
+}

cypress/e2e/po/pages/users-and-auth/user.retention.po.ts

@@ -0,0 +1,52 @@
+
+import PagePo from '@/cypress/e2e/po/pages/page.po';
+import CheckboxInputPo from '@/cypress/e2e/po/components/checkbox-input.po';
+import AsyncButtonPo from '@/cypress/e2e/po/components/async-button.po';
+import LabeledInputPo from '@/cypress/e2e/po/components/labeled-input.po';
+import ToggleSwitchPo from '@/cypress/e2e/po/components/toggle-switch.po';
+
+export default class UserRetentionPo extends PagePo {
+  constructor(private clusterId = '_') {
+    super(UserRetentionPo.createPath(clusterId));
+  }
+
+  private static createPath(clusterId: string) {
+    return `/c/${ clusterId }/auth/user.retention`;
+  }
+
+  saveButton() {
+    return new AsyncButtonPo('[data-testid="action-button-async-button"]');
+  }
+
+  enableRegistryCheckbox(): CheckboxInputPo {
+    return new CheckboxInputPo('[data-testid="registries-enable-checkbox"]');
+  }
+
+  disableAfterPeriodCheckbox(): CheckboxInputPo {
+    return new CheckboxInputPo('[data-testid="disableAfterPeriod"]');
+  }
+
+  disableAfterPeriodInput() {
+    return new LabeledInputPo('[data-testid="disableAfterPeriodInput"]');
+  }
+
+  deleteAfterPeriodCheckbox(): CheckboxInputPo {
+    return new CheckboxInputPo('[data-testid="deleteAfterPeriod"]');
+  }
+
+  deleteAfterPeriodInput() {
+    return new LabeledInputPo('[data-testid="deleteAfterPeriodInput"]');
+  }
+
+  userRetentionCron() {
+    return new LabeledInputPo('[data-testid="userRetentionCron"]');
+  }
+
+  userRetentionDryRun() {
+    return new ToggleSwitchPo('[data-testid="userRetentionDryRun"]');
+  }
+
+  userLastLoginDefault() {
+    return new LabeledInputPo('[data-testid="userLastLoginDefault"]');
+  }
+}

cypress/e2e/po/pages/users-and-auth/users.po.ts

@@ -2,6 +2,7 @@ import PagePo from '@/cypress/e2e/po/pages/page.po';
 import MgmtUsersListPo from '@/cypress/e2e/po/lists/management.cattle.io.user.po';
 import MgmtUserEditPo from '@/cypress/e2e/po/edit/management.cattle.io.user.po';
 import MgmtUserResourceDetailPo from '@/cypress/e2e/po/detail/management.cattle.io.user.po';
+import LinkPo from '@/cypress/e2e/po/components/link.po';
 
 export default class UsersPo extends PagePo {
   private static createPath(clusterId: string) {
@@ -31,4 +32,8 @@ export default class UsersPo extends PagePo {
   detail(userId: string) {
     return new MgmtUserResourceDetailPo(this.clusterId, userId);
   }
+
+  userRetentionLink() {
+    return new LinkPo('[data-testid="router-link-user-retention"]', this.self());
+  }
 }

cypress/e2e/tests/pages/users-and-auth/index.spec.ts

@@ -0,0 +1,90 @@
+import PagePo from '@/cypress/e2e/po/pages/page.po';
+import UsersPo from '@/cypress/e2e/po/pages/users-and-auth/users.po';
+import UserRetentionPo from '@/cypress/e2e/po/pages/users-and-auth/user.retention.po';
+
+describe('Auth Index', { testIsolation: 'off', tags: ['@explorer', '@adminUser'] }, () => {
+  before(() => {
+    cy.login();
+  });
+
+  it('can redirect', () => {
+    const page = new PagePo('/c/local/auth');
+
+    page.goTo();
+
+    cy.url().should('includes', `${ Cypress.config().baseUrl }/c/local/auth/management.cattle.io.user`);
+  });
+
+  it('can navigate to user retention settings', () => {
+    const page = new PagePo('/c/local/auth');
+
+    page.goTo();
+
+    const usersPo = new UsersPo();
+
+    usersPo.userRetentionLink().click();
+
+    cy.url().should('includes', `${ Cypress.config().baseUrl }/c/local/auth/user.retention`);
+  });
+
+  it('save button should be disabled when form is invalid', () => {
+    const page = new PagePo('/c/local/auth/user.retention');
+
+    page.goTo();
+
+    const userRetentionPo = new UserRetentionPo();
+
+    userRetentionPo.disableAfterPeriodCheckbox().set();
+    userRetentionPo.disableAfterPeriodInput().set('30d');
+
+    userRetentionPo.saveButton().expectToBeDisabled();
+  });
+
+  it('save button should be enabled when form is valid', () => {
+    const page = new PagePo('/c/local/auth/user.retention');
+
+    page.goTo();
+
+    const userRetentionPo = new UserRetentionPo();
+
+    userRetentionPo.disableAfterPeriodCheckbox().set();
+    userRetentionPo.disableAfterPeriodInput().set('30d');
+    userRetentionPo.userRetentionCron().set('0 0 1 1 *');
+
+    userRetentionPo.saveButton().expectToBeEnabled();
+  });
+
+  it('can save user retention settings', () => {
+    const page = new PagePo('/c/local/auth/user.retention');
+
+    page.goTo();
+
+    const userRetentionPo = new UserRetentionPo();
+
+    userRetentionPo.disableAfterPeriodCheckbox().set();
+    userRetentionPo.disableAfterPeriodInput().set('300h');
+    userRetentionPo.deleteAfterPeriodCheckbox().set();
+    userRetentionPo.deleteAfterPeriodInput().set('600h');
+    userRetentionPo.userRetentionCron().set('0 0 1 1 *');
+    // userRetentionPo.userRetentionDryRun().set('true');
+    userRetentionPo.userLastLoginDefault().set('1718744536000');
+
+    userRetentionPo.saveButton().expectToBeEnabled();
+    userRetentionPo.saveButton().click();
+
+    cy.url().should('include', '/management.cattle.io.user');
+
+    const usersPo = new UsersPo();
+
+    usersPo.userRetentionLink().checkVisible();
+    usersPo.userRetentionLink().click();
+
+    userRetentionPo.disableAfterPeriodCheckbox().checkExists();
+    userRetentionPo.disableAfterPeriodCheckbox().isChecked();
+    userRetentionPo.disableAfterPeriodInput().value().should('equal', '300h');
+    userRetentionPo.deleteAfterPeriodCheckbox().isChecked();
+    userRetentionPo.deleteAfterPeriodInput().value().should('equal', '600h');
+    userRetentionPo.userRetentionCron().value().should('equal', '0 0 1 1 *');
+    userRetentionPo.userLastLoginDefault().value().should('equal', '1718744536000');
+  });
+});

package.json

@@ -209,4 +209,4 @@
     "follow-redirects": ">=1.14.7",
     "merge": ">=2.1.1"
   }
-}
+}

pkg/rancher-components/src/components/Form/LabeledInput/LabeledInput.vue

@@ -322,14 +322,20 @@ export default (
       :hover="hoverTooltip"
       :value="validationMessage"
     />
-    <label
-      v-if="cronHint"
-      class="cron-label"
-    >{{ cronHint }}</label>
-    <label
-      v-if="subLabel"
+    <div
+      v-if="cronHint || subLabel"
       class="sub-label"
-    >{{ subLabel }}</label>
+    >
+      <div
+        v-if="cronHint"
+      >
+        {{ cronHint }}
+      </div>
+      <div
+        v-if="subLabel"
+        v-clean-html="subLabel"
+      />
+    </div>
   </div>
 </template>
 <style scoped lang="scss">

shell/assets/styles/global/_labeled-input.scss

@@ -121,6 +121,7 @@
   .cron-label, .sub-label {
     position: absolute;
     top: 100%;
+    width: 100%;
     padding-top: 5px;
     left: 0;
     color: var(--input-label);

shell/assets/translations/en-us.yaml

@@ -5633,6 +5633,41 @@ user:
         placeholder: e.g. This account is for John Smith
   list:
     errorRefreshingGroupMemberships: Error refreshing group memberships
+  retention:
+    button:
+      label: User retention settings
+    growl:
+      title: Save user retention settings
+      message: User retention settings have been updated successfully
+    edit:
+      title:
+        header: "Users: Settings"
+        pre: "Users:"
+        post: Settings
+        subTitle: User retention
+      form:
+        disableAfter:
+          checkbox: Disable user accounts after an inactivity period (duration since last login)
+          input:
+            label: Inactivity period
+            tooltip: Uses duration units (e.g. use 30h for 30 hours)
+        deleteAfter:
+          checkbox: Delete user accounts after an inactivity period (duration since last login)
+          input:
+            label: Inactivity period
+            tooltip: Uses duration units (e.g. use 30h for 30 hours)
+            subLabel: This value must be larger than the Disable period, if it's active
+        cron:
+          label: User retention process schedule
+          subLabel: The user retention process runs as a cron job (required)
+          errorMessage: User retention process schedule must be a valid cron expression
+        dryRun:
+          label: Run the user retention process in DRY mode (no changes will be applied)
+          subLabel: You can check the logs to see which accounts would be affected
+        defaultLastLogin:
+          label: Default last login (ms)
+          subLabel: Accounts without a registered last login timestamp will get this as a default
+          placeholder: Unix timestamp
 validation:
   noUpperCase: 'Alphanumeric characters in "{key}" must be lowercase'
   arrayLength:

shell/components/ResourceList/Masthead.vue

@@ -163,7 +163,7 @@ export default {
 </script>
 
 <template>
-  <header>
+  <header class="with-subheader">
     <slot name="typeDescription">
       <TypeDescription :resource="resource" />
     </slot>
@@ -180,6 +180,11 @@ export default {
         :indeterminate="loadIndeterminate"
       />
     </div>
+    <div class="sub-header">
+      <slot name="subHeader">
+        <!--Slot content-->
+      </slot>
+    </div>
     <div class="actions-container">
       <slot name="actions">
         <div class="actions">
@@ -221,4 +226,16 @@ export default {
   header {
     margin-bottom: 20px;
   }
+
+  header.with-subheader {
+    grid-template-areas:
+      'type-banner type-banner'
+      'title actions'
+      'sub-header sub-header'
+      'state-banner state-banner';
+  }
+
+  .sub-header {
+    grid-area: sub-header;
+  }
 </style>