N°8955 Remove fixed width, add dynamic display for force uninstall menu item

css/backoffice/blocks-integrations/_all.scss

@@ -22,4 +22,5 @@
 @import "medallion-with-blocklist";
 @import "field-badge-within-datatable";
 @import "jquery-blockui-within-dialog";
-@import "jquery-blockui-within-datatable";
+@import "jquery-blockui-within-datatable";
+@import "badge-with-badge";

css/backoffice/blocks-integrations/_badge-with-badge.scss

@@ -0,0 +1,10 @@
+/*
+ * @copyright   Copyright (C) 2010-2024 Combodo SAS
+ * @license     http://opensource.org/licenses/AGPL-3.0
+ */
+
+$ibo-badge--spacing-left--with-same-block: $ibo-spacing-200 !default;
+
+.ibo-badge + .ibo-badge {
+  margin-left: $ibo-badge--spacing-left--with-same-block;
+}

css/backoffice/components/_all.scss

@@ -33,4 +33,5 @@
 @import "field-badge";
 @import "file-select";
 @import "medallion-icon";
-@import "toast";
+@import "toast";
+@import "badge";

css/backoffice/components/_badge.scss

@@ -0,0 +1,41 @@
+$ibo-badge--padding-x : $ibo-spacing-200 !default;
+$ibo-badge--padding-y : $ibo-spacing-100 !default;
+$ibo-badge--border-radius : $ibo-border-radius-400 !default;
+
+$ibo-badge-colors: (
+		'primary': ($ibo-color-primary-100, $ibo-color-primary-900),
+		'secondary': ($ibo-color-secondary-100, $ibo-color-secondary-900),
+		'neutral': ($ibo-color-secondary-100, $ibo-color-secondary-900),
+		'information': ($ibo-color-information-100, $ibo-color-information-900),
+		'success': ($ibo-color-success-100, $ibo-color-success-900),
+		'failure': ($ibo-color-danger-100, $ibo-color-danger-900),
+		'warning': ($ibo-color-warning-100,$ibo-color-warning-900),
+		'danger': ($ibo-color-danger-100,$ibo-color-danger-900),
+		'grey' : ($ibo-color-grey-100, $ibo-color-grey-900),
+		'blue-grey': ($ibo-color-blue-grey-100, $ibo-color-blue-grey-900),
+		'blue': ($ibo-color-blue-100, $ibo-color-blue-900),
+		'cyan': ($ibo-color-cyan-100, $ibo-color-cyan-900),
+		'green': ($ibo-color-green-100, $ibo-color-green-900),
+		'orange' : ($ibo-color-orange-100, $ibo-color-orange-900),
+		'red': ($ibo-color-red-100, $ibo-color-red-900),
+		'pink': ($ibo-color-pink-100, $ibo-color-pink-900),
+) !default;
+
+
+
+.ibo-badge {
+	display: inline-block;
+	white-space: nowrap;
+	padding : $ibo-badge--padding-y $ibo-badge--padding-x;
+	border-radius : $ibo-badge--border-radius;
+	@extend %ibo-font-ral-med-50;
+
+	@each $sColor, $aColorValues in $ibo-badge-colors {
+		$bg-color: nth($aColorValues, 1);
+		$text-color: nth($aColorValues, 2);
+		&.ibo-is-#{$sColor} {
+			background-color: $bg-color;
+			color: $text-color;
+		}
+	}
+}

css/backoffice/components/input/_input-toggler.scss

@@ -8,6 +8,7 @@ $ibo-toggler--wrapper--height: 20px !default;
 
 $ibo-toggler--slider--border-radius: $ibo-border-radius-900 !default;
 $ibo-toggler--slider--background-color: $ibo-color-secondary-600 !default;
+$ibo-toggler--slider--disabled--background-color: $ibo-color-secondary-200 !default;
 
 $ibo-toggler--slider--before--left: 3px !default;
 $ibo-toggler--slider--before--bottom: 3px !default;
@@ -17,6 +18,7 @@ $ibo-toggler--slider--before--border-radius: $ibo-border-radius-full !default;
 $ibo-toggler--slider--before--background-color: $ibo-color-grey-100 !default;
 
 $ibo-toggler--slider--checked--background-color: $ibo-color-primary-600 !default;
+$ibo-toggler--slider--checked-disabled--background-color: $ibo-color-primary-200 !default;
 $ibo-toggler--slider--focus--box-shadow: 0 0 1px $ibo-color-primary-600 !default;
 
 $ibo-toggler--label--margin-left: 4px !default;
@@ -61,6 +63,13 @@ $ibo-toggler--label--margin-left: 4px !default;
   background-color: $ibo-toggler--slider--checked--background-color;
 }
 
+.ibo-toggler--wrapper input:disabled + .ibo-toggler--slider {
+  background-color: $ibo-toggler--slider--disabled--background-color;
+}
+.ibo-toggler--wrapper input:checked:disabled + .ibo-toggler--slider {
+  background-color: $ibo-toggler--slider--checked-disabled--background-color;
+}
+
 input:focus + .ibo-toggler--slider {
   box-shadow: $ibo-toggler--slider--focus--box-shadow;
 }

css/backoffice/layout/_all.scss

@@ -15,3 +15,4 @@
 @import "wizard-container/wizard-container";
 @import "object/all";
 @import "activity-panel/all";
+@import "extension/all";

css/backoffice/layout/extension/_all.scss

@@ -0,0 +1 @@
+@import "extension-details";

