Admin Generator (Future): Fix width of actions column in grid (#2590)

vivid-planet · Oct 7, 2024 · d4ae178 · d4ae178
1 parent 5b0f330
commit d4ae178
Show file tree

Hide file tree

Showing 6 changed files with 49 additions and 13 deletions.
diff --git a/demo/admin/src/products/future/ProductsGrid.cometGen.ts b/demo/admin/src/products/future/ProductsGrid.cometGen.ts
@@ -55,7 +55,6 @@ export const ProductsGrid: GridConfig<GQLProduct> = {
         { type: "dateTime", name: "createdAt", width: 170 },
         {
             type: "actions",
-            width: 116,
             component: { name: "ProductsGridPreviewAction", import: "../../ProductsGridPreviewAction" },
         },
     ],

diff --git a/demo/admin/src/products/future/ProductsPage.tsx b/demo/admin/src/products/future/ProductsPage.tsx
@@ -61,6 +61,7 @@ export function ProductsPage() {
                                     <Edit color="primary" />
                                 </IconButton>
                             )}
+                            actionsColumnWidth={116}
                         />
                     </MainContent>
                 </StackPage>

diff --git a/demo/admin/src/products/future/ProductsWithLowPricePage.tsx b/demo/admin/src/products/future/ProductsWithLowPricePage.tsx
@@ -6,7 +6,7 @@ export function ProductsWithLowPricePage() {
     // This grid needs no add or edit-button
     return (
         <MainContent fullHeight>
-            <ProductsGrid filter={{ price: { lowerThan: 10 } }} />
+            <ProductsGrid filter={{ price: { lowerThan: 10 } }} actionsColumnWidth={84} />
         </MainContent>
     );
 }
diff --git a/demo/admin/src/products/future/generated/CombinationFieldsTestProductsGrid.tsx b/demo/admin/src/products/future/generated/CombinationFieldsTestProductsGrid.tsx
@@ -90,9 +90,10 @@ type Props = {
     toolbarAction?: React.ReactNode;
     // eslint-disable-next-line @typescript-eslint/no-explicit-any
     rowAction?: (params: GridRenderCellParams<any, GQLCombinationFieldsTestProductsGridFutureFragment, any>) => React.ReactNode;
+    actionsColumnWidth?: number;
 };
 
