From 02ceb7faa7493c20e6a9d2c0f40e5d5bd44695e0 Mon Sep 17 00:00:00 2001
From: Tom Herold <tom.herold@scalableminds.com>
Date: Thu, 3 Jul 2025 14:55:12 +0200
Subject: [PATCH 1/7] Refactored several React class components as functional
 components

---
 .../components/disable_generic_dnd.ts         |  30 ++--
 .../components/fixed_expandable_table.tsx     | 130 ++++++++--------
 .../components/highlightable_row.tsx          |  41 +++--
 frontend/javascripts/components/loop.ts       |  29 ++--
 .../components/select_experience_domain.tsx   | 140 ++++++++----------
 .../components/text_with_description.tsx      | 117 +++++++--------
 .../javascripts/libs/shortcut_component.ts    |  27 ++--
 7 files changed, 236 insertions(+), 278 deletions(-)

diff --git a/frontend/javascripts/components/disable_generic_dnd.ts b/frontend/javascripts/components/disable_generic_dnd.ts
index 9d3f618a4b6..6647d82f64c 100644
--- a/frontend/javascripts/components/disable_generic_dnd.ts
+++ b/frontend/javascripts/components/disable_generic_dnd.ts
@@ -1,22 +1,20 @@
 import window from "libs/window";
 import React from "react";