css/backoffice/layout/extension/_extension-details.scss

@@ -0,0 +1,54 @@
+$ibo-extension-details--information--metadata--padding: $ibo-spacing-200 !default;
+$ibo-extension-details--information--metadata--delimiter: "-" !default;
+$ibo-extension-details--information--metadata--color: $ibo-color-grey-700 !default;
+$ibo-extension-details--actions--button--padding-y: 3px !default;
+$ibo-extension-details--actions--button--padding-x: $ibo-button--padding-x !default;
+
+.ibo-extension-details {
+	display: inline-flex;
+	flex-direction: row;
+	justify-content: space-between;
+	align-items: center;
+	width: 100%;
+}
+
+.ibo-extension-details--information {
+	flex-grow: 1;
+	display: flex;
+	flex-direction: column;
+}
+
+.ibo-extension-details--actions {
+	display: flex;
+}
+
+.ibo-extension-details--information--label {
+	@extend %ibo-font-ral-med-150;
+}
+
+.ibo-extension-details--information--metadata {
+	@extend %ibo-font-ral-med-100;
+	color: $ibo-extension-details--information--metadata--color;
+}
+
+.ibo-extension-details--information--description {
+	@extend %ibo-font-ral-med-100;
+}
+
+.ibo-extension-details--information--metadata span + span:before {
+	content: $ibo-extension-details--information--metadata--delimiter;
+	padding-left: $ibo-extension-details--information--metadata--padding;
+	padding-right: $ibo-extension-details--information--metadata--padding;
+}
+
+.ibo-extension-details:has(input:checked) .ibo-badge.unchecked, .ibo-extension-details:has(input:not(:checked)) .ibo-badge.checked {
+	display: none;
+}
+
+.ibo-extension-details--actions > button {
+	padding: $ibo-extension-details--actions--button--padding-y $ibo-extension-details--actions--button--padding-x;
+}
+
+.ibo-extension-details--actions:has(.toggler-install:not(:disabled)) .ibo-popover-menu--section a[data-resource-id="force_uninstall"] {
+	display: none;
+}

dictionaries/ui/layouts/extensions-details/en.dictionary.itop.extensions-details.php

@@ -0,0 +1,17 @@
+<?php
+/**
+ * Localized data
+ *
+ * @copyright Copyright (C) 2010-2026 Combodo SAS
+ * @license    https://opensource.org/licenses/AGPL-3.0
+ *
+ */
+
+Dict::Add('EN US', 'English', 'English', [
+	'UI:Layout:ExtensionsDetails:BadgeInstalled' => 'installed',
+	'UI:Layout:ExtensionsDetails:BadgeToBeInstalled' => 'to be installed',
+	'UI:Layout:ExtensionsDetails:BadgeNotInstalled' => 'not installed',
+	'UI:Layout:ExtensionsDetails:BadgeToBeUninstalled' => 'to be uninstalled',
+	'UI:Layout:ExtensionsDetails:BadgeNotUninstallable' => 'cannot be uninstalled',
+	'UI:Layout:ExtensionsDetails:BadgeMissingFromDisk' => 'missing from disk',
+]);

dictionaries/ui/layouts/extensions-details/fr.dictionary.itop.extensions-details.php

@@ -0,0 +1,17 @@
+<?php
+/**
+ * Localized data
+ *
+ * @copyright Copyright (C) 2010-2026 Combodo SAS
+ * @license    https://opensource.org/licenses/AGPL-3.0
+ *
+ */
+
+Dict::Add('FR FR', 'French', 'Français', [
+	'UI:Layout:ExtensionsDetails:BadgeInstalled' => 'installé',
+	'UI:Layout:ExtensionsDetails:BadgeToBeInstalled' => 'va être installé',
+	'UI:Layout:ExtensionsDetails:BadgeNotInstalled' => 'pas installé',
+	'UI:Layout:ExtensionsDetails:BadgeToBeUninstalled' => 'va être désinstallé',
+	'UI:Layout:ExtensionsDetails:BadgeNotUninstallable' => 'non désinstallable',
+	'UI:Layout:ExtensionsDetails:BadgeMissingFromDisk' => 'supprimé du disque',
+]);

lib/composer/autoload_classmap.php

