Allow installation of incompatible packages (#867)

aschempp · aschempp · commit 87b05b01790c · 2025-09-05T09:05:13.000+02:00
diff --git a/src/components/fragments/InstallButton.vue b/src/components/fragments/InstallButton.vue
@@ -4,7 +4,7 @@
         icon="add"
         :small="small"
         :inline="inline"
-        :disabled="disabled || isRootInstalled || isAdded || isRequired || !canBeInstalled"
+        :disabled="disabled || isRootInstalled || isAdded || isRequired || !canBeInstalled || !isCompatible"
         @click="install"
         v-if="isGranted(scopes.INSTALL)"
     >
diff --git a/src/components/fragments/PackageConstraint.vue b/src/components/fragments/PackageConstraint.vue
@@ -6,14 +6,18 @@
             :placeholder="inputPlaceholder"
             :title="inputTitle"
             v-model="inputValue"
-            :class="{ disabled: !emit && (willBeRemoved || (!isInstalled && !willBeInstalled && !isRequired) || isUpload || !isGranted(scopes.INSTALL)), error: constraintError }"
+            :class="{
+                disabled: !emit && (willBeRemoved || (!isInstalled && !willBeInstalled && !isRequired) || isUpload || !isGranted(scopes.INSTALL)),
+                incompatible: isIncompatible,
+                error: constraintError,
+            }"
             :disabled="!constraintEditable || willBeRemoved || (!emit && !isInstalled && !willBeInstalled && !isRequired) || isUpload || !isGranted(scopes.INSTALL)"
             @keypress.enter.prevent="saveConstraint"
             @keypress.esc.prevent="resetConstraint"
             @blur="saveConstraint"
         />
         <button
-            :class="{ 'widget-button widget-button--gear': true, rotate: constraintValidating }"
+            :class="{ 'widget-button widget-button--gear': true, rotate: constraintValidating, incompatible: isIncompatible }"
             :title="buttonTitle"
             @click="editConstraint"
             :disabled="!emit && (willBeRemoved || (!isInstalled && !willBeInstalled && !isRequired) || isUpload || !isGranted(scopes.INSTALL))"