-import type { EmptyObject } from "types/globals";
-export default class DisableGenericDnd extends React.Component<EmptyObject> {
-  componentDidMount() {
-    window.addEventListener("dragover", this.preventDefault, false);
-    window.addEventListener("drop", this.preventDefault, false);
-  }
 
-  componentWillUnmount() {
-    window.removeEventListener("dragover", this.preventDefault);
-    window.removeEventListener("drop", this.preventDefault);
-  }
+const preventDefault = (e: Event) => {
+  e.preventDefault();
+};
 
-  preventDefault = (e: Event) => {
-    e.preventDefault();
-  };
+export default function DisableGenericDnd() {
+  React.useEffect(() => {
+    window.addEventListener("dragover", preventDefault, false);
+    window.addEventListener("drop", preventDefault, false);
 
-  render() {
-    return null;
-  }
+    return () => {
+      window.removeEventListener("dragover", preventDefault);
+      window.removeEventListener("drop", preventDefault);
+    };
+  }, []);
+
+  return null;
 }
diff --git a/frontend/javascripts/components/fixed_expandable_table.tsx b/frontend/javascripts/components/fixed_expandable_table.tsx
index 372013692f7..1189fa8a595 100644
--- a/frontend/javascripts/components/fixed_expandable_table.tsx
+++ b/frontend/javascripts/components/fixed_expandable_table.tsx
@@ -1,11 +1,7 @@
 import { Button, Table, type TableProps } from "antd";
 import type { ColumnsType, GetRowKey } from "antd/lib/table/interface";
-import React from "react";
+import React, { useEffect } from "react";
 
-type State = {
-  expandedRows: Array<string>;
-  className?: string;
-};
 /** This is a wrapper for large tables that have fixed columns and support expanded rows.
  *  This wrapper ensures that when rows are expanded no column is fixed as this creates rendering bugs.
  *  If you are using this wrapper, you do not need to set the class "large-table"
@@ -17,72 +13,70 @@ type OwnTableProps<RecordType = any> = TableProps<RecordType> & {
   columns: ColumnsType<RecordType>;
 };
 
-const EMPTY_ARRAY: string[] = [] as const;
+const EMPTY_ARRAY: readonly string[] = [] as const;
 
-export default class FixedExpandableTable extends React.PureComponent<OwnTableProps, State> {
-  state: State = {
-    expandedRows: EMPTY_ARRAY,
-  };
+const getAllRowIds = (
+  dataSource: readonly any[] | undefined,
+  rowKey: string | number | symbol | GetRowKey<any> | undefined,
+) => {
+  const canUseRowKey = typeof rowKey === "string";
+  return dataSource != null && canUseRowKey ? dataSource.map((row) => row[rowKey]) : [];
+};
 
-  getAllRowIds(
-    dataSource: readonly any[] | undefined,
-    rowKey: string | number | symbol | GetRowKey<any> | undefined,
-  ) {
-    const canUseRowKey = typeof rowKey === "string";
-    return dataSource != null && canUseRowKey ? dataSource.map((row) => row[rowKey]) : [];
-  }
+export default function FixedExpandableTable<RecordType>({
+  className,
+  expandable,
+  dataSource,
+  rowKey,
+  columns,
+  ...restProps
+}: OwnTableProps<RecordType>) {
+  const [expandedRows, setExpandedRows] = React.useState(EMPTY_ARRAY);
 
-  componentDidUpdate(prevProps: Readonly<TableProps<any>>): void {
-    if (prevProps.dataSource !== this.props.dataSource) {
-      this.setState({ expandedRows: EMPTY_ARRAY });
-    }
-  }
+  // biome-ignore lint/correctness/useExhaustiveDependencies: Collapse all rows when source changes
+  useEffect(() => {
+    setExpandedRows(EMPTY_ARRAY);
+  }, [dataSource]);
 
-  render() {
-    const { expandedRows } = this.state;
-    const { className, expandable, ...restProps } = this.props;
-    const { dataSource, rowKey } = this.props;
-    const areAllRowsExpanded =
-      dataSource != null && this.state.expandedRows.length === dataSource?.length;
+  const areAllRowsExpanded = dataSource != null && expandedRows.length === dataSource?.length;
 
-    const columnTitleCollapsed = (
-      <Button
-        className="ant-table-row-expand-icon ant-table-row-expand-icon-collapsed"
-        title="Expand all rows"
-        onClick={() => this.setState({ expandedRows: this.getAllRowIds(dataSource, rowKey) })}
-      />
-    );
-    const columnTitleExpanded = (
-      <Button
-        className="ant-table-row-expand-icon ant-table-row-expand-icon-expanded"
-        title="Collapse all rows"
-        onClick={() => this.setState({ expandedRows: EMPTY_ARRAY })}
-      />
-    );
-    const columnsWithAdjustedFixedProp: TableProps["columns"] = this.props.columns.map((column) => {
-      const columnFixed = expandedRows.length > 0 ? false : column.fixed;
-      return { ...column, fixed: columnFixed };
-    });
-    const expandableProp = {
-      ...expandable,
-      expandedRowKeys: expandedRows,
-      onExpandedRowsChange: (selectedRows: readonly React.Key[]) => {
-        this.setState({
-          expandedRows: selectedRows as string[],
-        });
-      },
-      columnTitle: areAllRowsExpanded ? columnTitleExpanded : columnTitleCollapsed,
-    };
-    return (
-      <Table
-        {...restProps}
-        expandable={expandableProp}
-        scroll={{
-          x: "max-content",
-        }}
-        className={`large-table ${className}`}
-        columns={columnsWithAdjustedFixedProp}
-      />
-    );
-  }
+  const columnTitleCollapsed = (
+    <Button
+      className="ant-table-row-expand-icon ant-table-row-expand-icon-collapsed"
+      title="Expand all rows"
+      onClick={() => setExpandedRows(getAllRowIds(dataSource, rowKey))}
+    />
+  );
+  const columnTitleExpanded = (
+    <Button
+      className="ant-table-row-expand-icon ant-table-row-expand-icon-expanded"
+      title="Collapse all rows"
+      onClick={() => setExpandedRows(EMPTY_ARRAY)}
+    />
+  );
+  const columnsWithAdjustedFixedProp = columns.map((column) => {
+    const columnFixed = expandedRows.length > 0 ? false : column.fixed;
+    return { ...column, fixed: columnFixed };
+  });
+  const expandableProp = {
+    ...expandable,
+    expandedRowKeys: expandedRows,
+    onExpandedRowsChange: (selectedRows: readonly React.Key[]) => {
+      setExpandedRows(selectedRows as string[]);
+    },
+    columnTitle: areAllRowsExpanded ? columnTitleExpanded : columnTitleCollapsed,
+  };
+  return (
+    <Table
+      {...restProps}
+      dataSource={dataSource}
+      rowKey={rowKey}
+      expandable={expandableProp}
+      scroll={{
+        x: "max-content",
+      }}
+      className={`large-table ${className}`}
+      columns={columnsWithAdjustedFixedProp}
+    />
+  );
 }
diff --git a/frontend/javascripts/components/highlightable_row.tsx b/frontend/javascripts/components/highlightable_row.tsx
index 8a95976fcc0..cc23b497dfc 100644
--- a/frontend/javascripts/components/highlightable_row.tsx
+++ b/frontend/javascripts/components/highlightable_row.tsx
@@ -1,33 +1,28 @@
-import * as React from "react";
+import type React from "react";
+import { useState } from "react";
+
 type Props = {
   shouldHighlight: boolean;
   children: React.ReactNode;
   style?: Record<string, any>;
 };
-type State = {
-  persistedShouldHighlight: boolean;
-}; // This component is able to highlight a newly rendered row.
+
+// This component is able to highlight a newly rendered row.
 // Internally, it persists the initially passed props, since that
 // prop can change faster than the animation is executed. Not saving
 // the initial prop, would abort the animation too early.
+export default function HighlightableRow({ shouldHighlight, style, ...restProps }: Props) {
+  const [persistedShouldHighlight] = useState(shouldHighlight);
 
-export default class HighlightableRow extends React.PureComponent<Props, State> {
-  state: State = {
-    persistedShouldHighlight: this.props.shouldHighlight,
-  };
-
-  render() {
-    const { shouldHighlight, style, ...restProps } = this.props;
-    return (
-      <tr
-        {...restProps}
-        style={{
-          ...style,
-          animation: this.state.persistedShouldHighlight ? "highlight-background 2.0s ease" : "",
-        }}
-      >
-        {this.props.children}
-      </tr>
-    );
-  }
+  return (
+    <tr
+      {...restProps}
+      style={{
+        ...style,
+        animation: persistedShouldHighlight ? "highlight-background 2.0s ease" : "",
+      }}
+    >
+      {restProps.children}
+    </tr>
+  );
 }
diff --git a/frontend/javascripts/components/loop.ts b/frontend/javascripts/components/loop.ts
index a529c21a589..eeb65b38af6 100644
--- a/frontend/javascripts/components/loop.ts
+++ b/frontend/javascripts/components/loop.ts
@@ -1,28 +1,19 @@
 import window from "libs/window";
-import { Component } from "react";
-import type { EmptyObject } from "types/globals";
+import { useEffect } from "react";
+
 type LoopProps = {
   interval: number;
   onTick: (...args: Array<any>) => any;
 };
 
-class Loop extends Component<LoopProps, EmptyObject> {
-  intervalId: number | null | undefined = null;
-
-  componentDidMount() {
-    this.intervalId = window.setInterval(this.props.onTick, this.props.interval);
-  }
+export default function Loop({ interval, onTick }: LoopProps) {
+  useEffect(() => {
+    const intervalId = window.setInterval(onTick, interval);
 
-  componentWillUnmount() {
-    if (this.intervalId != null) {
-      window.clearInterval(this.intervalId);
-      this.intervalId = null;
-    }
-  }
+    return () => {
+      window.clearInterval(intervalId);
+    };
+  }, [interval, onTick]);
 
-  render() {
-    return null;
-  }
+  return null;
 }
-
-export default Loop;
diff --git a/frontend/javascripts/components/select_experience_domain.tsx b/frontend/javascripts/components/select_experience_domain.tsx
index 2f8db125bb5..da11e41288c 100644
--- a/frontend/javascripts/components/select_experience_domain.tsx
+++ b/frontend/javascripts/components/select_experience_domain.tsx
@@ -2,6 +2,7 @@ import { getExistingExperienceDomains } from "admin/rest_api";
 import { Select, Tooltip } from "antd";
 import * as React from "react";
 import type { ExperienceDomainList } from "types/api_types";
+
 type Props = {
   value?: string | Array<string>;
   width: number;
@@ -13,90 +14,77 @@ type Props = {
   allowCreation: boolean;
   alreadyUsedDomains: ExperienceDomainList;
 };
-type State = {
-  domains: ExperienceDomainList;
-  currentlyEnteredDomain: string;
-};
-
-class SelectExperienceDomain extends React.PureComponent<Props, State> {
-  static defaultProps = {
-    alreadyUsedDomains: [],
-    allowCreation: false,
-  };
 
-  state = {
-    domains: [],
-    currentlyEnteredDomain: "",
-  };
-
-  componentDidMount() {
-    this.fetchData();
-  }
+const SelectExperienceDomain: React.FC<Props> = ({
+  value,
+  notFoundContent,
+  width,
+  disabled,
+  placeholder,
+  onSelect,
+  onChange,
+  allowCreation,
+  alreadyUsedDomains,
+}) => {
+  const [domains, setDomains] = React.useState<ExperienceDomainList>([]);
+  const [currentlyEnteredDomain, setCurrentlyEnteredDomain] = React.useState("");
 
-  async fetchData() {
-    this.setState({
-      domains: await getExistingExperienceDomains(),
-    });
-  }
+  React.useEffect(() => {
+    const fetchData = async () => {
+      const existingDomains = await getExistingExperienceDomains();
+      setDomains(existingDomains);
+    };
+    void fetchData();
+  }, []);
 
-  getUnusedDomains(): ExperienceDomainList {
-    return this.state.domains.filter((domain) => !this.props.alreadyUsedDomains.includes(domain));
-  }
+  const getUnusedDomains = (): ExperienceDomainList => {
+    return domains.filter((domain) => !alreadyUsedDomains.includes(domain));
+  };
 
-  onSearch = (domain: string) => {
-    this.setState({
-      currentlyEnteredDomain: domain,
-    });
+  const onSearch = (domain: string) => {
+    setCurrentlyEnteredDomain(domain);
   };
 
-  render() {
-    const {
-      value,
-      notFoundContent,
-      width,
-      disabled,
-      placeholder,
-      onSelect,
-      onChange,
-      allowCreation,
-    } = this.props;
-    const { currentlyEnteredDomain } = this.state;
-    let options = this.getUnusedDomains();
+  let options = getUnusedDomains();
 
-    if (
-      allowCreation &&
-      !options.includes(currentlyEnteredDomain) &&
-      currentlyEnteredDomain.trim() !== ""
-    ) {
-      options = [...options, currentlyEnteredDomain];
-    }
+  if (
+    allowCreation &&
+    !options.includes(currentlyEnteredDomain) &&
+    currentlyEnteredDomain.trim() !== ""
+  ) {
+    options = [...options, currentlyEnteredDomain];
+  }
 
-    return (
-      <Tooltip
-        placement="top"
-        title="Select an existing experience domain or create a new one by typing its name in this input field."
+  return (
+    <Tooltip
+      placement="top"
+      title="Select an existing experience domain or create a new one by typing its name in this input field."
+    >
+      <Select
+        showSearch
+        value={value}
+        optionFilterProp="children"
+        notFoundContent={notFoundContent}
+        style={{
+          width: `${width}%`,
+        }}
+        disabled={disabled}
+        placeholder={placeholder}
+        onSelect={onSelect}
+        onChange={onChange}
+        onSearch={onSearch}
       >
-        <Select
-          showSearch
-          value={value}
-          optionFilterProp="children"
-          notFoundContent={notFoundContent}
-          style={{
-            width: `${width}%`,
-          }}
-          disabled={disabled}
-          placeholder={placeholder}
-          onSelect={onSelect}
-          onChange={onChange}
-          onSearch={this.onSearch}
-        >
-          {options.map((domain) => (
-            <Select.Option key={domain}>{domain}</Select.Option>
-          ))}
-        </Select>
-      </Tooltip>
-    );
-  }
-}
+        {options.map((domain) => (
+          <Select.Option key={domain}>{domain}</Select.Option>
+        ))}
+      </Select>
+    </Tooltip>
+  );
+};
+
+SelectExperienceDomain.defaultProps = {
+  alreadyUsedDomains: [],
+  allowCreation: false,
+};
 
 export default SelectExperienceDomain;
diff --git a/frontend/javascripts/components/text_with_description.tsx b/frontend/javascripts/components/text_with_description.tsx
index 1abe4e8166d..7b559b1bb7e 100644
--- a/frontend/javascripts/components/text_with_description.tsx
+++ b/frontend/javascripts/components/text_with_description.tsx
@@ -1,6 +1,6 @@
 import { Popover, Tooltip } from "antd";
 import Markdown from "libs/markdown_adapter";
-import * as React from "react";
+import type React from "react";
 import type { EditableTextLabelProp } from "viewer/view/components/editable_text_label";
 import EditableTextLabel from "viewer/view/components/editable_text_label";
 
@@ -16,69 +16,66 @@ type NonEditableProps = {
 };
 type Props = EditableProps | NonEditableProps;
 
-class TextWithDescription extends React.PureComponent<Props> {
-  render() {
-    const { isEditable, description, ...editableProps } = this.props;
-    const hasDescription = description !== "";
-    const markdownDescription = (
-      <div
-        style={{
-          maxWidth: 400,
-        }}
-      >
-        <Markdown>{description}</Markdown>
-      </div>
-    );
-    return (
+const TextWithDescription: React.FC<Props> = (props) => {
+  const { isEditable, description, ...editableProps } = props;
+  const hasDescription = description !== "";
+  const markdownDescription = (
+    <div
+      style={{
+        maxWidth: 400,
+      }}
+    >
+      <Markdown>{description}</Markdown>
+    </div>
+  );
+  return (
+    <span
+      className={hasDescription ? "flex-container" : ""}
+      style={{
+        alignItems: "center",
+      }}
+    >
       <span
-        className={hasDescription ? "flex-container" : ""}
+        className={hasDescription ? "flex-item" : ""}
         style={{
-          alignItems: "center",
+          flexGrow: 0,
         }}
       >
-        <span
-          className={hasDescription ? "flex-item" : ""}
-          style={{
-            flexGrow: 0,
-          }}
-        >
-          {hasDescription ? (
-            <Tooltip title="Show description" placement="bottom">
-              <Popover title="Description" trigger="click" content={markdownDescription}>
-                <i
-                  className="fas fa-align-justify"
-                  style={{
-                    cursor: "pointer",
-                  }}
-                />
-              </Popover>
-            </Tooltip>
-          ) : null}
-        </span>
-        <span className={hasDescription ? "flex-item" : undefined}>
-          {isEditable ? (
-            // @ts-expect-error ts-migrate(2769) FIXME: No overload matches this call.
-            <EditableTextLabel {...editableProps} />
-          ) : (
-            <span
-              style={{
-                margin: "0 10px",
-                display: "inline-block",
-              }}
-            >
-              {this.props.markdown ? (
-                <span>
-                  <Markdown>{this.props.value}</Markdown>
-                </span>
-              ) : (
-                this.props.value
-              )}
-            </span>
-          )}
-        </span>
+        {hasDescription ? (
+          <Tooltip title="Show description" placement="bottom">
+            <Popover title="Description" trigger="click" content={markdownDescription}>
+              <i
+                className="fas fa-align-justify"
+                style={{
+                  cursor: "pointer",
+                }}
+              />
+            </Popover>
+          </Tooltip>
+        ) : null}
       </span>
-    );
-  }
-}
+      <span className={hasDescription ? "flex-item" : undefined}>
+        {isEditable ? (
+          <EditableTextLabel {...(editableProps as EditableTextLabelProp)} />
+        ) : (
+          <span
+            style={{
+              margin: "0 10px",
+              display: "inline-block",
+            }}
+          >
+            {(props as NonEditableProps).markdown ? (
+              <span>
+                <Markdown>{(props as NonEditableProps).value}</Markdown>
+              </span>
+            ) : (
+              (props as NonEditableProps).value
+            )}
+          </span>
+        )}
+      </span>
+    </span>
+  );
+};
 
 export default TextWithDescription;
diff --git a/frontend/javascripts/libs/shortcut_component.ts b/frontend/javascripts/libs/shortcut_component.ts
index 6d9ff1add0f..2c367e15749 100644
--- a/frontend/javascripts/libs/shortcut_component.ts
+++ b/frontend/javascripts/libs/shortcut_component.ts
@@ -1,5 +1,5 @@
 import { InputKeyboard, InputKeyboardNoLoop } from "libs/input";
-import * as React from "react";
+import { useEffect } from "react";
 // This component provides a lightweight wrapper around the input library.
 // It leverages reacts lifecycle hooks to allow rendering-sensitive activation of shortcuts.
 type Props = {
@@ -8,26 +8,21 @@ type Props = {
   supportLoop?: boolean;
   supportInputElements?: boolean;
 };
-export default class Shortcut extends React.Component<Props> {
-  // @ts-expect-error ts-migrate(2564) FIXME: Property 'keyboardNoLoop' has no initializer and i... Remove this comment to see the full error message
-  keyboardNoLoop: InputKeyboardNoLoop | InputKeyboard;
-
-  componentDidMount() {
-    this.keyboardNoLoop = new (this.props.supportLoop ? InputKeyboard : InputKeyboardNoLoop)(
+export default function Shortcut(props: Props) {
+  useEffect(() => {
+    const keyboard = new (props.supportLoop ? InputKeyboard : InputKeyboardNoLoop)(
       {
-        [this.props.keys]: this.props.onTrigger,
+        [props.keys]: props.onTrigger,
       },
       {
-        supportInputElements: this.props.supportInputElements,
+        supportInputElements: props.supportInputElements,
       },
     );
-  }
 
-  componentWillUnmount() {
-    this.keyboardNoLoop.destroy();
-  }
+    return () => {
+      keyboard.destroy();
+    };
+  }, [props.keys, props.onTrigger, props.supportLoop, props.supportInputElements]);
 
-  render() {
-    return null;
-  }
+  return null;
 }

From e880401c7ffdbaf75d59c4c5119c0e7f2ec3e560 Mon Sep 17 00:00:00 2001
From: Tom Herold <tom.herold@scalableminds.com>
Date: Thu, 3 Jul 2025 15:21:45 +0200
Subject: [PATCH 2/7] apply coderabbit feedback

---
 frontend/javascripts/components/select_experience_domain.tsx | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/frontend/javascripts/components/select_experience_domain.tsx b/frontend/javascripts/components/select_experience_domain.tsx
index da11e41288c..76e63d8cc3f 100644
--- a/frontend/javascripts/components/select_experience_domain.tsx
+++ b/frontend/javascripts/components/select_experience_domain.tsx
@@ -12,7 +12,7 @@ type Props = {
   onSelect?: (arg0: string) => void;
   onChange?: () => void;
   allowCreation: boolean;
-  alreadyUsedDomains: ExperienceDomainList;
+  alreadyUsedDomains?: ExperienceDomainList;
 };
 
 const SelectExperienceDomain: React.FC<Props> = ({
@@ -24,7 +24,7 @@ const SelectExperienceDomain: React.FC<Props> = ({
   onSelect,
   onChange,
   allowCreation,
-  alreadyUsedDomains,
+  alreadyUsedDomains = [],
 }) => {
   const [domains, setDomains] = React.useState<ExperienceDomainList>([]);
   const [currentlyEnteredDomain, setCurrentlyEnteredDomain] = React.useState("");

From 578e0cd8edb3d1e44e431b8c957bab61571bb675 Mon Sep 17 00:00:00 2001
From: Tom Herold <tom.herold@scalableminds.com>
Date: Wed, 9 Jul 2025 14:57:58 +0200
Subject: [PATCH 3/7] Update
 frontend/javascripts/components/fixed_expandable_table.tsx

Co-authored-by: MichaelBuessemeyer <39529669+MichaelBuessemeyer@users.noreply.github.com>
---
 frontend/javascripts/components/fixed_expandable_table.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/frontend/javascripts/components/fixed_expandable_table.tsx b/frontend/javascripts/components/fixed_expandable_table.tsx
index 1189fa8a595..04038930d7a 100644
--- a/frontend/javascripts/components/fixed_expandable_table.tsx
+++ b/frontend/javascripts/components/fixed_expandable_table.tsx
@@ -31,7 +31,7 @@ export default function FixedExpandableTable<RecordType>({
   columns,
   ...restProps
 }: OwnTableProps<RecordType>) {
-  const [expandedRows, setExpandedRows] = React.useState(EMPTY_ARRAY);
+  const [expandedRows, setExpandedRows] = useState<React.Key>(EMPTY_ARRAY);
 
   // biome-ignore lint/correctness/useExhaustiveDependencies: Collapse all rows when source changes
   useEffect(() => {

From c450bc360489acab0afdec84d6d26fd969bd6301 Mon Sep 17 00:00:00 2001
From: Tom Herold <tom.herold@scalableminds.com>
Date: Wed, 9 Jul 2025 14:58:03 +0200
Subject: [PATCH 4/7] Update
 frontend/javascripts/components/fixed_expandable_table.tsx

Co-authored-by: MichaelBuessemeyer <39529669+MichaelBuessemeyer@users.noreply.github.com>
---
 frontend/javascripts/components/fixed_expandable_table.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/frontend/javascripts/components/fixed_expandable_table.tsx b/frontend/javascripts/components/fixed_expandable_table.tsx
index 04038930d7a..a9242ec3622 100644
--- a/frontend/javascripts/components/fixed_expandable_table.tsx
+++ b/frontend/javascripts/components/fixed_expandable_table.tsx
@@ -62,7 +62,7 @@ export default function FixedExpandableTable<RecordType>({
     ...expandable,
     expandedRowKeys: expandedRows,
     onExpandedRowsChange: (selectedRows: readonly React.Key[]) => {
-      setExpandedRows(selectedRows as string[]);
+      setExpandedRows(selectedRows);
     },
     columnTitle: areAllRowsExpanded ? columnTitleExpanded : columnTitleCollapsed,
   };

From f583e5ac15e28356a5c7cedf16f342ba631933e8 Mon Sep 17 00:00:00 2001
From: Tom Herold <tom.herold@scalableminds.com>
Date: Wed, 9 Jul 2025 15:07:14 +0200
Subject: [PATCH 5/7] apply PR feedback

---
 .../components/fixed_expandable_table.tsx      | 14 ++++++++------
 .../components/select_experience_domain.tsx    | 18 +++++++-----------
 2 files changed, 15 insertions(+), 17 deletions(-)

diff --git a/frontend/javascripts/components/fixed_expandable_table.tsx b/frontend/javascripts/components/fixed_expandable_table.tsx
index a9242ec3622..2093e7f53d3 100644
--- a/frontend/javascripts/components/fixed_expandable_table.tsx
+++ b/frontend/javascripts/components/fixed_expandable_table.tsx
@@ -1,6 +1,7 @@
 import { Button, Table, type TableProps } from "antd";
-import type { ColumnsType, GetRowKey } from "antd/lib/table/interface";
-import React, { useEffect } from "react";
+import type { ColumnsType, ExpandableConfig, GetRowKey } from "antd/lib/table/interface";
+import type React from "react";
+import { useEffect, useState } from "react";
 
 /** This is a wrapper for large tables that have fixed columns and support expanded rows.
  *  This wrapper ensures that when rows are expanded no column is fixed as this creates rendering bugs.
@@ -13,7 +14,7 @@ type OwnTableProps<RecordType = any> = TableProps<RecordType> & {
   columns: ColumnsType<RecordType>;
 };
 
-const EMPTY_ARRAY: readonly string[] = [] as const;
+const EMPTY_ARRAY: React.Key[] = [] as const;
 
 const getAllRowIds = (
   dataSource: readonly any[] | undefined,
@@ -31,7 +32,7 @@ export default function FixedExpandableTable<RecordType>({
   columns,
   ...restProps
 }: OwnTableProps<RecordType>) {
-  const [expandedRows, setExpandedRows] = useState<React.Key>(EMPTY_ARRAY);
+  const [expandedRows, setExpandedRows] = useState<React.Key[]>(EMPTY_ARRAY);
 
   // biome-ignore lint/correctness/useExhaustiveDependencies: Collapse all rows when source changes
   useEffect(() => {
@@ -58,14 +59,15 @@ export default function FixedExpandableTable<RecordType>({
     const columnFixed = expandedRows.length > 0 ? false : column.fixed;
     return { ...column, fixed: columnFixed };
   });
-  const expandableProp = {
+  const expandableProp: ExpandableConfig<RecordType> = {
     ...expandable,
     expandedRowKeys: expandedRows,
     onExpandedRowsChange: (selectedRows: readonly React.Key[]) => {
-      setExpandedRows(selectedRows);
+      setExpandedRows(selectedRows as React.Key[]);
     },
     columnTitle: areAllRowsExpanded ? columnTitleExpanded : columnTitleCollapsed,
   };
+
   return (
     <Table
       {...restProps}
diff --git a/frontend/javascripts/components/select_experience_domain.tsx b/frontend/javascripts/components/select_experience_domain.tsx
index 76e63d8cc3f..1a578ffba11 100644
--- a/frontend/javascripts/components/select_experience_domain.tsx
+++ b/frontend/javascripts/components/select_experience_domain.tsx
@@ -1,6 +1,7 @@
 import { getExistingExperienceDomains } from "admin/rest_api";
 import { Select, Tooltip } from "antd";
-import * as React from "react";
+import type React from "react";
+import { useState, useEffect } from "react";
 import type { ExperienceDomainList } from "types/api_types";
 
 type Props = {
@@ -11,7 +12,7 @@ type Props = {
   disabled: boolean;
   onSelect?: (arg0: string) => void;
   onChange?: () => void;
-  allowCreation: boolean;
+  allowCreation?: boolean;
   alreadyUsedDomains?: ExperienceDomainList;
 };
 
@@ -23,13 +24,13 @@ const SelectExperienceDomain: React.FC<Props> = ({
   placeholder,
   onSelect,
   onChange,
-  allowCreation,
+  allowCreation = false,
   alreadyUsedDomains = [],
 }) => {
-  const [domains, setDomains] = React.useState<ExperienceDomainList>([]);
-  const [currentlyEnteredDomain, setCurrentlyEnteredDomain] = React.useState("");
+  const [domains, setDomains] = useState<ExperienceDomainList>([]);
+  const [currentlyEnteredDomain, setCurrentlyEnteredDomain] = useState("");
 
-  React.useEffect(() => {
+  useEffect(() => {
     const fetchData = async () => {
       const existingDomains = await getExistingExperienceDomains();
       setDomains(existingDomains);
@@ -82,9 +83,4 @@ const SelectExperienceDomain: React.FC<Props> = ({
   );
 };
 
-SelectExperienceDomain.defaultProps = {
-  alreadyUsedDomains: [],
-  allowCreation: false,
-};
-
 export default SelectExperienceDomain;

From 98267766fba55625292601986419de4c72bbf66c Mon Sep 17 00:00:00 2001
From: Tom Herold <tom.herold@scalableminds.com>
Date: Wed, 9 Jul 2025 15:27:17 +0200
Subject: [PATCH 6/7] replace useFetch with useQuery

---
 .../components/select_experience_domain.tsx      | 16 ++++++----------
 1 file changed, 6 insertions(+), 10 deletions(-)

diff --git a/frontend/javascripts/components/select_experience_domain.tsx b/frontend/javascripts/components/select_experience_domain.tsx
index 1a578ffba11..baaa51dc36f 100644
--- a/frontend/javascripts/components/select_experience_domain.tsx
+++ b/frontend/javascripts/components/select_experience_domain.tsx
@@ -1,7 +1,8 @@
+import { useQuery } from "@tanstack/react-query";
 import { getExistingExperienceDomains } from "admin/rest_api";
 import { Select, Tooltip } from "antd";
 import type React from "react";
-import { useState, useEffect } from "react";
+import { useState } from "react";
 import type { ExperienceDomainList } from "types/api_types";
 
 type Props = {
@@ -27,17 +28,12 @@ const SelectExperienceDomain: React.FC<Props> = ({
   allowCreation = false,
   alreadyUsedDomains = [],
 }) => {
-  const [domains, setDomains] = useState<ExperienceDomainList>([]);
+  const { data: domains = [] } = useQuery({
+    queryKey: ["experienceDomains"],
+    queryFn: getExistingExperienceDomains,
+  });
   const [currentlyEnteredDomain, setCurrentlyEnteredDomain] = useState("");
 
-  useEffect(() => {
-    const fetchData = async () => {
-      const existingDomains = await getExistingExperienceDomains();
-      setDomains(existingDomains);
-    };
-    void fetchData();
-  }, []);
-
   const getUnusedDomains = (): ExperienceDomainList => {
     return domains.filter((domain) => !alreadyUsedDomains.includes(domain));
   };

From d20c088032ce6902adb61a6a691a7120bb212f57 Mon Sep 17 00:00:00 2001
From: Tom Herold <tom.herold@scalableminds.com>
Date: Wed, 9 Jul 2025 15:44:15 +0200
Subject: [PATCH 7/7] appled CodeRabbit PR feedback

---
 .../javascripts/components/fixed_expandable_table.tsx     | 2 ++
 frontend/javascripts/components/loop.ts                   | 8 +++++---
 2 files changed, 7 insertions(+), 3 deletions(-)

diff --git a/frontend/javascripts/components/fixed_expandable_table.tsx b/frontend/javascripts/components/fixed_expandable_table.tsx
index 2093e7f53d3..9c0a912c20c 100644
--- a/frontend/javascripts/components/fixed_expandable_table.tsx
+++ b/frontend/javascripts/components/fixed_expandable_table.tsx
@@ -55,10 +55,12 @@ export default function FixedExpandableTable<RecordType>({
       onClick={() => setExpandedRows(EMPTY_ARRAY)}
     />
   );
+
   const columnsWithAdjustedFixedProp = columns.map((column) => {
     const columnFixed = expandedRows.length > 0 ? false : column.fixed;
     return { ...column, fixed: columnFixed };
   });
+
   const expandableProp: ExpandableConfig<RecordType> = {
     ...expandable,
     expandedRowKeys: expandedRows,
diff --git a/frontend/javascripts/components/loop.ts b/frontend/javascripts/components/loop.ts
index eeb65b38af6..01a1ca557f0 100644
--- a/frontend/javascripts/components/loop.ts
+++ b/frontend/javascripts/components/loop.ts
@@ -1,5 +1,5 @@
 import window from "libs/window";
-import { useEffect } from "react";
+import { useCallback, useEffect } from "react";
 
 type LoopProps = {
   interval: number;
@@ -7,13 +7,15 @@ type LoopProps = {
 };
 
 export default function Loop({ interval, onTick }: LoopProps) {
+  const _onTick = useCallback(onTick, []);
+
   useEffect(() => {
-    const intervalId = window.setInterval(onTick, interval);
+    const intervalId = window.setInterval(_onTick, interval);
 
     return () => {
       window.clearInterval(intervalId);
     };
-  }, [interval, onTick]);
+  }, [interval, _onTick]);
 
   return null;
 }