Fix behavior of version accordions (#790)

* Fix behavior of version accordions

* Automatic frontend build

---------

Co-authored-by: vin0401 <[email protected]>

assets/js/src/core/components/accordion/accordion.styles.ts

@@ -67,7 +67,7 @@ export const useStyles = createStyles(({ token, css }) => {
             > .ant-collapse-header {
                 display: inline-flex;
                 width: 100%;
-                align-items: center;
+                align-items: baseline;
 
                 > .ant-collapse-header-text {
                     margin-inline-end: 0;

assets/js/src/core/components/accordion/accordion.tsx

@@ -89,6 +89,7 @@ export const Accordion = ({
           role={ 'button' }
           size="small"
           type={ 'text' }
+          variant='minimal'
         />
       )
     }
@@ -107,8 +108,7 @@ export const Accordion = ({
       className: itemClassNames.join(' '),
       label: <>
         <Flex
-          align={ 'center' }
-          vertical={ false }
+          align={ 'baseline' }
         >
           {expandIconPosition === 'start' && (item.children !== null) && !(item.disabled === true) &&
                         chevronButton()}

assets/js/src/core/modules/element/editor/shared-tab-manager/tabs/versions/create-version-accordion-item-functions.tsx

@@ -25,6 +25,7 @@ import { Flex } from '@Pimcore/components/flex/flex'
 import { Space } from '@Pimcore/components/space/space'
 import { Tag } from '@Pimcore/components/tag/tag'
 import { useTranslation } from 'react-i18next'
+import { Box } from '@Pimcore/components/box/box'
 
 interface VersionIdentifiers {
   id: number
@@ -82,12 +83,18 @@ export const createVersionAccordionItem = ({
     return (
       <div>
         {selectable && (
-          <Checkbox
-            checked={ selected }
-            onChange={ () => {
-              selectVersion(vId)
-            } }
-          />
+          <Box
+            inline
+            padding={ { right: 'extra-small' } }
+          >
+            <Checkbox
+              checked={ selected }
+              onChange={ () => {
+                selectVersion(vId)
+              } }
+            />
+          </Box>
+
         )}
         <span className={ 'title' }>
           {`${t('version.version')} ${version.versionCount} | ${formatDateTime({
@@ -115,15 +122,17 @@ export const createVersionAccordionItem = ({
 
   const Extra = (): React.JSX.Element => {
     const { t } = useTranslation()
-    const color = published ? 'success' : 'blue'
-    const icon = published ? 'world' : 'user'
+
+    if (!published) {
+      return <></>
+    }
 
     return (
       <Tag
-        color={ color }
-        iconName={ icon }
+        color={ 'success' }
+        iconName={ 'world' }
       >
-        { published ? t('version.published') : t('version.own-draft') }
+        {t('version.published')}
       </Tag>
     )
   }
@@ -151,7 +160,7 @@ export const createVersionAccordionItem = ({
         vertical
       >
         <Flex
-          align='center'
+          align='top'
           justify='space-between'
         >
           <Tag className={ 'id-tag' }>ID: {version.id}</Tag>

assets/js/src/core/modules/element/editor/shared-tab-manager/tabs/versions/version-api-slice-enhanced.ts

@@ -43,4 +43,11 @@ export const api = baseApi.enhanceEndpoints({
 })
 
 export type * from './version-api-slice.gen'
-export const { useVersionAssetDownloadByIdQuery, useVersionCleanupForElementByTypeAndIdMutation, useVersionDeleteByIdMutation, useVersionGetByIdQuery, useVersionGetCollectionForElementByTypeAndIdQuery, useVersionPublishByIdMutation, useVersionUpdateByIdMutation } = api
+export const {
+  useVersionAssetDownloadByIdQuery,
+  useVersionCleanupForElementByTypeAndIdMutation,
+  useVersionDeleteByIdMutation, useVersionGetByIdQuery,
+  useVersionGetCollectionForElementByTypeAndIdQuery,
+  useVersionPublishByIdMutation,
+  useVersionUpdateByIdMutation
+} = api

public/build/93e6c067-08e7-4dc3-85ae-33a4a8eabbda/entrypoints.json

@@ -0,0 +1,9 @@
+{
+  "entrypoints": {
+    "main": {
+      "js": [
+        "/bundles/pimcorestudioui/build/93e6c067-08e7-4dc3-85ae-33a4a8eabbda/main.js"
+      ]
+    }
+  }
+}

public/build/93e6c067-08e7-4dc3-85ae-33a4a8eabbda/main.js.LICENSE.txt

@@ -0,0 +1,16 @@
+/*!
+ * 
+ *       /**
+ *        * Pimcore
+ *        *
+ *        * This source file is available under two different licenses:
+ *        * - Pimcore Open Core License (POCL)
+ *        * - Pimcore Commercial License (PCL)
+ *        * Full copyright and license information is available in
+ *        * LICENSE.md which is distributed with this source code.
+ *        *
+ *        *  @copyright  Copyright (c) Pimcore GmbH (http://www.pimcore.org)
+ *        *  @license    https://github.com/pimcore/studio-ui-bundle/blob/1.x/LICENSE.md POCL and PCL
+ *        * /
+ *
+ */

public/build/93e6c067-08e7-4dc3-85ae-33a4a8eabbda/manifest.json

@@ -0,0 +1,3 @@
+{
+  "bundles/pimcorestudioui/build/93e6c067-08e7-4dc3-85ae-33a4a8eabbda/main.js": "/bundles/pimcorestudioui/build/93e6c067-08e7-4dc3-85ae-33a4a8eabbda/main.js"
+}

public/build/9b1d3203-13f4-405d-a36b-4fa768254b71/105.js.LICENSE.txt

@@ -0,0 +1,16 @@
+/*!
+ * 
+ *       /**
+ *        * Pimcore
+ *        *
+ *        * This source file is available under two different licenses:
+ *        * - Pimcore Open Core License (POCL)
+ *        * - Pimcore Commercial License (PCL)
+ *        * Full copyright and license information is available in
+ *        * LICENSE.md which is distributed with this source code.
+ *        *
+ *        *  @copyright  Copyright (c) Pimcore GmbH (http://www.pimcore.org)
+ *        *  @license    https://github.com/pimcore/studio-ui-bundle/blob/1.x/LICENSE.md POCL and PCL
+ *        * /
+ *
+ */

public/build/9b1d3203-13f4-405d-a36b-4fa768254b71/core-dll.js.LICENSE.txt

@@ -0,0 +1,138 @@
+/* @preserve
+ * Leaflet 1.9.4, a JS library for interactive maps. https://leafletjs.com
+ * (c) 2010-2023 Vladimir Agafonkin, (c) 2010-2011 CloudMade
+ */
+
+/*!
+	Copyright (c) 2018 Jed Watson.
+	Licensed under the MIT License (MIT), see
+	http://jedwatson.github.io/classnames
+*/
+
+/*!
+ * 
+ *       /**
+ *        * Pimcore
+ *        *
+ *        * This source file is available under two different licenses:
+ *        * - Pimcore Open Core License (POCL)
+ *        * - Pimcore Commercial License (PCL)
+ *        * Full copyright and license information is available in
+ *        * LICENSE.md which is distributed with this source code.
+ *        *
+ *        *  @copyright  Copyright (c) Pimcore GmbH (http://www.pimcore.org)
+ *        *  @license    https://github.com/pimcore/studio-ui-bundle/blob/1.x/LICENSE.md POCL and PCL
+ *        * /
+ *
+ */
+
+/*! @license DOMPurify 3.2.1 | (c) Cure53 and other contributors | Released under the Apache license 2.0 and Mozilla Public License 2.0 | github.com/cure53/DOMPurify/blob/3.2.1/LICENSE */
+
+/*! regenerator-runtime -- Copyright (c) 2014-present, Facebook, Inc. -- license (MIT): https://github.com/facebook/regenerator/blob/main/LICENSE */
+
+/**
+   * react-table
+   *
+   * Copyright (c) TanStack
+   *
+   * This source code is licensed under the MIT license found in the
+   * LICENSE.md file in the root directory of this source tree.
+   *
+   * @license MIT
+   */
+
+/**
+   * table-core
+   *
+   * Copyright (c) TanStack
+   *
+   * This source code is licensed under the MIT license found in the
+   * LICENSE.md file in the root directory of this source tree.
+   *
+   * @license MIT
+   */
+
+/**
+ * @license
+ * Lodash <https://lodash.com/>
+ * Copyright OpenJS Foundation and other contributors <https://openjsf.org/>
+ * Released under MIT license <https://lodash.com/license>
+ * Based on Underscore.js 1.8.3 <http://underscorejs.org/LICENSE>
+ * Copyright Jeremy Ashkenas, DocumentCloud and Investigative Reporters & Editors
+ */
+
+/**
+ * @license React
+ * react-is.production.min.js
+ *
+ * Copyright (c) Facebook, Inc. and its affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+/**
+ * @license React
+ * react-jsx-runtime.production.min.js
+ *
+ * Copyright (c) Facebook, Inc. and its affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+/**
+ * @license React
+ * use-sync-external-store-with-selector.production.min.js
+ *
+ * Copyright (c) Facebook, Inc. and its affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+/**
+ * @remix-run/router v1.21.0
+ *
+ * Copyright (c) Remix Software Inc.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE.md file in the root directory of this source tree.
+ *
+ * @license MIT
+ */
+
+/**
+ * React Router DOM v6.28.0
+ *
+ * Copyright (c) Remix Software Inc.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE.md file in the root directory of this source tree.
+ *
+ * @license MIT
+ */
+
+/**
+ * React Router v6.28.0
+ *
+ * Copyright (c) Remix Software Inc.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE.md file in the root directory of this source tree.
+ *
+ * @license MIT
+ */
+
+/**
+* Pimcore
+*
+* This source file is available under two different licenses:
+* - Pimcore Open Core License (POCL)
+* - Pimcore Commercial License (PCL)
+* Full copyright and license information is available in
+* LICENSE.md which is distributed with this source code.
+*
+*  @copyright  Copyright (c) Pimcore GmbH (http://www.pimcore.org)
+*  @license    https://github.com/pimcore/studio-ui-bundle/blob/1.x/LICENSE.md POCL and PCL
+*/

public/build/9b1d3203-13f4-405d-a36b-4fa768254b71/entrypoints.json

@@ -0,0 +1,12 @@
+{
+  "entrypoints": {
+    "core-dll": {
+      "css": [
+        "/bundles/pimcorestudioui/build/9b1d3203-13f4-405d-a36b-4fa768254b71/core-dll.css"
+      ],
+      "js": [
+        "/bundles/pimcorestudioui/build/9b1d3203-13f4-405d-a36b-4fa768254b71/core-dll.js"
+      ]
+    }
+  }
+}