Admin Generator (Future): Implement option to set Tooltips for grid column headers

demo/admin/src/products/ManufacturersGrid.tsx

@@ -17,8 +17,8 @@ import {
     usePersistentColumnState,
 } from "@comet/admin";
 import { Add as AddIcon, Edit, Info } from "@comet/admin-icons";
-import { Button, IconButton, Typography } from "@mui/material";
-import { DataGridPro, GridToolbarQuickFilter } from "@mui/x-data-grid-pro";
+import { Button, IconButton } from "@mui/material";
+import { DataGridPro, GridColumnHeaderTitle, GridToolbarQuickFilter } from "@mui/x-data-grid-pro";
 import {
     GQLCreateManufacturerMutation,
     GQLCreateManufacturerMutationVariables,
@@ -64,16 +64,15 @@ export function ManufacturersGrid() {
             width: 150,
             renderHeader: () => (
                 <div style={{ display: "flex", alignItems: "center" }}>
-                    <Typography fontWeight={400} fontSize={14}>
+                    <GridColumnHeaderTitle label="ID" columnWidth={150}>
                         {intl.formatMessage({ id: "manufacturers.id", defaultMessage: "ID" })}
-                    </Typography>
+                    </GridColumnHeaderTitle>
+
                     <Tooltip
-                        trigger="click"
+                        trigger="hover"
                         title={<FormattedMessage id="comet.manufacturers.id.info" defaultMessage="The id of the manufacturer" />}
                     >
-                        <IconButton>
-                            <Info />
-                        </IconButton>
+                        <Info sx={{ margin: 1 }} />
                     </Tooltip>
                 </div>
             ),

demo/admin/src/products/future/ManufacturersGrid.cometGen.ts

@@ -10,8 +10,13 @@ export const ManufacturersGrid: GridConfig<GQLManufacturer> = {
         { type: "text", name: "name", headerName: "Name" },
         { type: "text", name: "address.street", headerName: "Street" },
         { type: "number", name: "address.streetNumber", headerName: "Street number" },
-        { type: "text", name: "address.alternativeAddress.street", headerName: "Alt-Street" },
-        { type: "number", name: "address.alternativeAddress.streetNumber", headerName: "Alt-Street number" },
+        { type: "text", name: "address.alternativeAddress.street", headerName: "Alt-Street", tooltipMessage: "Street of alternative address" },
+        {
+            type: "number",
+            name: "address.alternativeAddress.streetNumber",
+            headerName: "Alt-Street number",
+            tooltipMessage: "Street number of alternative address",
+        },
         { type: "text", name: "addressAsEmbeddable.street", headerName: "Street 2" },
         { type: "number", name: "addressAsEmbeddable.streetNumber", headerName: "Street number 2" },
         { type: "text", name: "addressAsEmbeddable.alternativeAddress.street", headerName: "Alt-Street 2" },

demo/admin/src/products/future/ProductsGrid.cometGen.ts

@@ -12,7 +12,7 @@ export const ProductsGrid: GridConfig<GQLProduct> = {
         { type: "boolean", name: "inStock", headerName: "In stock", width: 90 },
         { type: "text", name: "title", headerName: "Titel", minWidth: 200, maxWidth: 250 },
         { type: "text", name: "description", headerName: "Description" },
-        { type: "number", name: "price", headerName: "Price", maxWidth: 150 },
+        { type: "number", name: "price", headerName: "Price", maxWidth: 150, tooltipMessage: "Price in EUR" },
         { type: "staticSelect", name: "type", maxWidth: 150 /*, values: from gql schema (TODO overridable)*/ },
         { type: "date", name: "availableSince", width: 140 },
         { type: "dateTime", name: "createdAt", width: 170 },

demo/admin/src/products/future/generated/ManufacturersGrid.tsx

@@ -13,13 +13,14 @@ import {
     ToolbarActions,
     ToolbarFillSpace,
     ToolbarItem,
+    Tooltip,
     useBufferedRowCount,
     useDataGridRemote,
     usePersistentColumnState,
 } from "@comet/admin";
-import { Add as AddIcon, Edit } from "@comet/admin-icons";
+import { Add as AddIcon, Edit, Info } from "@comet/admin-icons";
 import { Button, IconButton } from "@mui/material";
-import { DataGridPro, GridToolbarQuickFilter } from "@mui/x-data-grid-pro";
+import { DataGridPro, GridColumnHeaderTitle, GridToolbarQuickFilter } from "@mui/x-data-grid-pro";
 import * as React from "react";
 import { FormattedMessage, useIntl } from "react-intl";
 
@@ -137,7 +138,27 @@ export function ManufacturersGrid(): React.ReactElement {
         },
         {
             field: "address_alternativeAddress_street",
-            headerName: intl.formatMessage({ id: "manufacturer.address.alternativeAddress.street", defaultMessage: "Alt-Street" }),
+            renderHeader: () => (
+                <>
+                    <GridColumnHeaderTitle
+                        label={intl.formatMessage({ id: "manufacturer.address.alternativeAddress.street", defaultMessage: "Alt-Street" })}
+                        columnWidth={150}
+                    >
+                        {intl.formatMessage({ id: "manufacturer.address.alternativeAddress.street", defaultMessage: "Alt-Street" })}
+                    </GridColumnHeaderTitle>
+                    <Tooltip
+                        trigger="hover"
+                        title={
+                            <FormattedMessage
+                                id="manufacturer.address.alternativeAddress.street.tooltip"
+                                defaultMessage="Street of alternative address"
+                            />
+                        }
+                    >
+                        <Info sx={{ margin: 1 }} />
+                    </Tooltip>
+                </>
+            ),
             filterable: false,
             sortable: false,
             valueGetter: ({ row }) => row.address?.alternativeAddress?.street,
@@ -146,7 +167,30 @@ export function ManufacturersGrid(): React.ReactElement {
         },
         {
             field: "address_alternativeAddress_streetNumber",
-            headerName: intl.formatMessage({ id: "manufacturer.address.alternativeAddress.streetNumber", defaultMessage: "Alt-Street number" }),
+            renderHeader: () => (
+                <>
+                    <GridColumnHeaderTitle
+                        label={intl.formatMessage({
+                            id: "manufacturer.address.alternativeAddress.streetNumber",
+                            defaultMessage: "Alt-Street number",
+                        })}
+                        columnWidth={150}
+                    >
+                        {intl.formatMessage({ id: "manufacturer.address.alternativeAddress.streetNumber", defaultMessage: "Alt-Street number" })}
+                    </GridColumnHeaderTitle>
+                    <Tooltip
+                        trigger="hover"
+                        title={
+                            <FormattedMessage
+                                id="manufacturer.address.alternativeAddress.streetNumber.tooltip"
+                                defaultMessage="Street number of alternative address"
+                            />
+                        }
+                    >
+                        <Info sx={{ margin: 1 }} />
+                    </Tooltip>
+                </>
+            ),
             type: "number",
             filterable: false,
             sortable: false,

demo/admin/src/products/future/generated/ProductsGrid.tsx

@@ -12,15 +12,17 @@ import {
     ToolbarActions,
     ToolbarFillSpace,
     ToolbarItem,
+    Tooltip,
     useBufferedRowCount,
     useDataGridRemote,
     usePersistentColumnState,
 } from "@comet/admin";
+import { Info } from "@comet/admin-icons";
 import { DamImageBlock } from "@comet/cms-admin";
-import { DataGridPro, GridRenderCellParams, GridToolbarQuickFilter } from "@mui/x-data-grid-pro";
+import { DataGridPro, GridColumnHeaderTitle, GridRenderCellParams, GridToolbarQuickFilter } from "@mui/x-data-grid-pro";
 import { GQLProductFilter } from "@src/graphql.generated";
 import * as React from "react";
-import { useIntl } from "react-intl";
+import { FormattedMessage, useIntl } from "react-intl";
 
 import {
     GQLCreateProductMutation,
@@ -109,7 +111,16 @@ export function ProductsGrid({ filter, toolbarAction, rowAction }: Props): React
         },
         {
             field: "price",
-            headerName: intl.formatMessage({ id: "product.price", defaultMessage: "Price" }),
+            renderHeader: () => (
+                <>
+                    <GridColumnHeaderTitle label={intl.formatMessage({ id: "product.price", defaultMessage: "Price" })} columnWidth={150}>
+                        {intl.formatMessage({ id: "product.price", defaultMessage: "Price" })}
+                    </GridColumnHeaderTitle>
+                    <Tooltip trigger="hover" title={<FormattedMessage id="product.price.tooltip" defaultMessage="Price in EUR" />}>
+                        <Info sx={{ margin: 1 }} />
+                    </Tooltip>
+                </>
+            ),
             type: "number",
             flex: 1,
             maxWidth: 150,

packages/admin/cms-admin/src/generator/future/generateGrid.ts

@@ -276,6 +276,7 @@ export function generateGrid(
                 minWidth: column.minWidth,
                 maxWidth: column.maxWidth,
                 flex: column.flex,
+                tooltipMessage: column.tooltipMessage,
             };
         }
 
@@ -292,6 +293,7 @@ export function generateGrid(
             minWidth: column.minWidth,
             maxWidth: column.maxWidth,
             flex: column.flex,
+            tooltipMessage: column.tooltipMessage,
         };
     });
 
@@ -333,14 +335,15 @@ export function generateGrid(
         ToolbarActions,
         ToolbarFillSpace,
         ToolbarItem,
+        Tooltip,
         useBufferedRowCount,
         useDataGridRemote,
         usePersistentColumnState,
     } from "@comet/admin";
-    import { Add as AddIcon, Edit } from "@comet/admin-icons";
+    import { Add as AddIcon, Edit, Info } from "@comet/admin-icons";
     import { BlockPreviewContent } from "@comet/blocks-admin";
-    import { Alert, Button, Box, IconButton } from "@mui/material";
-    import { DataGridPro, GridRenderCellParams, GridToolbarQuickFilter } from "@mui/x-data-grid-pro";
+    import { Alert, Button, IconButton, Typography } from "@mui/material";
+    import { DataGridPro, GridColumnHeaderTitle, GridRenderCellParams, GridToolbarQuickFilter } from "@mui/x-data-grid-pro";
     import { useContentScope } from "@src/common/ContentScopeProvider";
     import {
         GQL${gqlTypePlural}GridQuery,
@@ -471,15 +474,43 @@ export function generateGrid(
         const intl = useIntl();
         const dataGridProps = { ...useDataGridRemote(), ...usePersistentColumnState("${gqlTypePlural}Grid") };
         ${hasScope ? `const { scope } = useContentScope();` : ""}
+
 
         const columns: GridColDef<GQL${fragmentName}Fragment>[] = [
             ${gridColumnFields
                 .map((column) => {
+                    const defaultMinWidth = 150;
                     const columnDefinition: TsCodeRecordToStringObject = {
                         field: `"${column.name.replace(/\./g, "_")}"`, // field-name is used for api-filter, and api nests with underscore
-                        headerName: `intl.formatMessage({ id: "${instanceGqlType}.${column.name}",  defaultMessage: "${
-                            column.headerName || camelCaseToHumanReadable(column.name)
-                        }" })`,
+                        renderHeader: column.tooltipMessage
+                            ? `() => (
+                                    <>
+                                        <GridColumnHeaderTitle label={intl.formatMessage({ id: "${instanceGqlType}.${
+                                  column.name
+                              }",   defaultMessage: "${column.headerName || camelCaseToHumanReadable(column.name)}"})} columnWidth= {${
+                                  column.width ?? defaultMinWidth
+                              }}
+                              >
+                                            {intl.formatMessage({ id: "${instanceGqlType}.${column.name}", defaultMessage: "${
+                                  column.headerName || camelCaseToHumanReadable(column.name)
+                              }" })}
+                                        </GridColumnHeaderTitle>
+                                        <Tooltip
+                                            trigger="hover"
+                                            title={<FormattedMessage id="${instanceGqlType}.${column.name}.tooltip" defaultMessage="${
+                                  column.tooltipMessage
+                              }" />}
+                                        >
+                                            <Info sx={{ margin: 1 }} />
+                                        </Tooltip>
+                                    </>
+                                )`
+                            : undefined,
+                        headerName: !column.tooltipMessage
+                            ? `intl.formatMessage({ id: "${instanceGqlType}.${column.name}", defaultMessage: "${
+                                  column.headerName || camelCaseToHumanReadable(column.name)
+                              }" })`
+                            : undefined,
                         type: column.gridType ? `"${column.gridType}"` : undefined,
                         filterable: !filterFields.includes(column.name) ? `false` : undefined,
                         sortable: !sortFields.includes(column.name) ? `false` : undefined,
@@ -491,7 +522,6 @@ export function generateGrid(
                     };
 
                     if (typeof column.width === "undefined") {
-                        const defaultMinWidth = 150;
                         columnDefinition.flex = 1;
                         columnDefinition.maxWidth = column.maxWidth;
 

packages/admin/cms-admin/src/generator/future/generator.ts

@@ -65,7 +65,8 @@ export type GridColumnConfig<T> = (
     | { type: "dateTime" }
     | { type: "staticSelect"; values?: string[] }
     | { type: "block"; block: ImportReference }
-) & { name: UsableFields<T> } & DataGridSettings;
+) & { name: UsableFields<T>; tooltipMessage?: string } & DataGridSettings;
+
 export type GridConfig<T extends { __typename?: string }> = {
     type: "grid";
     gqlType: T["__typename"];