@@ -67,6 +71,8 @@ export default {
                 ? vm.$t('ui.package.latestConstraint')
                 : '',
 
+        isIncompatible: (vm) => !vm.isCompatible && !vm.constraint,
+
         inputValue: {
             get: (vm) => (vm.isUpload ? vm.$t('ui.package.private') : vm.constraint),
             set(value) {
@@ -221,6 +227,11 @@ export default {
             border-color: var(--border);
         }
 
+        &.incompatible {
+            background: var(--btn-alert);
+            border-color: var(--btn-alert);
+        }
+
         &.error {
             animation: input-error 0.15s linear 3;
         }
@@ -253,6 +264,10 @@ export default {
             margin: -10px 0 0 -10px;
         }
 
+        &.incompatible {
+            background: var(--btn-alert);
+        }
+
         &.rotate:before {
             animation: release-validating 2s linear infinite;
         }
diff --git a/src/components/fragments/PackageDetails.vue b/src/components/fragments/PackageDetails.vue
@@ -12,7 +12,7 @@
                         <template v-else>{{ $t('ui.package.version', { version: installedVersion }) }}</template>
                     </p>
                 </template>
-                <template v-else-if="canBeInstalled || isRequired">
+                <template v-else-if="(canBeInstalled && isCompatible) || isAdded || isRequired">
                     <install-button :data="data" />
                     <package-constraint :data="data" v-if="isAdded || isRequired" />
                 </template>
@@ -29,7 +29,17 @@
             </p>
         </template>
         <template #package-update v-else-if="!isCompatible">
-            <p class="package-popup__incompatible">{{ $t('ui.package.incompatible', { package: data.name, constraint: packageConstraint('contao/manager-bundle') }) }}</p>
+            <p class="package-popup__incompatible">
+                {{ $t('ui.package.incompatible', { package: data.name, constraint: packageConstraint('contao/manager-bundle') }) }}
+                <button
+                    type="button"
+                    class="widget-button widget-button--small widget-button--transparent widget-button--add"
+                    @click="install"
+                    v-if="canBeInstalled && !isRootInstalled && !isAdded && !isRequired"
+                >
+                    {{ $t('ui.package.incompatibleButton') }}
+                </button>
+            </p>
         </template>
         <template #suggest-actions="{ name }">
             <install-button inline small :data="{ name }" v-if="packageSuggested(name)" />
@@ -125,12 +135,20 @@ export default {
     }
 
     &__incompatible {
+        display: flex;
+        justify-content: space-between;
+        align-items: center;
+        gap: 10px;
         margin: 0 0 20px;
-        padding: 10px 20px 10px 50px;
+        padding: 10px 10px 10px 50px;
         color: var(--clr-btn);
         background: var(--contao) url('../../assets/images/button-incompatible.svg') 15px 50% no-repeat;
         background-size: 23px 23px;
         border-radius: var(--border-radius);
+
+        button {
+            flex-shrink: 0;
+        }
     }
 
     &__funding + .package-popup__update {
diff --git a/src/components/routes/PackageListRoute.vue b/src/components/routes/PackageListRoute.vue
@@ -27,8 +27,8 @@
                     type="primary"
                     icon="update"
                     :loading="cloudLoading"
-                    :disabled="cloudError"
-                    :more-disabled="cloudLoading || cloudError"
+                    :disabled="cloudError || packageIncompatible"
+                    :more-disabled="cloudLoading || cloudError || packageIncompatible"
                     :label="$t('ui.packages.changesApply')"
                     @click="hasLockFile ? applyChanges() : applyChangesAll()"
                 >
@@ -80,7 +80,7 @@ export default {
             requiredPackages: 'required',
         }),
         ...mapState('packages/uploads', ['uploads', 'uploading', 'files', 'removing', 'confirmed']),
-        ...mapGetters('packages', ['totalChanges', 'packageMissing', 'canResetChanges', 'visibleRequired', 'visibleInstalled', 'visibleAdded']),
+        ...mapGetters('packages', ['totalChanges', 'packageMissing', 'packageIncompatible', 'canResetChanges', 'visibleRequired', 'visibleInstalled', 'visibleAdded']),
         ...mapGetters('packages/uploads', ['hasUploads', 'totalUploads', 'canConfirmUploads']),
         scopes: () => scopes,
 
diff --git a/src/components/routes/Packages/BasePackage.vue b/src/components/routes/Packages/BasePackage.vue
@@ -64,7 +64,7 @@ export default {
 </script>
 
 <style rel="stylesheet/scss" lang="scss">
-@use "~contao-package-list/src/assets/styles/defaults";
+@use '~contao-package-list/src/assets/styles/defaults';
 
 $package-padding: 16px;
 
@@ -105,7 +105,7 @@ $package-padding: 16px;
 
             &:not(:first-child):before {
                 padding-right: 10px;
-                content: "|";
+                content: '|';
             }
         }
     }
@@ -125,7 +125,7 @@ $package-padding: 16px;
         &:after {
             display: table;
             clear: both;
-            content: "";
+            content: '';
         }
     }
 
@@ -427,6 +427,7 @@ $package-padding: 16px;
             width: 180px;
             margin-left: 20px;
         }
+
         &__details {
             display: flex;
             align-self: center;
diff --git a/src/components/routes/Packages/ComposerPackage.vue b/src/components/routes/Packages/ComposerPackage.vue
@@ -148,6 +148,10 @@ export default {
                     return this.$t('ui.package.hintConstraint', { constraint: this.constraintAdded });
                 }
 
+                if (!this.isCompatible) {
+                    return this.$t('ui.package.incompatibleConstraint', { constraint: this.packageConstraint('contao/manager-bundle') });
+                }
+
                 return this.$t('ui.package.hintConstraintBest');
             }
 
diff --git a/src/i18n/en.json b/src/i18n/en.json
@@ -469,6 +469,9 @@
     "ui.package.updateUnknown": "unknown version",
     "ui.package.updateConstraint": "A newer version outside your version constraint is available.",
     "ui.package.incompatible": "{package} does not work with Contao {constraint}.",
+    "ui.package.incompatibleWarning": "{package} does not work with Contao {constraint} in any of its stable releases. Do you want to add the package and set a version constraint to try installing a development branch?",
+    "ui.package.incompatibleConstraint": "This package does not have a stable release for Contao {constraint}. Set a version constraint to try installing a development branch.",
+    "ui.package.incompatibleButton": "Install",
 
     "ui.cloudStatus.headline": "Composer Resolver Cloud",
     "ui.cloudStatus.version": "Version {version}",
