adapt review comments

apps/react-starter/src/hooks/demoMessage.ts

@@ -6,6 +6,7 @@
  * This source code is licensed under the MIT license found in the
  * LICENSE file in the root directory of this source tree.
  */
+
 import { showMessage } from "@siemens/ix";
 import { iconInfo } from "@siemens/ix-icons/icons";
 import { useCallback } from "react";

apps/react-starter/src/hooks/mediaQuery.ts

@@ -0,0 +1,27 @@
+/*
+ * SPDX-FileCopyrightText: 2024 Siemens AG
+ *
+ * SPDX-License-Identifier: MIT
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+import { useEffect, useState } from "react";
+
+export function useMediaQuery(query: string) {
+  const [matches, setMatches] = useState(false);
+  useEffect(() => {
+    const matchQueryList = window.matchMedia(query);
+    const mediaChanged = (event: MediaQueryListEvent) => {
+      setMatches(event.matches);
+    };
+    matchQueryList.addEventListener("change", mediaChanged);
+
+    setMatches(matchQueryList.matches);
+    return () => {
+      matchQueryList.removeEventListener("change", mediaChanged);
+    };
+  }, [query]);
+  return matches;
+}

apps/react-starter/src/index.css

@@ -13,3 +13,7 @@ body {
   width: 100vw;
   height: 100vh;
 }
+
+ix-content {
+  min-width: 20rem;
+}

apps/react-starter/src/locales/de/translation.json

@@ -1,7 +1,7 @@
 {
   "analytics": "Analyse",
   "cards": "Karten",
-  "content-header": "Willkommen in unserer Demo-App!",
+  "content-header": "Hallo iX User, willkommen in unserer Demo-App!",
   "device-status": {
     "title": "Gerätestatus"
   },
@@ -49,10 +49,8 @@
     "update": "Update"
   },
   "device-details-footer": {
-    "activate": "Gerät aktivieren",
-    "deactivate": "Gerät deaktivieren",
-    "maintenance": "Wartung planen",
-    "all-details": "Siehe alle Details"
+    "set-maintenance": "Wartung starten",
+    "end-maintenance": "Wartung beenden"
   },
   "device-details": {
     "device-name": "Gerätename",
@@ -67,7 +65,7 @@
   },
   "incidents": {
     "title": "Zwischenfälle",
-    "update-now": "Aktualisieren",
+    "create-task": "Aufgabe erstellen",
     "incident-cards": {
       "device": "Gerät",
       "date": "Datum"
@@ -97,5 +95,5 @@
   "search": "Suchen",
   "demo-message": "Diese Funktion ist in der Demo-Version derzeit nicht verfügbar.",
   "cancel": "Abbrechen",
-  "okay": "Okay"
+  "okay": "OK"
 }

apps/react-starter/src/locales/en/translation.json

@@ -1,9 +1,9 @@
 {
   "analytics": "Analytics",
   "cards": "Cards",
-  "content-header": "Weclome to our demo app!",
+  "content-header": "Hello iX user, welcome to our demo app!",
   "device-status": {
-    "title": "Device Status"
+    "title": "Device status"
   },
   "devices": "Devices",
   "add-device": "Add device",
@@ -36,11 +36,11 @@
     "off": "Turn off",
     "delete": "Delete",
     "success-messages": {
-      "copy": "Device successfully copied to clipboard!",
-      "delete": "Device successfully deleted!",
-      "duplicate": "Device successfully duplicated!",
-      "cut": "Device successfully cut to clipboard!",
-      "paste": "Device successfully pasted!"
+      "copy": "Device copied to clipboard",
+      "delete": "Device deleted",
+      "duplicate": "Device duplicated",
+      "cut": "Device cut to clipboard",
+      "paste": "Device pasted"
     }
   },
   "device-details-header": {
@@ -49,10 +49,8 @@
     "update": "Update"
   },
   "device-details-footer": {
-    "activate": "Activate device",
-    "deactivate": "Deactivate device",
-    "maintenance": "Schedule maintenance",
-    "all-details": "See  all details"
+    "set-maintenance": "Start maintenance",
+    "end-maintenance": "End maintenance"
   },
   "device-details": {
     "title": "Device information",
@@ -68,7 +66,7 @@
   },
   "incidents": {
     "title": "Incidents",
-    "update-now": "Update now",
+    "create-task": "Create task",
     "incident-cards": {
       "device": "Device",
       "date": "Date"
@@ -88,15 +86,15 @@
     "schedule-maintenance": "Schedule maintenance"
   },
   "status-history": {
-    "title": "Status History"
+    "title": "Status history"
   },
   "settings": {
     "title": "Settings",
-    "user-settings": "User Settings"
+    "user-settings": "User settings"
   },
   "toggle-theme": "Toggle theme",
   "search": "Search",
   "demo-message": "This feature is currently unavailable in the demo version.",
   "cancel": "Cancel",
-  "okay": "Okay"
+  "okay": "OK"
 }

apps/react-starter/src/pages/devices/components/ag-grid-table/ag-grid-table.tsx

@@ -7,37 +7,27 @@
  * LICENSE file in the root directory of this source tree.
  */
 
