Fixed version tab render issue (#744)

* fixed render issue * Automatic frontend build * bring back `useTranslation` hook * Automatic frontend build --------- Co-authored-by: Corepex <[email protected]>
pimcore · Nov 28, 2024 · ab0a908 · ab0a908
1 parent a2ccd33
commit ab0a908
Show file tree

Hide file tree

Showing 27 changed files with 2,446 additions and 114 deletions.
diff --git a/assets/js/src/core/components/accordion-timeline/accordion-timeline.tsx b/assets/js/src/core/components/accordion-timeline/accordion-timeline.tsx
@@ -48,7 +48,7 @@ export const AccordionTimeline = ({ items }: AccordionTimelineProps): React.JSX.
               items={ [item] }
             />
             )
-                }
+        }
       </div>
     )
   })

diff --git a/...ement/editor/shared-tab-manager/tabs/versions/create-version-accordion-item-functions.tsx b/...ement/editor/shared-tab-manager/tabs/versions/create-version-accordion-item-functions.tsx
@@ -18,13 +18,13 @@ import { Checkbox, Input } from 'antd'
 import { Icon } from '@Pimcore/components/icon/icon'
 import { type PanelTheme } from '@Pimcore/components/accordion/accordion'
 import { type TimeLineAccordionItemType } from '@Pimcore/components/accordion-timeline/accordion-timeline'
