Fix layouts for translation edition pages (#4178)

* Fix translation pages * Fix translation pages
saleor · Sep 8, 2023 · a1b9312 · a1b9312
1 parent 00418b9
commit a1b9312
Show file tree

Hide file tree

Showing 6 changed files with 297 additions and 282 deletions.
diff --git a/.changeset/giant-wolves-fry.md b/.changeset/giant-wolves-fry.md
@@ -0,0 +1,5 @@
+---
+"saleor-dashboard": patch
+---
+
+Fix layouts for translation pages
diff --git a/src/translations/components/TranslationsAttributesPage/TranslationsAttributesPage.tsx b/src/translations/components/TranslationsAttributesPage/TranslationsAttributesPage.tsx
@@ -86,48 +86,50 @@ const TranslationsAttributesPage: React.FC<TranslationsAttributesPageProps> = ({
           }
         />
       </TopNav>
-      <TranslationFields
-        activeField={activeField}
-        disabled={disabled}
-        initialState={true}
-        title={intl.formatMessage(commonMessages.generalInformations)}
-        fields={[
-          {
-            displayName: intl.formatMessage({
-              id: "DRMMDs",
-              defaultMessage: "Attribute Name",
-            }),
-            name: fieldNames.attribute + ":" + data?.attribute.id,
-            translation: data?.translation?.name || null,
-            type: "short" as "short",
-            value: data?.attribute?.name,
-          },
-        ]}
-        saveButtonState={saveButtonState}
-        richTextResetKey={languageCode}
-        onEdit={onEdit}
-        onDiscard={onDiscard}
-        onSubmit={onSubmit}
-      />
-      <CardSpacer />
-      {data?.attribute?.choices.edges.length > 0 && withChoices && (
+      <DetailPageLayout.Content>
         <TranslationFields
           activeField={activeField}
           disabled={disabled}
           initialState={true}
-          title={intl.formatMessage(messages.values)}
-          fields={getTranslationFields(data?.attribute?.choices, intl)}
+          title={intl.formatMessage(commonMessages.generalInformations)}
+          fields={[
+            {
+              displayName: intl.formatMessage({
+                id: "DRMMDs",
+                defaultMessage: "Attribute Name",
+              }),
+              name: fieldNames.attribute + ":" + data?.attribute.id,
+              translation: data?.translation?.name || null,
+              type: "short" as "short",
+              value: data?.attribute?.name,
+            },
+          ]}
           saveButtonState={saveButtonState}
           richTextResetKey={languageCode}
-          pagination={{
-            settings,
-            onUpdateListSettings,
-          }}
           onEdit={onEdit}
           onDiscard={onDiscard}
           onSubmit={onSubmit}
         />
-      )}
+        <CardSpacer />
+        {data?.attribute?.choices.edges.length > 0 && withChoices && (
+          <TranslationFields
+            activeField={activeField}
+            disabled={disabled}
+            initialState={true}
+            title={intl.formatMessage(messages.values)}
+            fields={getTranslationFields(data?.attribute?.choices, intl)}
+            saveButtonState={saveButtonState}
+            richTextResetKey={languageCode}
+            pagination={{
+              settings,
+              onUpdateListSettings,
+            }}
+            onEdit={onEdit}
+            onDiscard={onDiscard}
+            onSubmit={onSubmit}
+          />
+        )}
+      </DetailPageLayout.Content>
     </DetailPageLayout>
   );
 };

