web/standards: fix boolean attribute abuse

web/src/admin/AdminInterface/index.entrypoint.ts

@@ -56,18 +56,14 @@ export class AdminInterface extends WithLicenseSummary(AuthenticatedInterface) {
 
     protected readonly ws: WebsocketClient;
 
-    @property({
-        type: Object,
-        attribute: false,
-        reflect: false,
-    })
+    @property({ type: Object, attribute: false })
     public user?: SessionUser;
 
     @query("ak-about-modal")
     public aboutModal?: AboutModal;
 
     @property({ type: Boolean, reflect: true })
-    public sidebarOpen: boolean;
+    public sidebarOpen = false;
 
     @eventOptions({ passive: true })
     protected sidebarListener(event: CustomEvent<SidebarToggleEventDetail>) {

web/src/admin/admin-overview/AdminOverviewPage.ts

@@ -88,7 +88,6 @@ export class AdminOverviewPage extends AdminOverviewBase {
         return html` <ak-page-header
                 header=${msg(str`Welcome, ${username || ""}.`)}
                 description=${msg("General system status")}
-                ?hasIcon=${false}
             >
             </ak-page-header>
             <section class="pf-c-page__main-section">

web/src/admin/applications/ApplicationCheckAccessForm.ts

@@ -93,11 +93,7 @@ export class ApplicationCheckAccessForm extends Form<{ forUser: number }> {
     }
 
     renderForm(): TemplateResult {
-        return html`<ak-form-element-horizontal
-                label=${msg("User")}
-                ?required=${true}
-                name="forUser"
-            >
+        return html`<ak-form-element-horizontal label=${msg("User")} required name="forUser">
                 <ak-search-select
                     .fetchObjects=${async (query?: string): Promise<User[]> => {
                         const args: CoreUsersListRequest = {

web/src/admin/applications/ApplicationViewPage.ts

@@ -99,7 +99,6 @@ export class ApplicationViewPage extends AKElement {
         return html`<ak-page-header
                 header=${this.application?.name || msg("Loading")}
                 description=${ifDefined(this.application?.metaPublisher)}
-                .iconImage=${true}
             >
                 <ak-app-icon
                     size=${PFSize.Medium}

web/src/admin/applications/ProviderSelectModal.ts

@@ -20,7 +20,7 @@ export class ProviderSelectModal extends TableModal<Provider> {
     }
 
     @property({ type: Boolean })
-    backchannel?: boolean;
+    backchannel = false;
 
     @property()
     confirm!: (selectedItems: Provider[]) => Promise<unknown>;

web/src/admin/applications/components/ak-backchannel-input.ts

@@ -56,17 +56,14 @@ export class AkBackchannelProvidersInput extends AKElement {
 
     render() {
         const renderOneChip = (provider: Provider) =>
-            html`<ak-chip
-                .removable=${true}
-                value=${ifDefined(provider.pk)}
-                @remove=${this.remover(provider)}
+            html`<ak-chip value=${ifDefined(provider.pk)} @remove=${this.remover(provider)}
                 >${provider.name}</ak-chip
             >`;
 
         return html`
             <ak-form-element-horizontal label=${this.label} name=${this.name}>
                 <div class="pf-c-input-group">
-                    <ak-provider-select-table ?backchannel=${true} .confirm=${this.confirm}>
+                    <ak-provider-select-table backchannel .confirm=${this.confirm}>
                         <button slot="trigger" class="pf-c-button pf-m-control" type="button">
                             ${this.tooltip ? this.tooltip : nothing}
                             <i class="fas fa-plus" aria-hidden="true"></i>

web/src/admin/applications/entitlements/ApplicationEntitlementForm.ts

@@ -54,19 +54,15 @@ export class ApplicationEntitlementForm extends ModelForm<ApplicationEntitlement
     }
 
     renderForm(): TemplateResult {
-        return html` <ak-form-element-horizontal label=${msg("Name")} ?required=${true} name="name">
+        return html` <ak-form-element-horizontal label=${msg("Name")} required name="name">
                 <input
                     type="text"
                     value="${this.instance?.name ?? ""}"
                     class="pf-c-form-control"
                     required
                 />
             </ak-form-element-horizontal>
-            <ak-form-element-horizontal
-                label=${msg("Attributes")}
-                ?required=${false}
-                name="attributes"
-            >
+            <ak-form-element-horizontal label=${msg("Attributes")} name="attributes">
                 <ak-codemirror
                     mode=${CodeMirrorMode.YAML}
                     value="${YAML.stringify(this.instance?.attributes ?? {})}"

web/src/admin/applications/wizard/steps/providers/ak-application-wizard-provider-for-rac.ts

@@ -37,7 +37,7 @@ export class ApplicationWizardRACProviderForm extends ApplicationWizardProviderF
                 <ak-form-element-horizontal
                     name="authorizationFlow"
                     label=${msg("Authorization flow")}
-                    ?required=${true}
+                    required
                 >
                     <ak-flow-search
                         flowType=${FlowsInstancesListDesignationEnum.Authorization}
@@ -60,7 +60,7 @@ export class ApplicationWizardRACProviderForm extends ApplicationWizardProviderF
                     inputHint="code"
                 ></ak-text-input>
 
-                <ak-form-group .expanded=${true}>
+                <ak-form-group expanded>
                     <span slot="header"> ${msg("Protocol settings")} </span>
                     <div slot="body" class="pf-c-form">
                         <ak-form-element-horizontal

web/src/admin/blueprints/BlueprintForm.ts

@@ -65,7 +65,7 @@ export class BlueprintForm extends ModelForm<BlueprintInstance, string> {
     }
 
     renderForm(): TemplateResult {
-        return html` <ak-form-element-horizontal label=${msg("Name")} ?required=${true} name="name">
+        return html` <ak-form-element-horizontal label=${msg("Name")} required name="name">
                 <input
                     type="text"
                     value="${ifDefined(this.instance?.name)}"
@@ -133,7 +133,7 @@ export class BlueprintForm extends ModelForm<BlueprintInstance, string> {
                                   .selected=${(item: BlueprintFile): boolean => {
                                       return this.instance?.path === item.path;
                                   }}
-                                  ?blankable=${true}
+                                  blankable
                               >
                               </ak-search-select>
                           </ak-form-element-horizontal>`

web/src/admin/brands/BrandForm.ts

@@ -134,7 +134,7 @@ export class BrandForm extends ModelForm<Brand, string> {
                     </ak-form-element-horizontal>
                     <ak-form-element-horizontal
                         label=${msg("Default flow background")}
-                        ?required=${true}
+                        required
                         name="brandingDefaultFlowBackground"
                     >
                         <input

web/src/admin/common/ak-core-group-search.ts

@@ -95,7 +95,7 @@ export class CoreGroupSearch extends CustomListenerElement(AKElement) {
                 .value=${renderValue}
                 .selected=${this.selected}
                 @ak-change=${this.handleSearchUpdate}
-                ?blankable=${true}
+                blankable
             >
             </ak-search-select>
         `;

web/src/admin/common/ak-crypto-certificate-search.ts

@@ -120,7 +120,7 @@ export class AkCryptoCertificateSearch extends CustomListenerElement(AKElement)
                 .value=${renderValue}
                 .selected=${this.selected}
                 @ak-change=${this.handleSearchUpdate}
-                ?blankable=${true}
+                blankable
             >
             </ak-search-select>
         `;

web/src/admin/common/ak-flow-search/ak-flow-search.stories.ts

@@ -110,7 +110,7 @@ export const Default = () =>
     container(
         html` <ak-form-element-horizontal
             label=${msg("Authorization flow")}
-            ?required=${true}
+            required
             name="authorizationFlow"
         >
             <ak-flow-search
@@ -124,7 +124,7 @@ export const WithInitialValue = () =>
     container(
         html` <ak-form-element-horizontal
             label=${msg("Authorization flow")}
-            ?required=${true}
+            required
             name="authorizationFlow"
         >
             <ak-flow-search

web/src/admin/crypto/CertificateGenerateForm.ts

@@ -29,7 +29,7 @@ export class CertificateKeyPairForm extends Form<CertificateGenerationRequest> {
         return html`<ak-form-element-horizontal
                 label=${msg("Common Name")}
                 name="commonName"
-                ?required=${true}
+                required
             >
                 <input type="text" class="pf-c-form-control" required />
             </ak-form-element-horizontal>
@@ -39,18 +39,10 @@ export class CertificateKeyPairForm extends Form<CertificateGenerationRequest> {
                     ${msg("Optional, comma-separated SubjectAlt Names.")}
                 </p>
             </ak-form-element-horizontal>
-            <ak-form-element-horizontal
-                label=${msg("Validity days")}
-                name="validityDays"
-                ?required=${true}
-            >
+            <ak-form-element-horizontal label=${msg("Validity days")} name="validityDays" required>
                 <input class="pf-c-form-control" type="number" value="365" />
             </ak-form-element-horizontal>
-            <ak-form-element-horizontal
-                label=${msg("Private key Algorithm")}
-                ?required=${true}
-                name="alg"
-            >
+            <ak-form-element-horizontal label=${msg("Private key Algorithm")} required name="alg">
                 <ak-radio
                     .options=${[
                         {

web/src/admin/crypto/CertificateKeyPairForm.ts

@@ -37,7 +37,7 @@ export class CertificateKeyPairForm extends ModelForm<CertificateKeyPair, string
     }
 
     renderForm(): TemplateResult {
-        return html` <ak-form-element-horizontal label=${msg("Name")} name="name" ?required=${true}>
+        return html` <ak-form-element-horizontal label=${msg("Name")} name="name" required>
                 <input
                     type="text"
                     value="${ifDefined(this.instance?.name)}"
@@ -49,7 +49,7 @@ export class CertificateKeyPairForm extends ModelForm<CertificateKeyPair, string
                 label=${msg("Certificate")}
                 name="certificateData"
                 ?writeOnly=${this.instance !== undefined}
-                ?required=${true}
+                required
             >
                 <textarea
                     autocomplete="off"

web/src/admin/events/RuleForm.ts

@@ -58,7 +58,7 @@ export class RuleForm extends ModelForm<NotificationRule, string> {
     }
 
     renderForm(): TemplateResult {
-        return html` <ak-form-element-horizontal label=${msg("Name")} ?required=${true} name="name">
+        return html` <ak-form-element-horizontal label=${msg("Name")} required name="name">
                 <input
                     type="text"
                     value="${ifDefined(this.instance?.name)}"
@@ -88,7 +88,7 @@ export class RuleForm extends ModelForm<NotificationRule, string> {
                     .selected=${(group: Group): boolean => {
                         return group.pk === this.instance?.group;
                     }}
-                    ?blankable=${true}
+                    blankable
                 >
                 </ak-search-select>
                 <p class="pf-c-form__helper-text">
@@ -97,11 +97,7 @@ export class RuleForm extends ModelForm<NotificationRule, string> {
                     )}
                 </p>
             </ak-form-element-horizontal>
-            <ak-form-element-horizontal
-                label=${msg("Transports")}
-                ?required=${true}
-                name="transports"
-            >
+            <ak-form-element-horizontal label=${msg("Transports")} required name="transports">
                 <ak-dual-select-dynamic-selected
                     .provider=${eventTransportsProvider}
                     .selector=${eventTransportsSelector(this.instance?.transports)}
@@ -114,7 +110,7 @@ export class RuleForm extends ModelForm<NotificationRule, string> {
                     )}
                 </p>
             </ak-form-element-horizontal>
-            <ak-form-element-horizontal label=${msg("Severity")} ?required=${true} name="severity">
+            <ak-form-element-horizontal label=${msg("Severity")} required name="severity">
                 <ak-radio
                     .options=${[
                         {

web/src/admin/flows/BoundStagesList.ts

@@ -127,7 +127,7 @@ export class BoundStagesList extends Table<FlowStageBinding> {
                 <div slot="primary">
                     <ak-stage-wizard
                         createText=${msg("Create and bind Stage")}
-                        ?showBindingPage=${true}
+                        showBindingPage
                         bindingTarget=${ifDefined(this.target)}
                     ></ak-stage-wizard>
                     <ak-forms-modal>
@@ -148,7 +148,7 @@ export class BoundStagesList extends Table<FlowStageBinding> {
         return html`
             <ak-stage-wizard
                 createText=${msg("Create and bind Stage")}
-                ?showBindingPage=${true}
+                showBindingPage
                 bindingTarget=${ifDefined(this.target)}
             ></ak-stage-wizard>
             <ak-forms-modal>

web/src/admin/flows/FlowForm.ts

@@ -77,15 +77,15 @@ export class FlowForm extends WithCapabilitiesConfig(ModelForm<Flow, string>) {
     }
 
     renderForm(): TemplateResult {
-        return html` <ak-form-element-horizontal label=${msg("Name")} ?required=${true} name="name">
+        return html` <ak-form-element-horizontal label=${msg("Name")} required name="name">
                 <input
                     type="text"
                     value="${ifDefined(this.instance?.name)}"
                     class="pf-c-form-control"
                     required
                 />
             </ak-form-element-horizontal>
-            <ak-form-element-horizontal label=${msg("Title")} ?required=${true} name="title">
+            <ak-form-element-horizontal label=${msg("Title")} required name="title">
                 <input
                     type="text"
                     value="${ifDefined(this.instance?.title)}"
@@ -94,7 +94,7 @@ export class FlowForm extends WithCapabilitiesConfig(ModelForm<Flow, string>) {
                 />
                 <p class="pf-c-form__helper-text">${msg("Shown as the Title in Flow pages.")}</p>
             </ak-form-element-horizontal>
-            <ak-form-element-horizontal label=${msg("Slug")} ?required=${true} name="slug">
+            <ak-form-element-horizontal label=${msg("Slug")} required name="slug">
                 <input
                     type="text"
                     value="${ifDefined(this.instance?.slug)}"
@@ -105,11 +105,7 @@ export class FlowForm extends WithCapabilitiesConfig(ModelForm<Flow, string>) {
                 />
                 <p class="pf-c-form__helper-text">${msg("Visible in the URL.")}</p>
             </ak-form-element-horizontal>
-            <ak-form-element-horizontal
-                label=${msg("Designation")}
-                ?required=${true}
-                name="designation"
-            >
+            <ak-form-element-horizontal label=${msg("Designation")} required name="designation">
                 <select class="pf-c-form-control">
                     <option value="" ?selected=${this.instance?.designation === undefined}>
                         ---------
@@ -168,7 +164,7 @@ export class FlowForm extends WithCapabilitiesConfig(ModelForm<Flow, string>) {
             </ak-form-element-horizontal>
             <ak-form-element-horizontal
                 label=${msg("Authentication")}
-                ?required=${true}
+                required
                 name="authentication"
             >
                 <select class="pf-c-form-control">
@@ -243,7 +239,7 @@ export class FlowForm extends WithCapabilitiesConfig(ModelForm<Flow, string>) {
                     </ak-form-element-horizontal>
                     <ak-form-element-horizontal
                         label=${msg("Denied action")}
-                        ?required=${true}
+                        required
                         name="deniedAction"
                     >
                         <ak-radio
@@ -282,7 +278,7 @@ export class FlowForm extends WithCapabilitiesConfig(ModelForm<Flow, string>) {
                     </ak-form-element-horizontal>
                     <ak-form-element-horizontal
                         label=${msg("Policy engine mode")}
-                        ?required=${true}
+                        required
                         name="policyEngineMode"
                     >
                         <ak-radio
@@ -312,11 +308,7 @@ export class FlowForm extends WithCapabilitiesConfig(ModelForm<Flow, string>) {
             <ak-form-group>
                 <span slot="header"> ${msg("Appearance settings")} </span>
                 <div slot="body" class="pf-c-form">
-                    <ak-form-element-horizontal
-                        label=${msg("Layout")}
-                        ?required=${true}
-                        name="layout"
-                    >
+                    <ak-form-element-horizontal label=${msg("Layout")} required name="layout">
                         <select class="pf-c-form-control">
                             <option
                                 value=${FlowLayoutEnum.Stacked}