-import "./styles.module.css";
-import "./styles.module.css";
-import { AgGridReact } from "ag-grid-react";
+import { useDataStore, useFilterStore, useOverviewPaneStore } from "@/store/device-store.ts";
+import { Device } from "@/types";
+import { LogicalFilterOperator } from "@siemens/ix";
 import { IxEmptyState } from "@siemens/ix-react";
-import QuickActionsCellRenderer from "./quick-actions-cell-renderet.tsx";
-import { CellClickedEvent, ColDef, ColGroupDef, IRowNode } from "ag-grid-community";
-import { useDataStore, useFilterStore, useOverviewPaneStore } from "../../../../store/device-store.ts";
-import { Device } from "../../../../types";
+import { ColDef, ColGroupDef, GridApi, IRowNode, RowSelectedEvent } from "ag-grid-community";
+import { AgGridReact } from "ag-grid-react";
 import { useCallback, useEffect, useRef, useState } from "react";
-import { LogicalFilterOperator } from "@siemens/ix";
-import CustomDeviceCellRenderer from "./device-cell-renderer.tsx";
 import { useTranslation } from "react-i18next";
-import DeviceNameCellRenderer from "./device-name-cell-renderer.tsx";
+import CustomDeviceCellRenderer from "./device-cell-renderer.tsx";
+import QuickActionsCellRenderer from "./quick-actions-cell-renderer.tsx";
+import "./styles.module.css";
 
 function AgGridTable() {
   const { t } = useTranslation();
+  const [gridApi, setGridApi] = useState<GridApi | null>(null);
   const gridRef = useRef<AgGridReact<Device>>(null);
-  const { setExpanded, setSelectedData } = useOverviewPaneStore();
+  const { setExpanded, setSelectedDeviceId, selectedDataId } = useOverviewPaneStore();
   const { filter, resetFilter } = useFilterStore();
   const [showEmptyState, setShowEmptyState] = useState(false);
   const { devices, editDevice } = useDataStore();
 
-  function onCellClick(event: CellClickedEvent<Device, string>) {
-    if (event.column.getColId() === "quickActions") {
-      return;
-    }
-
-    setSelectedData(event.data!);
-    setExpanded(true);
-  }
-
   function getColumnDefs() {
     if (devices.length === 0) {
       return [];
@@ -50,7 +40,6 @@ function AgGridTable() {
         editable: true,
         flex: 2,
         minWidth: 150,
-        cellRenderer: DeviceNameCellRenderer,
       },
       {
         field: "status",
@@ -118,32 +107,56 @@ function AgGridTable() {
     }
   }, [filter]);
 
-  return devices && !showEmptyState ? (
+  useEffect(() => {
+    if (gridApi) {
+      gridApi.forEachNode((node) => {
+        node.setSelected(selectedDataId === node.data.id);
+      });
+    }
+  }, [gridApi, selectedDataId, devices]);
+
+  const onRowSelected = useCallback(
+    (rowSelection: RowSelectedEvent) => {
+      const { event } = rowSelection;
+      if (event) {
+        setSelectedDeviceId(rowSelection.data.id);
+        setExpanded(true);
+      }
+    },
+    [setExpanded, setSelectedDeviceId],
+  );
+
+  if (showEmptyState) {
+    return (
+      <div className="flex-grow-1 d-flex justify-content-center align-items-center">
+        <IxEmptyState
+          header="No devices found"
+          subHeader="Please remove search terms or add a new device"
+          icon="project"
+          action="Reset Filter"
+          onActionClick={() => resetFilter()}
+        ></IxEmptyState>
+      </div>
+    );
+  }
+
+  return (
     <div className="flex-grow-1">
       <AgGridReact
         ref={gridRef}
+        onGridReady={(event) => setGridApi(event.api)}
         columnDefs={getColumnDefs() as ColDef[] | ColGroupDef[]}
         suppressRowTransform={true}
         suppressCellFocus={true}
         rowSelection={"single"}
         rowData={devices}
         className="ag-theme-alpine-dark ag-theme-ix"
-        onCellClicked={(e) => onCellClick(e)}
+        onRowSelected={onRowSelected}
         onCellValueChanged={(e) => editDevice(e.data)}
         isExternalFilterPresent={isExternalFilterPresent}
         doesExternalFilterPass={(e) => doesExternalFilterPass(e as IRowNode<Device>)}
       />
     </div>
-  ) : (
-    <div className="flex-grow-1 d-flex justify-content-center align-items-center">
-      <IxEmptyState
-        header="No devices found"
-        subHeader="Please remove search terms or add a new device"
-        icon="project"
-        action="Reset Filter"
-        onActionClick={() => resetFilter()}
-      ></IxEmptyState>
-    </div>
   );
 }
 

apps/react-starter/src/pages/devices/components/ag-grid-table/device-cell-renderer.tsx

@@ -7,12 +7,12 @@
  * LICENSE file in the root directory of this source tree.
  */
 
-import styles from "./styles.module.css";
+import { iconError, iconInfo, iconMaintenanceWarning, iconSuccess } from "@siemens/ix-icons/icons";
 import { IxIcon, IxRow, IxTypography } from "@siemens/ix-react";
 import { ICellRendererParams } from "ag-grid-community";
-import { RefObject } from "react";
 import { AgGridReact } from "ag-grid-react";
-import { iconAlarm, iconMaintenance, iconSingleCheck, iconWarning } from "@siemens/ix-icons/icons";
+import { RefObject } from "react";
+import styles from "./styles.module.css";
 
 type CustomDeviceCellRendererProps = ICellRendererParams & {
   gridRef: RefObject<AgGridReact>;
@@ -22,13 +22,13 @@ const CustomDeviceCellRenderer = (props: CustomDeviceCellRendererProps) => {
   return (
     <IxRow className={styles.DeviceRow}>
       {props.data.status === "Online" ? (
-        <IxIcon name={iconSingleCheck} color="color-success" />
+        <IxIcon name={iconSuccess} color="color-success" />
       ) : props.data.status === "Offline" ? (
-        <IxIcon name={iconAlarm} color="color-alarm" />
+        <IxIcon name={iconInfo} />
       ) : props.data.status === "Maintenance" ? (
-        <IxIcon name={iconMaintenance} color="color-warning" />
+        <IxIcon name={iconMaintenanceWarning} color="color-warning" />
       ) : (
-        <IxIcon name={iconWarning} color="color-alarm" />
+        <IxIcon name={iconError} color="color-alarm" />
       )}
       <IxTypography className={styles.DeviceName}>{props.data.status}</IxTypography>
     </IxRow>

apps/react-starter/src/pages/devices/components/ag-grid-table/styles.module.css

@@ -29,22 +29,11 @@ ix-empty-state {
 
 .IxRow {
   display: flex;
-  justify-content: end;
+  justify-content: flex-start;
   height: 100%;
   align-items: center;
 }
 
-div[role="gridcell"][col-id="quickActions"]:not(ix-tooltip) {
-  &:hover {
-    opacity: 100%;
-  }
-}
-
-div[role="gridcell"][col-id="deviceName"] {
-  padding: 0;
-  border: 0;
-}
-
 .DeviceCell {
   display: flex;
   align-items: center;
@@ -57,19 +46,3 @@ div[role="gridcell"][col-id="deviceName"] {
   width: 0.4rem;
   height: 100%;
 }
-
-.online {
-  background-color: var(--theme-color-success);
-}
-
-.error {
-  background-color: var(--theme-color-alarm);
-}
-
-.maintenance {
-  background-color: var(--theme-color-warning);
-}
-
-.offline {
-  background-color: var(--theme-color-alarm);
-}