diff --git a/src/translations/components/TranslationsCategoriesPage/TranslationsCategoriesPage.tsx b/src/translations/components/TranslationsCategoriesPage/TranslationsCategoriesPage.tsx
@@ -72,73 +72,75 @@ const TranslationsCategoriesPage: React.FC<TranslationsCategoriesPageProps> = ({
           }
         />
       </TopNav>
-      <TranslationFields
-        activeField={activeField}
-        disabled={disabled}
-        initialState={true}
-        title={intl.formatMessage(commonMessages.generalInformations)}
-        fields={[
-          {
-            displayName: intl.formatMessage({
-              id: "vEYtiq",
-              defaultMessage: "Category Name",
-            }),
-            name: TranslationInputFieldName.name,
-            translation: data?.translation?.name || null,
-            type: "short" as "short",
-            value: data?.category?.name,
-          },
-          {
-            displayName: intl.formatMessage(commonMessages.description),
-            name: TranslationInputFieldName.description,
-            translation: data?.translation?.description || null,
-            type: "rich" as "rich",
-            value: data?.category?.description,
-          },
-        ]}
-        saveButtonState={saveButtonState}
-        richTextResetKey={languageCode}
-        onEdit={onEdit}
-        onDiscard={onDiscard}
-        onSubmit={onSubmit}
-      />
-      <CardSpacer />
-      <TranslationFields
-        activeField={activeField}
-        disabled={disabled}
-        initialState={true}
-        title={intl.formatMessage({
-          id: "TGX4T1",
-          defaultMessage: "Search Engine Preview",
-        })}
-        fields={[
-          {
-            displayName: intl.formatMessage({
-              id: "HlEpii",
-              defaultMessage: "Search Engine Title",
-            }),
-            name: TranslationInputFieldName.seoTitle,
-            translation: data?.translation?.seoTitle || null,
-            type: "short" as "short",
-            value: data?.category?.seoTitle,
-          },
-          {
-            displayName: intl.formatMessage({
-              id: "US3IPU",
-              defaultMessage: "Search Engine Description",
-            }),
-            name: TranslationInputFieldName.seoDescription,
-            translation: data?.translation?.seoDescription || null,
-            type: "long" as "long",
-            value: data?.category?.seoDescription,
-          },
-        ]}
-        saveButtonState={saveButtonState}
-        richTextResetKey={languageCode}
-        onEdit={onEdit}
-        onDiscard={onDiscard}
-        onSubmit={onSubmit}
-      />
+      <DetailPageLayout.Content>
+        <TranslationFields
+          activeField={activeField}
+          disabled={disabled}
+          initialState={true}
+          title={intl.formatMessage(commonMessages.generalInformations)}
+          fields={[
+            {
+              displayName: intl.formatMessage({
+                id: "vEYtiq",
+                defaultMessage: "Category Name",
+              }),
+              name: TranslationInputFieldName.name,
+              translation: data?.translation?.name || null,
+              type: "short" as "short",
+              value: data?.category?.name,
+            },
+            {
+              displayName: intl.formatMessage(commonMessages.description),
+              name: TranslationInputFieldName.description,
+              translation: data?.translation?.description || null,
+              type: "rich" as "rich",
+              value: data?.category?.description,
+            },
+          ]}
+          saveButtonState={saveButtonState}
+          richTextResetKey={languageCode}
+          onEdit={onEdit}
+          onDiscard={onDiscard}
+          onSubmit={onSubmit}
+        />
+        <CardSpacer />
+        <TranslationFields
+          activeField={activeField}
+          disabled={disabled}
+          initialState={true}
+          title={intl.formatMessage({
+            id: "TGX4T1",
+            defaultMessage: "Search Engine Preview",
+          })}
+          fields={[
+            {
+              displayName: intl.formatMessage({
+                id: "HlEpii",
+                defaultMessage: "Search Engine Title",
+              }),
+              name: TranslationInputFieldName.seoTitle,
+              translation: data?.translation?.seoTitle || null,
+              type: "short" as "short",
+              value: data?.category?.seoTitle,
+            },
+            {
+              displayName: intl.formatMessage({
+                id: "US3IPU",
+                defaultMessage: "Search Engine Description",
+              }),
+              name: TranslationInputFieldName.seoDescription,
+              translation: data?.translation?.seoDescription || null,
+              type: "long" as "long",
+              value: data?.category?.seoDescription,
+            },
+          ]}
+          saveButtonState={saveButtonState}
+          richTextResetKey={languageCode}
+          onEdit={onEdit}
+          onDiscard={onDiscard}
+          onSubmit={onSubmit}
+        />
+      </DetailPageLayout.Content>
     </DetailPageLayout>
   );
 };

diff --git a/src/translations/components/TranslationsCollectionsPage/TranslationsCollectionsPage.tsx b/src/translations/components/TranslationsCollectionsPage/TranslationsCollectionsPage.tsx
@@ -75,73 +75,75 @@ const TranslationsCollectionsPage: React.FC<
           }
         />
       </TopNav>