diff --git a/src/mixins/packageStatus.js b/src/mixins/packageStatus.js
@@ -21,6 +21,7 @@ export default {
             'packageFeature',
             'packageVisible',
             'packageSuggested',
+            'packageConstraint',
             'packageConstraintAdded',
             'packageConstraintChanged',
             'packageConstraintInstalled',
@@ -60,7 +61,7 @@ export default {
         installedTime: (vm) => (vm.installed[vm.data.name] ? vm.installed[vm.data.name].time : null),
 
         isCompatible: (vm) => vm.contaoSupported(vm.metadata.contaoConstraint),
-        canBeInstalled: (vm) => (!vm.isPrivate || vm.isSuggested) && !vm.isTheme && (!vm.isDependency || vm.isSuggested) && vm.isCompatible,
+        canBeInstalled: (vm) => (!vm.isPrivate || vm.isSuggested) && !vm.isTheme && (!vm.isDependency || vm.isSuggested),
 
         constraintInstalled: (vm) => vm.packageConstraintInstalled(vm.data.name),
         constraintRequired: (vm) => vm.packageConstraintRequired(vm.data.name),
@@ -72,6 +73,13 @@ export default {
 
     methods: {
         install() {
+            if (
+                !this.isCompatible &&
+                !confirm(this.$t('ui.package.incompatibleWarning', { package: this.data.name, constraint: this.packageConstraint('contao/manager-bundle') }))
+            ) {
+                return;
+            }
+
             this.$store.commit('packages/add', this.metadata || this.data);
         },
 
diff --git a/src/store/packages.js b/src/store/packages.js
@@ -69,6 +69,8 @@ export default {
             Object.values(state.change).filter((pkg) => Object.keys(state.required).includes(pkg.name)).length -
             state.remove.filter((pkg) => Object.keys(state.required).includes(pkg)).length,
 
+        packageIncompatible: (state, get) => !!Object.values(state.add).find((p) => !p.constraint && !get.contaoSupported(p.contaoConstraint)),
+
         canResetChanges: (s, get) => get.totalChanges > get.totalRequired,
 
         visibleRequired: (s, g) => Object.values(s.required).filter((pkg) => isVisible(pkg.name, g)),

Original file line number	Diff line number	Diff line change
`@@ -4,7 +4,7 @@`
`4`	`4`	`icon="add"`
`5`	`5`	`:small="small"`
`6`	`6`	`:inline="inline"`
`7`		`- :disabled="disabled \|\| isRootInstalled \|\| isAdded \|\| isRequired \|\| !canBeInstalled"`
	`7`	`+ :disabled="disabled \|\| isRootInstalled \|\| isAdded \|\| isRequired \|\| !canBeInstalled \|\| !isCompatible"`
`8`	`8`	`@click="install"`
`9`	`9`	`v-if="isGranted(scopes.INSTALL)"`
`10`	`10`	`>`
Original file line number	Diff line number	Diff line change
`@@ -64,7 +64,7 @@ export default {`
`64`	`64`	`</script>`
`65`	`65`
`66`	`66`	`<style rel="stylesheet/scss" lang="scss">`
`67`		`-@use "~contao-package-list/src/assets/styles/defaults";`
	`67`	`+@use '~contao-package-list/src/assets/styles/defaults';`
`68`	`68`
`69`	`69`	`$package-padding: 16px;`
`70`	`70`
`@@ -105,7 +105,7 @@ $package-padding: 16px;`
`105`	`105`
`106`	`106`	`&:not(:first-child):before {`
`107`	`107`	`padding-right: 10px;`
`108`		`- content: "\|";`
	`108`	`+ content: '\|';`
`109`	`109`	`}`
`110`	`110`	`}`
`111`	`111`	`}`
`@@ -125,7 +125,7 @@ $package-padding: 16px;`
`125`	`125`	`&:after {`
`126`	`126`	`display: table;`
`127`	`127`	`clear: both;`
`128`		`- content: "";`
	`128`	`+ content: '';`
`129`	`129`	`}`
`130`	`130`	`}`
`131`	`131`
`@@ -427,6 +427,7 @@ $package-padding: 16px;`
`427`	`427`	`width: 180px;`
`428`	`428`	`margin-left: 20px;`
`429`	`429`	`}`
	`430`	`+`
`430`	`431`	`&__details {`
`431`	`432`	`display: flex;`
`432`	`433`	`align-self: center;`
Original file line number	Diff line number	Diff line change
`@@ -148,6 +148,10 @@ export default {`
`148`	`148`	`return this.$t('ui.package.hintConstraint', { constraint: this.constraintAdded });`
`149`	`149`	`}`
`150`	`150`
	`151`	`+ if (!this.isCompatible) {`
	`152`	`+ return this.$t('ui.package.incompatibleConstraint', { constraint: this.packageConstraint('contao/manager-bundle') });`
	`153`	`+ }`
	`154`	`+`
`151`	`155`	`return this.$t('ui.package.hintConstraintBest');`
`152`	`156`	`}`
`153`	`157`