@@ -156,6 +156,8 @@ return array(
     'Combodo\\iTop\\Application\\UI\\Base\\AbstractUIBlockFactory' => $baseDir . '/sources/Application/UI/Base/AbstractUIBlockFactory.php',
     'Combodo\\iTop\\Application\\UI\\Base\\Component\\Alert\\Alert' => $baseDir . '/sources/Application/UI/Base/Component/Alert/Alert.php',
     'Combodo\\iTop\\Application\\UI\\Base\\Component\\Alert\\AlertUIBlockFactory' => $baseDir . '/sources/Application/UI/Base/Component/Alert/AlertUIBlockFactory.php',
+    'Combodo\\iTop\\Application\\UI\\Base\\Component\\Badge\\Badge' => $baseDir . '/sources/Application/UI/Base/Component/Badge/Badge.php',
+    'Combodo\\iTop\\Application\\UI\\Base\\Component\\Badge\\BadgeUIBlockFactory' => $baseDir . '/sources/Application/UI/Base/Component/Badge/BadgeUIBlockFactory.php',
     'Combodo\\iTop\\Application\\UI\\Base\\Component\\Breadcrumbs\\Breadcrumbs' => $baseDir . '/sources/Application/UI/Base/Component/Breadcrumbs/Breadcrumbs.php',
     'Combodo\\iTop\\Application\\UI\\Base\\Component\\ButtonGroup\\ButtonGroup' => $baseDir . '/sources/Application/UI/Base/Component/ButtonGroup/ButtonGroup.php',
     'Combodo\\iTop\\Application\\UI\\Base\\Component\\ButtonGroup\\ButtonGroupUIBlockFactory' => $baseDir . '/sources/Application/UI/Base/Component/ButtonGroup/ButtonGroupUIBlockFactory.php',
@@ -268,6 +270,8 @@ return array(
     'Combodo\\iTop\\Application\\UI\\Base\\Layout\\Dashboard\\DashboardColumn' => $baseDir . '/sources/Application/UI/Base/Layout/Dashboard/DashboardColumn.php',
     'Combodo\\iTop\\Application\\UI\\Base\\Layout\\Dashboard\\DashboardLayout' => $baseDir . '/sources/Application/UI/Base/Layout/Dashboard/DashboardLayout.php',
     'Combodo\\iTop\\Application\\UI\\Base\\Layout\\Dashboard\\DashboardRow' => $baseDir . '/sources/Application/UI/Base/Layout/Dashboard/DashboardRow.php',
+    'Combodo\\iTop\\Application\\UI\\Base\\Layout\\Extension\\ExtensionDetails' => $baseDir . '/sources/Application/UI/Base/Layout/Extension/ExtensionDetails.php',
+    'Combodo\\iTop\\Application\\UI\\Base\\Layout\\Extension\\ExtensionDetailsUIBlockFactory' => $baseDir . '/sources/Application/UI/Base/Layout/Extension/ExtensionDetailsUIBlockFactory.php',
     'Combodo\\iTop\\Application\\UI\\Base\\Layout\\MultiColumn\\Column\\Column' => $baseDir . '/sources/Application/UI/Base/Layout/MultiColumn/Column/Column.php',
     'Combodo\\iTop\\Application\\UI\\Base\\Layout\\MultiColumn\\Column\\ColumnUIBlockFactory' => $baseDir . '/sources/Application/UI/Base/Layout/MultiColumn/Column/ColumnUIBlockFactory.php',
     'Combodo\\iTop\\Application\\UI\\Base\\Layout\\MultiColumn\\MultiColumn' => $baseDir . '/sources/Application/UI/Base/Layout/MultiColumn/MultiColumn.php',

lib/composer/autoload_static.php

@@ -537,6 +537,8 @@ class ComposerStaticInit7f81b4a2a468a061c306af5e447a9a9f
         'Combodo\\iTop\\Application\\UI\\Base\\AbstractUIBlockFactory' => __DIR__ . '/../..' . '/sources/Application/UI/Base/AbstractUIBlockFactory.php',
         'Combodo\\iTop\\Application\\UI\\Base\\Component\\Alert\\Alert' => __DIR__ . '/../..' . '/sources/Application/UI/Base/Component/Alert/Alert.php',
         'Combodo\\iTop\\Application\\UI\\Base\\Component\\Alert\\AlertUIBlockFactory' => __DIR__ . '/../..' . '/sources/Application/UI/Base/Component/Alert/AlertUIBlockFactory.php',
+        'Combodo\\iTop\\Application\\UI\\Base\\Component\\Badge\\Badge' => __DIR__ . '/../..' . '/sources/Application/UI/Base/Component/Badge/Badge.php',
+        'Combodo\\iTop\\Application\\UI\\Base\\Component\\Badge\\BadgeUIBlockFactory' => __DIR__ . '/../..' . '/sources/Application/UI/Base/Component/Badge/BadgeUIBlockFactory.php',
         'Combodo\\iTop\\Application\\UI\\Base\\Component\\Breadcrumbs\\Breadcrumbs' => __DIR__ . '/../..' . '/sources/Application/UI/Base/Component/Breadcrumbs/Breadcrumbs.php',
         'Combodo\\iTop\\Application\\UI\\Base\\Component\\ButtonGroup\\ButtonGroup' => __DIR__ . '/../..' . '/sources/Application/UI/Base/Component/ButtonGroup/ButtonGroup.php',
         'Combodo\\iTop\\Application\\UI\\Base\\Component\\ButtonGroup\\ButtonGroupUIBlockFactory' => __DIR__ . '/../..' . '/sources/Application/UI/Base/Component/ButtonGroup/ButtonGroupUIBlockFactory.php',
@@ -649,6 +651,8 @@ class ComposerStaticInit7f81b4a2a468a061c306af5e447a9a9f
         'Combodo\\iTop\\Application\\UI\\Base\\Layout\\Dashboard\\DashboardColumn' => __DIR__ . '/../..' . '/sources/Application/UI/Base/Layout/Dashboard/DashboardColumn.php',
         'Combodo\\iTop\\Application\\UI\\Base\\Layout\\Dashboard\\DashboardLayout' => __DIR__ . '/../..' . '/sources/Application/UI/Base/Layout/Dashboard/DashboardLayout.php',
         'Combodo\\iTop\\Application\\UI\\Base\\Layout\\Dashboard\\DashboardRow' => __DIR__ . '/../..' . '/sources/Application/UI/Base/Layout/Dashboard/DashboardRow.php',
+        'Combodo\\iTop\\Application\\UI\\Base\\Layout\\Extension\\ExtensionDetails' => __DIR__ . '/../..' . '/sources/Application/UI/Base/Layout/Extension/ExtensionDetails.php',
+        'Combodo\\iTop\\Application\\UI\\Base\\Layout\\Extension\\ExtensionDetailsUIBlockFactory' => __DIR__ . '/../..' . '/sources/Application/UI/Base/Layout/Extension/ExtensionDetailsUIBlockFactory.php',
         'Combodo\\iTop\\Application\\UI\\Base\\Layout\\MultiColumn\\Column\\Column' => __DIR__ . '/../..' . '/sources/Application/UI/Base/Layout/MultiColumn/Column/Column.php',
         'Combodo\\iTop\\Application\\UI\\Base\\Layout\\MultiColumn\\Column\\ColumnUIBlockFactory' => __DIR__ . '/../..' . '/sources/Application/UI/Base/Layout/MultiColumn/Column/ColumnUIBlockFactory.php',
         'Combodo\\iTop\\Application\\UI\\Base\\Layout\\MultiColumn\\MultiColumn' => __DIR__ . '/../..' . '/sources/Application/UI/Base/Layout/MultiColumn/MultiColumn.php',

sources/Application/UI/Base/Component/Badge/Badge.php

@@ -0,0 +1,103 @@
+<?php
+
+namespace Combodo\iTop\Application\UI\Base\Component\Badge;
+
+use Combodo\iTop\Application\UI\Base\UIBlock;
+
+class Badge extends UIBlock
+{
+	public const BLOCK_CODE = 'ibo-badge';
+	public const DEFAULT_HTML_TEMPLATE_REL_PATH = 'base/components/badge/layout';
+
+	/** @var string ENUM_COLOR_SCHEME_NEUTRAL */
+	public const ENUM_COLOR_SCHEME_NEUTRAL = 'neutral';
+	/** @var string ENUM_COLOR_SCHEME_VALIDATION */
+	public const ENUM_COLOR_SCHEME_VALIDATION = 'success';
+	/** @var string ENUM_COLOR_SCHEME_DESTRUCTIVE */
+	public const ENUM_COLOR_SCHEME_DESTRUCTIVE = 'danger';
+	/** @var string ENUM_COLOR_SCHEME_PRIMARY */
+	public const ENUM_COLOR_SCHEME_PRIMARY = 'primary';
+	/** @var string ENUM_COLOR_SCHEME_SECONDARY */
+	public const ENUM_COLOR_SCHEME_SECONDARY = 'secondary';
+	/** @var string ENUM_COLOR_SCHEME_GREEN */
+	public const ENUM_COLOR_SCHEME_GREEN = 'green';
+	/** @var string ENUM_COLOR_SCHEME_RED */
+	public const ENUM_COLOR_SCHEME_RED = 'red';
+	/** @var string ENUM_COLOR_SCHEME_CYAN */
+	public const ENUM_COLOR_SCHEME_CYAN = 'cyan';
+	/** @var string DEFAULT_COLOR_SCHEME */
+	public const ENUM_COLOR_SCHEME_GREY = 'grey';
+	/** @var string DEFAULT_COLOR_SCHEME */
+	public const ENUM_COLOR_SCHEME_BLUE_GREY = 'blue-grey';
+	/** @var string DEFAULT_COLOR_SCHEME */
+	public const ENUM_COLOR_SCHEME_ORANGE = 'orange';
+	/** @var string DEFAULT_COLOR_SCHEME */
+	public const DEFAULT_COLOR_SCHEME = self::ENUM_COLOR_SCHEME_NEUTRAL;
+	private string $sLabel;
+	private string $sColor;
+	private string $sTooltip;
+
+	public function __construct(string $sLabel, string $sColor = self::DEFAULT_COLOR_SCHEME, string $sTooltip = '', string $sId = null)
+	{
+		parent::__construct($sId);
+
+		$this->sLabel = $sLabel;
+		$this->sColor = $sColor;
+		$this->sTooltip = $sTooltip;
+	}
+
+	/**
+	 * @return string
+	 */
+	public function GetTooltip(): string
+	{
+		return $this->sTooltip;
+	}
+
+	/**
+	 * @param string $sTooltip
+	 */
+	public function SetTooltip(string $sTooltip)
+	{
+		$this->sTooltip = $sTooltip;
+		return $this;
+	}
+
+	/**
+	 * @return string
+	 */
+	public function GetLabel(): string
+	{
+		return $this->sLabel;
+	}
+
+	/**
+	 * @param string $sLabel
+	 *
+	 * @return $this
+	 */
+	public function SetLabel(string $sLabel)
+	{
+		$this->sLabel = $sLabel;
+		return $this;
+	}
+
+	/**
+	 * @return string
+	 */
+	public function GetColor(): string
+	{
+		return $this->sColor;
+	}
+
+	/**
+	 * @param string $sColor
+	 *
+	 * @return $this
+	 */
+	public function SetColor(string $sColor)
+	{
+		$this->sColor = $sColor;
+		return $this;
+	}
+}

sources/Application/UI/Base/Component/Badge/BadgeUIBlockFactory.php

@@ -0,0 +1,41 @@
+<?php
+
+namespace Combodo\iTop\Application\UI\Base\Component\Badge;
+
+use Combodo\iTop\Application\UI\Base\AbstractUIBlockFactory;
+
+class BadgeUIBlockFactory extends AbstractUIBlockFactory
+{
+	/** @inheritDoc */
+	public const TWIG_TAG_NAME = 'UIBadge';
+	/** @inheritDoc */
+	public const UI_BLOCK_CLASS_NAME = Badge::class;
+
+	public static function MakeNeutral(string $sLabel, string $sTooltip = '', ?string $sId = null)
+	{
+		return new Badge($sLabel, Badge::ENUM_COLOR_SCHEME_NEUTRAL, $sTooltip, $sId);
+	}
+	public static function MakeGrey(string $sLabel, string $sTooltip = '', ?string $sId = null)
+	{
+		return new Badge($sLabel, Badge::ENUM_COLOR_SCHEME_BLUE_GREY, $sTooltip, $sId);
+	}
+
+	public static function MakeRed(string $sLabel, string $sTooltip = '', ?string $sId = null)
+	{
+		return new Badge($sLabel, Badge::ENUM_COLOR_SCHEME_RED, $sTooltip, $sId);
+	}
+	public static function MakeCyan(string $sLabel, string $sTooltip = '', ?string $sId = null)
+	{
+		return new Badge($sLabel, Badge::ENUM_COLOR_SCHEME_CYAN, $sTooltip, $sId);
+	}
+
+	public static function MakeGreen(string $sLabel, string $sTooltip = '', ?string $sId = null)
+	{
+		return new Badge($sLabel, Badge::ENUM_COLOR_SCHEME_GREEN, $sTooltip, $sId);
+	}
+
+	public static function MakeOrange(string $sLabel, string $sTooltip = '', ?string $sId = null)
+	{
+		return new Badge($sLabel, Badge::ENUM_COLOR_SCHEME_ORANGE, $sTooltip, $sId);
+	}
+}

sources/Application/UI/Base/Layout/Extension/ExtensionDetails.php

@@ -0,0 +1,214 @@
+<?php
+
+namespace Combodo\iTop\Application\UI\Base\Layout\Extension;
+
+use Combodo\iTop\Application\UI\Base\Component\Badge\Badge;
+use Combodo\iTop\Application\UI\Base\Component\Button\ButtonUIBlockFactory;
+use Combodo\iTop\Application\UI\Base\Component\Input\Toggler;
+use Combodo\iTop\Application\UI\Base\Component\PopoverMenu\PopoverMenu;
+use Combodo\iTop\Application\UI\Base\Component\PopoverMenu\PopoverMenuItem\PopoverMenuItemFactory;
+use Combodo\iTop\Application\UI\Base\Layout\UIContentBlock;
+use JSButtonItem;
+
+class ExtensionDetails extends UIContentBlock
+{
+	public const BLOCK_CODE = 'ibo-extension-details';
+
+	public const DEFAULT_HTML_TEMPLATE_REL_PATH = 'base/layouts/extension/extension-details/layout';
+
+	protected string $sCode;
+	protected string $sLabel;
+	protected string $sAbout;
+	protected array $aMetaData;
+	protected string $sDescription;
+	protected Toggler $oToggler;
+	protected UIContentBlock $oMoreActions;
+	protected PopoverMenu $oPopoverMenu;
+	protected array $aBadges;
+
+	public function __construct(string $sCode, string $sLabel, string $sDescription = '', array $aMetaData = [], array $aBadges = [], string $sAbout = '', string $sId = null)
+	{
+		parent::__construct($sId);
+		$this->sCode = $sCode;
+		$this->sLabel = $sLabel;
+		$this->sDescription = $sDescription;
+		$this->aMetaData = $aMetaData;
+		$this->aBadges = $aBadges;
+		$this->sAbout = $sAbout;
+		$this->InitializeToggler();
+		$this->InitializePopoverMenu();
+	}
+
+	public function GetSubBlocks(): array
+	{
+		return [$this->oToggler->GetId() => $this->oToggler, $this->oMoreActions->GetId() => $this->oMoreActions];
+	}
+
+	/**
+	 * @return string
+	 */
+	public function GetCode(): string
+	{
+		return $this->sCode;
+	}
+
+	/**
+	 * @param string $sCode
+	 *
+	 * @return ExtensionDetails
+	 */
+	public function SetCode(string $sCode): static
+	{
+		$this->sCode = $sCode;
+		return $this;
+	}
+
+	/**
+	 * @return string
+	 */
+	public function GetLabel(): string
+	{
+		return $this->sLabel;
+	}
+
+	/**
+	 * @param string $sLabel
+	 *
+	 * @return ExtensionDetails
+	 */
+	public function SetLabel(string $sLabel): static
+	{
+		$this->sLabel = $sLabel;
+		return $this;
+	}
+
+	/**
+	 * @return array
+	 */
+	public function GetMetaData(): array
+	{
+		return $this->aMetaData;
+	}
+
+	/**
+	 * @param array $aMetaData
+	 *
+	 * @return ExtensionDetails
+	 */
+	public function SetMetaData(array $aMetaData): static
+	{
+		$this->aMetaData = $aMetaData;
+		return $this;
+	}
+
+	/**
+	 * @return string
+	 */
+	public function GetDescription(): string
+	{
+		return $this->sDescription;
+	}
+
+	/**
+	 * @param string $sDescription
+	 *
+	 * @return ExtensionDetails
+	 */
+	public function SetDescription(string $sDescription): static
+	{
+		$this->sDescription = $sDescription;
+		return $this;
+	}
+
+	/**
+	 * @return Toggler
+	 */
+	public function GetToggler(): Toggler
+	{
+		return $this->oToggler;
+	}
+
+	/**
+	 * @param Toggler $oToggler
+	 *
+	 * @return ExtensionDetails
+	 */
+	public function SetToggler(Toggler $oToggler): static
+	{
+		$this->oToggler = $oToggler;
+		return $this;
+	}
+
+	/**
+	 * @return array
+	 */
+	public function GetBadges(): array
+	{
+		return $this->aBadges;
+	}
+
+	/**
+	 * @param array $aBadges
+	 *
+	 * @return ExtensionDetails
+	 */
+	public function SetBadges(array $aBadges): static
+	{
+		$this->aBadges = $aBadges;
+		return $this;
+	}
+
+	public function AddBadge(Badge $oBadge): static
+	{
+		$this->aBadges[] = $oBadge;
+		return $this;
+	}
+
+	public function GetMoreActions(): UIContentBlock
+	{
+		return $this->oMoreActions;
+	}
+
+	protected function InitializeToggler()
+	{
+		$this->oToggler = new Toggler();
+		$this->oToggler->SetName('ExtensionToggler');
+		$this->oToggler->AddCSSClass('toggler-install');
+	}
+
+	protected function InitializePopoverMenu()
+	{
+		$sModalLabel = 'About '.$this->sLabel;
+		$sModalText = $this->sAbout;
+		$oModifyButton = new JSButtonItem(
+			'extension_details',
+			'More informations',
+			<<<JS
+	CombodoModal.OpenModal({
+		title: '$sModalLabel',
+		content: '$sModalText',
+	});
+JS,
+		);
+		$this->oPopoverMenu = new PopoverMenu();
+		$this->oPopoverMenu->AddItem('more-actions', PopoverMenuItemFactory::MakeFromApplicationPopupMenuItem($oModifyButton));
+		$oPopoverOpenButton = ButtonUIBlockFactory::MakeIconAction('fas fa-ellipsis-v', 'Show more actions');
+		$this->oPopoverMenu->SetTogglerFromBlock($oPopoverOpenButton);
+		$this->oMoreActions = new UIContentBlock();
+		$this->oMoreActions->AddSubBlock($this->oPopoverMenu);
+		$this->oMoreActions->AddSubBlock($oPopoverOpenButton);
+	}
+
+	public function AllowForceUninstall()
+	{
+		$oForceUninstallButton = new JSButtonItem(
+			'force_uninstall',
+			'Force uninstall',
+			<<<JS
+	this.closest('.ibo-extension-details').querySelector('input[type=checkbox]').disabled = false
+JS,
+		);
+		$this->oPopoverMenu->AddItem('more-actions', PopoverMenuItemFactory::MakeFromApplicationPopupMenuItem($oForceUninstallButton));
+	}
+
+}

sources/Application/UI/Base/Layout/Extension/ExtensionDetailsUIBlockFactory.php

@@ -0,0 +1,62 @@
+<?php
+
+namespace Combodo\iTop\Application\UI\Base\Layout\Extension;
+
+use Combodo\iTop\Application\UI\Base\AbstractUIBlockFactory;
+use Combodo\iTop\Application\UI\Base\Component\Badge\BadgeUIBlockFactory;
+use Dict;
+
+class ExtensionDetailsUIBlockFactory extends AbstractUIBlockFactory
+{
+	/** @inheritDoc */
+	public const TWIG_TAG_NAME = 'UIExtensionDetails';
+	/** @inheritDoc */
+	public const UI_BLOCK_CLASS_NAME = ExtensionDetails::class;
+
+	public static function MakeInstalled(string $sCode, string $sLabel, string $sDescription = '', array $aMetaData = [], array $aExtraFlags = [], string $sAbout = '')
+	{
+		$aBadges = [];
+		$bUninstallable = $aExtraFlags['uninstallable'] ?? true;
+		$bMissingFromDisk = $aExtraFlags['missing'] ?? false;
+		self::AddExtraBadges($aBadges, $bUninstallable, $bMissingFromDisk);
+		$oBadgeInstalled = BadgeUIBlockFactory::MakeGreen(Dict::S('UI:Layout:ExtensionsDetails:BadgeInstalled'));
+		$oBadgeInstalled->AddCSSClass('checked');
+		$aBadges[] = $oBadgeInstalled;
+		$oBadgeToBeUninstalled = BadgeUIBlockFactory::MakeRed(Dict::S('UI:Layout:ExtensionsDetails:BadgeToBeUninstalled'));
+		$oBadgeToBeUninstalled->AddCSSClass('unchecked');
+		$aBadges[] = $oBadgeToBeUninstalled;
+
+		$oExtensionDetails = new ExtensionDetails($sCode, $sLabel, $sDescription, $aMetaData, $aBadges, $sAbout);
+		$oExtensionDetails->GetToggler()->SetIsToggled(true);
+		if (!$bUninstallable) {
+			$oExtensionDetails->AllowForceUninstall();
+			$oExtensionDetails->GetToggler()->SetIsDisabled(true);
+		}
+		return $oExtensionDetails;
+	}
+
+	public static function MakeNotInstalled(string $sCode, string $sLabel, string $sDescription = '', array $aMetaData = [], array $aExtraFlags = [], string $sAbout = '')
+	{
+		$aBadges = [];
+		$bUninstallable = $aExtraFlags['uninstallable'] ?? true;
+		self::AddExtraBadges($aBadges, $bUninstallable, false);
+		$oBadgeInstalled = BadgeUIBlockFactory::MakeGrey(Dict::S('UI:Layout:ExtensionsDetails:BadgeNotInstalled'));
+		$oBadgeInstalled->AddCSSClass('unchecked');
+		$aBadges[] = $oBadgeInstalled;
+		$oBadgeToBeUninstalled = BadgeUIBlockFactory::MakeCyan(Dict::S('UI:Layout:ExtensionsDetails:BadgeToBeInstalled'));
+		$oBadgeToBeUninstalled->AddCSSClass('checked');
+		$aBadges[] = $oBadgeToBeUninstalled;
+
+		return new ExtensionDetails($sCode, $sLabel, $sDescription, $aMetaData, $aBadges, $sAbout);
+	}
+
+	private static function AddExtraBadges(array &$aBadges, bool $bUninstallable, bool $bMissingFromDisk)
+	{
+		if (!$bUninstallable) {
+			$aBadges[] = BadgeUIBlockFactory::MakeOrange(Dict::S('UI:Layout:ExtensionsDetails:BadgeNotUninstallable'));
+		}
+		if ($bMissingFromDisk) {
+			$aBadges[] = BadgeUIBlockFactory::MakeRed(Dict::S('UI:Layout:ExtensionsDetails:BadgeMissingFromDisk'));
+		}
+	}
+}

templates/base/components/badge/layout.html.twig

@@ -0,0 +1,8 @@
+<span  id="{{ oUIBlock.GetId() }}"
+	class="{{ oUIBlock.GetBlocksInheritanceCSSClassesAsString() }} {{ oUIBlock.GetAdditionalCSSClassesAsString() }} ibo-is-{{ oUIBlock.GetColor() }}"
+	{% if oUIBlock.GetTooltip() is not empty %}
+		data-tooltip-content="{{ oUIBlock.GetTooltip() }}"
+	{% endif %}
+>
+	{{ oUIBlock.GetLabel() }}
+</span>

templates/base/components/input/input-toggler.ready.js.twig

@@ -1,5 +1,8 @@
+
 $('#{{ oUIBlock.GetId() }}').parent().on('click', function() {
-    let oInput = $(this).find('.ibo-toggler');
-    oInput.prop('checked', !oInput.prop('checked'));
-    oInput.trigger('change');
+	let oInput = $(this).find('.ibo-toggler');
+	if (!oInput.prop('disabled')) {
+		oInput.prop('checked', !oInput.prop('checked'));
+		oInput.trigger('change');
+	}
 });

templates/base/layouts/extension/extension-details/layout.html.twig

@@ -0,0 +1,24 @@
+{# @copyright   Copyright (C) 2010-2024 Combodo SAS #}
+{# @license     http://opensource.org/licenses/AGPL-3.0 #}
+<div id="{{ oUIBlock.GetId() }}" class="{{ oUIBlock.GetBlocksInheritanceCSSClassesAsString() }} {{ oUIBlock.GetAdditionalCSSClassesAsString() }}" data-role="ibo-extension-details">
+	<div class="ibo-extension-details--information">
+		<div class="ibo-extension-details--information--label">
+			{{ oUIBlock.GetLabel() }}
+			{% for oBadge in oUIBlock.GetBadges() %}
+				{{ render_block(oBadge, {aPage: aPage}) }}
+			{% endfor %}
+		</div>
+		<div class="ibo-extension-details--information--metadata">
+		{% for sMetaData in oUIBlock.GetMetaData() %}
+			<span>{{ sMetaData }}</span>
+		{% endfor %}
+		</div>
+		<div class="ibo-extension-details--information--description">
+			{{ oUIBlock.GetDescription() }}
+		</div>
+	</div>
+	<div class="ibo-extension-details--actions">
+		{{ render_block(oUIBlock.GetToggler(), {aPage: aPage}) }}
+		{{ render_block(oUIBlock.GetMoreActions(), {aPage: aPage}) }}
+	</div>
+</div>

tests/manual-visual-tests/Backoffice/RenderAllUiBlocks.php

@@ -23,6 +23,8 @@
 namespace Combodo\iTop\Test\VisualTest\Backoffice;
 
 use Combodo\iTop\Application\UI\Base\Component\Alert\AlertUIBlockFactory;
+use Combodo\iTop\Application\UI\Base\Component\Badge\Badge;
+use Combodo\iTop\Application\UI\Base\Component\Badge\BadgeUIBlockFactory;
 use Combodo\iTop\Application\UI\Base\Component\Button\Button;
 use Combodo\iTop\Application\UI\Base\Component\Button\ButtonUIBlockFactory;
 use Combodo\iTop\Application\UI\Base\Component\ButtonGroup\ButtonGroup;
@@ -34,16 +36,23 @@ use Combodo\iTop\Application\UI\Base\Component\FieldSet\FieldSet;
 use Combodo\iTop\Application\UI\Base\Component\Html\Html;
 use Combodo\iTop\Application\UI\Base\Component\Input\InputUIBlockFactory;
 use Combodo\iTop\Application\UI\Base\Component\Input\Set\SetUIBlockFactory;
+use Combodo\iTop\Application\UI\Base\Component\Input\Toggler;
 use Combodo\iTop\Application\UI\Base\Component\Panel\Panel;
 use Combodo\iTop\Application\UI\Base\Component\Panel\PanelUIBlockFactory;
 use Combodo\iTop\Application\UI\Base\Component\Pill\PillFactory;
 use Combodo\iTop\Application\UI\Base\Component\PopoverMenu\PopoverMenu;
+use Combodo\iTop\Application\UI\Base\Component\PopoverMenu\PopoverMenuItem\PopoverMenuItemFactory;
 use Combodo\iTop\Application\UI\Base\Component\Title\TitleUIBlockFactory;
+use Combodo\iTop\Application\UI\Base\Layout\Extension\ExtensionDetails;
+use Combodo\iTop\Application\UI\Base\Layout\Extension\ExtensionDetailsUIBlockFactory;
+use Combodo\iTop\Application\UI\Base\Layout\MultiColumn\Column\Column;
+use Combodo\iTop\Application\UI\Base\Layout\MultiColumn\MultiColumn;
 use Combodo\iTop\Application\UI\Base\Layout\Object\ObjectFactory;
 use Combodo\iTop\Application\UI\Base\Layout\PageContent\PageContentFactory;
 use Combodo\iTop\Application\UI\Base\Layout\UIContentBlockUIBlockFactory;
 use Combodo\iTop\Application\UI\Base\Layout\UIContentBlockWithJSRefreshCallback;
 use Combodo\iTop\Application\WebPage\iTopWebPage;
+use JSButtonItem;
 use LoginWebPage;
 use MetaModel;
 
@@ -68,7 +77,7 @@ $oMainTitle = new Html('<h1>All UI blocks examples</h1>');
 $oPage->AddUiBlock($oMainTitle);
 
 $oPageContentLayout->AddMainBlock(new Html('<hr/>'));
-
+$oPage->add('<a href="#page_bottom">Go to bottom of the page</a>');
 /////////
 // Alerts
 /////////
@@ -579,4 +588,57 @@ $oPage->AddUiBlock($oSimpleSetBlockOql);
 $oSimpleSetBlockOql2 = SetUIBlockFactory::MakeForOQL('SetOql2', 'Location', 'SELECT Location', null, [], null, 'OqlSet2');
 $oPage->AddUiBlock($oSimpleSetBlockOql2);
 
+$oPage->AddUiBlock(TitleUIBlockFactory::MakeNeutral('Toggler', 3));
+
+$oToggler = new Toggler();
+$oToggler->SetName('SampleToggler');
+$oPage->AddUiBlock($oToggler);
+
+$oTogglerActivated = new Toggler();
+$oTogglerActivated->SetName('SampleTogglerActivated');
+$oTogglerActivated->SetIsToggled(true);
+$oPage->AddUiBlock($oTogglerActivated);
+
+$oTogglerDisabled = new Toggler();
+$oTogglerDisabled->SetName('SampleTogglerDisabled');
+$oTogglerDisabled->SetIsDisabled(true);
+$oPage->AddUiBlock($oTogglerDisabled);
+
+$oTogglerActivatedDisabled = new Toggler();
+$oTogglerActivatedDisabled->SetName('SampleTogglerDisabled');
+$oTogglerActivatedDisabled->SetIsToggled(true);
+$oTogglerActivatedDisabled->SetIsDisabled(true);
+$oPage->AddUiBlock($oTogglerActivatedDisabled);
+
+$oPage->AddUiBlock(TitleUIBlockFactory::MakeNeutral('Badges', 3));
+
+$oSampleBadgeNeutral = BadgeUIBlockFactory::MakeNeutral('badge neutral', 'Tooltip');
+$oPage->AddUiBlock($oSampleBadgeNeutral);
+$oSampleBadgeCyan = BadgeUIBlockFactory::MakeCyan('badge cyan', 'Tooltip');
+$oPage->AddUiBlock($oSampleBadgeCyan);
+$oSampleBadgeGreen = BadgeUIBlockFactory::MakeGreen('badge green', 'Tooltip');
+$oPage->AddUiBlock($oSampleBadgeGreen);
+$oSampleBadgeGrey = BadgeUIBlockFactory::MakeGrey('badge grey', 'Tooltip');
+$oPage->AddUiBlock($oSampleBadgeGrey);
+$oSampleBadgeOrange = BadgeUIBlockFactory::MakeOrange('badge orange', 'Tooltip');
+$oPage->AddUiBlock($oSampleBadgeOrange);
+$oSampleBadgeRed = BadgeUIBlockFactory::MakeRed('badge red', 'Tooltip');
+$oPage->AddUiBlock($oSampleBadgeRed);
+
+$oPage->AddUiBlock(TitleUIBlockFactory::MakeNeutral('Extensions details layout', 3));
+
+$oMultiCol = new MultiColumn();
+$oColumnLeft = new Column();
+$oColumnRight = new Column();
+$oMultiCol->AddColumn($oColumnLeft);
+$oMultiCol->AddColumn($oColumnRight);
+$oPage->AddUiBlock($oMultiCol);
+
+$oExtensionDetailInstalledFromFactory = ExtensionDetailsUIBlockFactory::MakeInstalled('itop-sample', 'My extension v2', 'This is for test only', ['v1.1.1', 'Designer', '12/12/2012'], ['uninstallable' => false,'missing' => true]);
+$oColumnLeft->AddSubBlock($oExtensionDetailInstalledFromFactory);
+
+$oExtensionDetailInstalledWithLongTitle = ExtensionDetailsUIBlockFactory::MakeNotInstalled('itop-sample', 'My extension with a very long title', 'This is for test only', ['v1.1.1', 'Designer', '12/12/2012'], ['uninstallable' => false]);
+$oColumnRight->AddSubBlock($oExtensionDetailInstalledWithLongTitle);
+$oPage->add('<hr id="page_bottom"/>');
+
 $oPage->output();