-      <TranslationFields
-        activeField={activeField}
-        disabled={disabled}
-        initialState={true}
-        title={intl.formatMessage(commonMessages.generalInformations)}
-        fields={[
-          {
-            displayName: intl.formatMessage({
-              id: "VZsE96",
-              defaultMessage: "Collection Name",
-            }),
-            name: TranslationInputFieldName.name,
-            translation: data?.translation?.name || null,
-            type: "short" as "short",
-            value: data?.collection?.name,
-          },
-          {
-            displayName: intl.formatMessage(commonMessages.description),
-            name: TranslationInputFieldName.description,
-            translation: data?.translation?.description || null,
-            type: "rich" as "rich",
-            value: data?.collection?.description,
-          },
-        ]}
-        saveButtonState={saveButtonState}
-        richTextResetKey={languageCode}
-        onEdit={onEdit}
-        onDiscard={onDiscard}
-        onSubmit={onSubmit}
-      />
-      <CardSpacer />
-      <TranslationFields
-        activeField={activeField}
-        disabled={disabled}
-        initialState={true}
-        title={intl.formatMessage({
-          id: "TGX4T1",
-          defaultMessage: "Search Engine Preview",
-        })}
-        fields={[
-          {
-            displayName: intl.formatMessage({
-              id: "HlEpii",
-              defaultMessage: "Search Engine Title",
-            }),
-            name: TranslationInputFieldName.seoTitle,
-            translation: data?.translation?.seoTitle || null,
-            type: "short" as "short",
-            value: data?.collection?.seoTitle,
-          },
-          {
-            displayName: intl.formatMessage({
-              id: "US3IPU",
-              defaultMessage: "Search Engine Description",
-            }),
-            name: TranslationInputFieldName.seoDescription,
-            translation: data?.translation?.seoDescription || null,
-            type: "long" as "long",
-            value: data?.collection?.seoDescription,
-          },
-        ]}
-        saveButtonState={saveButtonState}
-        richTextResetKey={languageCode}
-        onEdit={onEdit}
-        onDiscard={onDiscard}
-        onSubmit={onSubmit}
-      />
+      <DetailPageLayout.Content>
+        <TranslationFields
+          activeField={activeField}
+          disabled={disabled}
+          initialState={true}
+          title={intl.formatMessage(commonMessages.generalInformations)}
+          fields={[
+            {
+              displayName: intl.formatMessage({
+                id: "VZsE96",
+                defaultMessage: "Collection Name",
+              }),
+              name: TranslationInputFieldName.name,
+              translation: data?.translation?.name || null,
+              type: "short" as "short",
+              value: data?.collection?.name,
+            },
+            {
+              displayName: intl.formatMessage(commonMessages.description),
+              name: TranslationInputFieldName.description,
+              translation: data?.translation?.description || null,
+              type: "rich" as "rich",
+              value: data?.collection?.description,
+            },
+          ]}
+          saveButtonState={saveButtonState}
+          richTextResetKey={languageCode}
+          onEdit={onEdit}
+          onDiscard={onDiscard}
+          onSubmit={onSubmit}
+        />
+        <CardSpacer />
+        <TranslationFields
+          activeField={activeField}
+          disabled={disabled}
+          initialState={true}
+          title={intl.formatMessage({
+            id: "TGX4T1",
+            defaultMessage: "Search Engine Preview",
+          })}
+          fields={[
+            {
+              displayName: intl.formatMessage({
+                id: "HlEpii",
+                defaultMessage: "Search Engine Title",
+              }),
+              name: TranslationInputFieldName.seoTitle,
+              translation: data?.translation?.seoTitle || null,
+              type: "short" as "short",
+              value: data?.collection?.seoTitle,
+            },
+            {
+              displayName: intl.formatMessage({
+                id: "US3IPU",
+                defaultMessage: "Search Engine Description",
+              }),
+              name: TranslationInputFieldName.seoDescription,
+              translation: data?.translation?.seoDescription || null,
+              type: "long" as "long",
+              value: data?.collection?.seoDescription,
+            },
+          ]}
+          saveButtonState={saveButtonState}
+          richTextResetKey={languageCode}
+          onEdit={onEdit}
+          onDiscard={onDiscard}
+          onSubmit={onSubmit}
+        />
+      </DetailPageLayout.Content>
     </DetailPageLayout>
   );
 };