-import { useTranslation } from 'react-i18next'
 import { type Version } from '@Pimcore/modules/element/editor/shared-tab-manager/tabs/versions/version-api-slice.gen'
 import { IconButton } from '@Pimcore/components/icon-button/icon-button'
 import { IconTextButton } from '@Pimcore/components/icon-text-button/icon-text-button'
 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'
 
 interface VersionIdentifiers {
   id: number
@@ -52,15 +52,10 @@ export const createVersionAccordionItem = ({
   selectVersion,
   setDetailedVersions
 }: CreateAccordionItemProps): TimeLineAccordionItemType => {
-  const { t } = useTranslation()
-  const [deletingVersion, setDeletingVersion] = useState(false)
-  const [publishingVersion, setPublishingVersion] = useState(false)
-
   const vId = { id: version.id, count: version.versionCount }
   const selected = detailedVersions.some((v => v.id === version.id))
 
   const selectable = comparingActive
-  const ownDraft = false
   const published = version.published ?? false
   const onClick = (): void => {
     if (comparingActive) {
@@ -81,130 +76,139 @@ export const createVersionAccordionItem = ({
     })
     : undefined
 
-  const title = (
-    <div>
-      {selectable && (
-        <Checkbox
-          checked={ selected }
-          onChange={ () => {
-            selectVersion(vId)
-          } }
-        />
-      )}
-      <span className={ 'title' }>{`${t('version.version')} ${version.versionCount} | ${formatDateTime({
-                timestamp: version.date,
-                dateStyle: 'short',
-                timeStyle: 'medium'
-            })} `}</span>
-    </div>
-  )
-
-  const subtitle = (
-    <div>
-      <span className={ 'sub-title' }>{`${t('by')} ${version.user?.name ?? ''}`}</span>
-      {isSet(version.autosave) && version.autosave && <Icon value="lightning-01" />}
-    </div>
-  )
-
-  let extra
-  let themeByState: PanelTheme = selected ? 'theme-primary' : 'theme-default'
+  const Title = (): React.JSX.Element => {
+    const { t } = useTranslation()
 
-  if (published) {
-    themeByState = 'theme-success'
-    extra = (
-      <Tag
-        color="success"
-        iconName={ 'world' }
-      >
-        { t('version.published') }
-      </Tag>
+    return (
+      <div>
+        {selectable && (
+          <Checkbox
+            checked={ selected }
+            onChange={ () => {
+              selectVersion(vId)
+            } }
+          />
+        )}
+        <span className={ 'title' }>
+          {`${t('version.version')} ${version.versionCount} | ${formatDateTime({
+            timestamp: version.date,
+            dateStyle: 'short',
+            timeStyle: 'medium'
+          })}`}</span>
+      </div>
+    )
+  }
+
+  const Subtitle = (): React.JSX.Element => {
+    const { t } = useTranslation()
+
+    return (
+      <div>
+        <span className={ 'sub-title' }>{`${t('by')} ${version.user?.name ?? ''}`}</span>
+        {isSet(version.autosave) && version.autosave && <Icon value="lightning-01" />}
+      </div>
     )
-  } else if (isSet(ownDraft) && ownDraft) {
-    extra = (
+  }
+
+  let themeByState: PanelTheme = selected ? 'theme-primary' : 'theme-default'
+  themeByState = published ? 'theme-success' : themeByState
+
+  const Extra = (): React.JSX.Element => {
+    const { t } = useTranslation()
+    const color = published ? 'success' : 'blue'
+    const icon = published ? 'world' : 'user'
+
+    return (
       <Tag
-        color="blue"
-        iconName="user"
+        color={ color }
+        iconName={ icon }
       >
-        { t('version.own-draft') }
+        { published ? t('version.published') : t('version.own-draft') }
       </Tag>
     )
   }
 
-  const publishVersion = async (): Promise<void> => {
-    setPublishingVersion(true)
-    await onClickPublish(version.id)
-    setPublishingVersion(false)
-  }
+  const Component = (): React.JSX.Element => {
+    const { t } = useTranslation()
+    const [deletingVersion, setDeletingVersion] = useState(false)
+    const [publishingVersion, setPublishingVersion] = useState(false)
 
-  const deleteVersion = (): void => {
-    setDeletingVersion(true)
-    setDetailedVersions([])
-    onClickDelete(version.id)
-  }
+    const publishVersion = async (): Promise<void> => {
+      setPublishingVersion(true)
+      await onClickPublish(version.id)
+      setPublishingVersion(false)
+    }
+
+    const deleteVersion = (): void => {
+      setDeletingVersion(true)
+      setDetailedVersions([])
+      onClickDelete(version.id)
+    }
 
-  const children = (
-    <Flex
-      gap={ 'extra-small' }
-      vertical
-    >
+    return (
       <Flex
-        align='center'
-        justify='space-between'
+        gap={ 'extra-small' }
+        vertical
       >
-        <Tag className={ 'id-tag' }>ID: {version.id}</Tag>
-        <Space size='mini'>
-          {!published && (
-            <IconTextButton
-              className={ 'btn-publish' }
-              disabled={ publishingVersion || deletingVersion }
-              icon={ { value: 'world' } }
-              loading={ publishingVersion }
-              onClick={ publishVersion }
-            >
-              {t('version.publish')}
-            </IconTextButton>
-          )}
-          <IconButton
-            aria-label={ t('aria.version.delete') }
-            disabled={ publishingVersion }
-            icon={ { value: 'trash' } }
-            loading={ deletingVersion }
-            onClick={ deleteVersion }
-            type={ 'default' }
+        <Flex
+          align='center'
+          justify='space-between'
+        >
+          <Tag className={ 'id-tag' }>ID: {version.id}</Tag>
+          <Space size='mini'>
+            {!published && (
+              <IconTextButton
+                className={ 'btn-publish' }
+                disabled={ publishingVersion || deletingVersion }
+                icon={ { value: 'world' } }
+                loading={ publishingVersion }
+                onClick={ publishVersion }
+              >
+                {t('version.publish')}
+              </IconTextButton>
+            )}
+            <IconButton
+              aria-label={ t('aria.version.delete') }
+              disabled={ publishingVersion }
+              icon={ { value: 'trash' } }
+              loading={ deletingVersion }
+              onClick={ deleteVersion }
+              type={ 'default' }
+            />
+          </Space>
+        </Flex>
+        {
+          isSet(scheduledDate) && (
+            <div className={ 'row-margin' }>
+              <div>{t('version.schedule-for')}</div>
+              <div className={ 'date-container' }>
+                <Icon value="calender" />
+                <span className={ 'scheduled-date' }>{scheduledDate}</span>
+              </div>
+            </div>
+          )
+        }
+        <div className={ 'row-margin' }>
+          <span>{t('version.note')}</span>
+          <Input
+            defaultValue={ version.note }
+            onBlur={ (e): void => {
+              onBlurNote(version.id, e.target.value.toString())
+            } }
+            placeholder={ 'Add a note' }
           />
-        </Space>
+        </div>
       </Flex>
-      {
-                isSet(scheduledDate) && (
-                <div className={ 'row-margin' }>
-                  <div>{t('version.schedule-for')}</div>
-                  <div className={ 'date-container' }>
-                    <Icon value="calender" />
-                    <span className={ 'scheduled-date' }>{scheduledDate}</span>
-                  </div>
-                </div>
-                )
-            }
-      <div className={ 'row-margin' }>
-        <span>{t('version.note')}</span>
-        <Input
-          defaultValue={ version.note }
-          onBlur={ (e): void => {
-            onBlurNote(version.id, e.target.value.toString())
-          } }
-          placeholder={ 'Add a note' }
-        />
-      </div>
-    </Flex>
-  )
+    )
+  }
 
   return {
     key: String(version.id),
     selected,
-    title,
-    subtitle,
-    extra,
-    children,
+    title: <Title />,
+    subtitle: <Subtitle />,
+    extra: <Extra />,
+    children: <Component />,
     onClick,
     theme: themeByState
   }

diff --git a/...s/src/core/modules/element/editor/shared-tab-manager/tabs/versions/versions-container.tsx b/...s/src/core/modules/element/editor/shared-tab-manager/tabs/versions/versions-container.tsx
@@ -16,7 +16,8 @@ import {
   useVersionCleanupForElementByTypeAndIdMutation,
   useVersionDeleteByIdMutation,
   useVersionGetCollectionForElementByTypeAndIdQuery,
-  useVersionPublishByIdMutation, useVersionUpdateByIdMutation
+  useVersionPublishByIdMutation,
+  useVersionUpdateByIdMutation
 } from '@Pimcore/modules/element/editor/shared-tab-manager/tabs/versions/version-api-slice-enhanced'
 import { VersionsView } from '@Pimcore/modules/element/editor/shared-tab-manager/tabs/versions/versions-view'
 import { Content } from '@Pimcore/components/content/content'

diff --git a/public/build/476088d0-3663-40c7-bf63-3a21ca713b2b/entrypoints.json b/public/build/476088d0-3663-40c7-bf63-3a21ca713b2b/entrypoints.json
@@ -0,0 +1,9 @@
+{
+  "entrypoints": {
+    "vendor": {
+      "js": [
+        "/bundles/pimcorestudioui/build/476088d0-3663-40c7-bf63-3a21ca713b2b/vendor.js"
+      ]
+    }
+  }
+}
diff --git a/public/build/476088d0-3663-40c7-bf63-3a21ca713b2b/manifest.json b/public/build/476088d0-3663-40c7-bf63-3a21ca713b2b/manifest.json
@@ -0,0 +1,3 @@
+{
+  "bundles/pimcorestudioui/build/476088d0-3663-40c7-bf63-3a21ca713b2b/vendor.js": "/bundles/pimcorestudioui/build/476088d0-3663-40c7-bf63-3a21ca713b2b/vendor.js"
+}
diff --git a/public/build/476088d0-3663-40c7-bf63-3a21ca713b2b/vendor.js b/public/build/476088d0-3663-40c7-bf63-3a21ca713b2b/vendor.js