-export function ProductsGrid({ toolbarAction, rowAction }: Props): React.ReactElement {
+export function ProductsGrid({ toolbarAction, rowAction, actionsColumnWidth = 52 }: Props): React.ReactElement {
     const client = useApolloClient();
     const intl = useIntl();
     const dataGridProps = { ...useDataGridRemote(), ...usePersistentColumnState("ProductsGrid") };
@@ -253,7 +254,7 @@ export function ProductsGrid({ toolbarAction, rowAction }: Props): React.ReactEl
             type: "actions",
             align: "right",
             pinned: "right",
-            width: 84,
+            width: actionsColumnWidth,
             renderCell: (params) => {
                 return (
                     <>

diff --git a/demo/admin/src/products/future/generated/ProductsGrid.tsx b/demo/admin/src/products/future/generated/ProductsGrid.tsx
@@ -97,9 +97,10 @@ type Props = {
     toolbarAction?: React.ReactNode;
     // eslint-disable-next-line @typescript-eslint/no-explicit-any
     rowAction?: (params: GridRenderCellParams<any, GQLProductsGridFutureFragment, any>) => React.ReactNode;
+    actionsColumnWidth?: number;
 };
 
-export function ProductsGrid({ filter, toolbarAction, rowAction }: Props): React.ReactElement {
+export function ProductsGrid({ filter, toolbarAction, rowAction, actionsColumnWidth = 52 }: Props): React.ReactElement {
     const client = useApolloClient();
     const intl = useIntl();
     const dataGridProps = {
@@ -234,7 +235,7 @@ export function ProductsGrid({ filter, toolbarAction, rowAction }: Props): React
             type: "actions",
             align: "right",
             pinned: "right",
-            width: 116,
+            width: actionsColumnWidth,
             renderCell: (params) => {
                 return (
                     <>

diff --git a/packages/admin/cms-admin/src/generator/future/generateGrid.ts b/packages/admin/cms-admin/src/generator/future/generateGrid.ts
@@ -32,7 +32,13 @@ function tsCodeRecordToString(object: TsCodeRecordToStringObject) {
         .join("\n")}}`;
 }
 
-export type Prop = { type: string; optional: boolean; name: string };
+export type Prop = {
+    type: string;
+    optional: boolean;
+    name: string;
+    defaultValue?: string | number;
+};
+
 function generateGridPropsCode(props: Prop[]): { gridPropsTypeCode: string; gridPropsParamsCode: string } {
     if (!props.length) return { gridPropsTypeCode: "", gridPropsParamsCode: "" };
     const uniqueProps = props.reduce<Prop[]>((acc, prop) => {
@@ -62,7 +68,7 @@ function generateGridPropsCode(props: Prop[]): { gridPropsTypeCode: string; grid
                 )
                 .join("\n")}
         };`,
-        gridPropsParamsCode: `{${uniqueProps.map((prop) => prop.name).join(", ")}}: Props`,
+        gridPropsParamsCode: `{${uniqueProps.map((prop) => `${prop.name} ${prop.defaultValue ? `= ${prop.defaultValue}` : ""}`).join(", ")}}: Props`,
     };
 }
 
@@ -199,7 +205,13 @@ export function generateGrid(
     const allowEditing = (typeof config.edit === "undefined" || config.edit === true) && !config.readOnly;
     const allowDeleting = (typeof config.delete === "undefined" || config.delete === true) && !config.readOnly && hasDeleteMutation;
 
+    const forwardRowAction = allowEditing && config.rowActionProp;
+
     const showActionsColumn = allowCopyPaste || allowEditing || allowDeleting;
+    const showCrudContextMenuInActionsColumn = allowCopyPaste || allowDeleting;
+    const showEditInActionsColumn = allowEditing && !forwardRowAction;
+
+    const defaultActionsColumnWidth = getDefaultActionsColumnWidth(showCrudContextMenuInActionsColumn, showEditInActionsColumn);
 
     const {
         imports: forwardedGqlArgsImports,
@@ -293,7 +305,7 @@ export function generateGrid(
         type: actionsColumnType,
         headerName: actionsColumnHeaderName,
         pinned: actionsColumnPinned = "right",
-        width: actionsColumnWidth = 84,
+        width: actionsColumnWidth = defaultActionsColumnWidth,
         visible: actionsColumnVisible = undefined,
         ...restActionsColumnConfig
     } = actionsColumnConfig ?? {};
@@ -444,13 +456,18 @@ export function generateGrid(
 
     const fragmentName = config.fragmentName ?? `${gqlTypePlural}Form`;
 
-    const forwardRowAction = allowEditing && config.rowActionProp;
     if (forwardRowAction) {
         props.push({
             name: "rowAction",
             type: `(params: GridRenderCellParams<any, GQL${fragmentName}Fragment, any>) => React.ReactNode`,
             optional: true,
         });
+        props.push({
+            name: "actionsColumnWidth",
+            type: `number`,
+            optional: true,
+            defaultValue: defaultActionsColumnWidth,
+        });
     }
 
     const { gridPropsTypeCode, gridPropsParamsCode } = generateGridPropsCode(props);
@@ -571,7 +588,7 @@ export function generateGrid(
     ${gridPropsTypeCode}
 
     export function ${gqlTypePlural}Grid(${gridPropsParamsCode}): React.ReactElement {
-        ${allowCopyPaste || allowDeleting ? "const client = useApolloClient();" : ""}
+        ${showCrudContextMenuInActionsColumn ? "const client = useApolloClient();" : ""}
         const intl = useIntl();
         const dataGridProps = { ...useDataGridRemote(${
             config.initialSort
@@ -673,7 +690,7 @@ export function generateGrid(
                               type: '"actions"',
                               align: '"right"',
                               pinned: `"${actionsColumnPinned}"`,
-                              width: actionsColumnWidth,
+                              width: forwardRowAction ? "actionsColumnWidth" : actionsColumnWidth,
                               visible: actionsColumnVisible && `theme.breakpoints.${actionsColumnVisible}`,
                               ...restActionsColumnConfig,
                               renderCell: `(params) => {
@@ -689,7 +706,7 @@ export function generateGrid(
                                         </IconButton>`
                                       : ""
                               }${
-                                  allowCopyPaste || allowDeleting
+                                  showCrudContextMenuInActionsColumn
                                       ? `
                                         <CrudContextMenu
                                             ${
@@ -822,3 +839,20 @@ export function generateGrid(
         gqlDocuments,
     };
 }
+
+const getDefaultActionsColumnWidth = (showCrudContextMenu: boolean, showEdit: boolean) => {
+    let numberOfActions = 0;
+
+    if (showCrudContextMenu) {
+        numberOfActions += 1;
+    }
+
+    if (showEdit) {
+        numberOfActions += 1;
+    }
+
+    const widthOfSingleAction = 32;
+    const spacingAroundActions = 20;
+
+    return numberOfActions * widthOfSingleAction + spacingAroundActions;
+};