From cb845bee3423ea598323d2a2429547abd9096452 Mon Sep 17 00:00:00 2001
From: Thomas Zerr <thomas.zerr@cloudogu.com>
Date: Tue, 5 Sep 2023 08:53:03 +0200
Subject: [PATCH] Components that are now deprecated are marked as such

---
 scm-ui/ui-components/src/Icon.tsx             |  7 +++--
 scm-ui/ui-components/src/Tooltip.tsx          |  7 +++--
 .../ui-components/src/buttons/AddButton.tsx   |  3 ++
 scm-ui/ui-components/src/buttons/Button.tsx   |  3 ++
 .../src/buttons/ButtonAddons.tsx              |  3 ++
 .../ui-components/src/buttons/ButtonGroup.tsx |  3 ++
 .../src/buttons/CreateButton.tsx              |  3 ++
 .../src/buttons/DeleteButton.tsx              |  3 ++
 .../src/buttons/DownloadButton.tsx            |  3 ++
 .../ui-components/src/buttons/EditButton.tsx  |  3 ++
 .../src/buttons/LinkStyleButton.tsx           |  3 ++
 .../src/buttons/NoStyleButton.tsx             |  3 ++
 .../src/buttons/OpenInFullscreenButton.tsx    |  3 ++
 .../src/buttons/RemoveEntryOfTableButton.tsx  |  3 ++
 .../src/buttons/SubmitButton.tsx              |  3 ++
 .../src/forms/AddEntryToTableField.tsx        |  4 +++
 .../forms/AddKeyValueEntryToTableField.tsx    |  5 +++-
 .../AutocompleteAddEntryToTableField.tsx      |  3 ++
 scm-ui/ui-components/src/forms/Checkbox.tsx   |  3 ++
 scm-ui/ui-components/src/forms/FileInput.tsx  |  3 ++
 scm-ui/ui-components/src/forms/FileUpload.tsx |  3 ++
 .../ui-components/src/forms/FilterInput.tsx   |  5 +++-
 .../src/forms/FormFieldTypes.tsx              | 30 +++++++++++++++++++
 .../src/forms/LabelWithHelpIcon.tsx           |  3 ++
 .../src/forms/MemberNameTagGroup.tsx          |  6 ++++
 .../src/forms/PasswordConfirmation.tsx        |  3 ++
 scm-ui/ui-components/src/forms/Radio.tsx      |  3 ++
 scm-ui/ui-components/src/forms/Select.tsx     | 10 +++++--
 scm-ui/ui-components/src/forms/TagGroup.tsx   |  3 ++
 scm-ui/ui-components/src/forms/Textarea.tsx   |  6 ++++
 .../src/forms/TriStateCheckbox.tsx            |  3 ++
 .../ui-components/src/forms/useAutofocus.ts   |  3 ++
 scm-ui/ui-components/src/forms/useInnerRef.ts |  3 ++
 scm-ui/ui-components/src/popover/Popover.tsx  | 15 ++++++----
 .../ui-components/src/popover/usePopover.ts   |  3 ++
 scm-ui/ui-components/src/table/Column.tsx     |  3 ++
 scm-ui/ui-components/src/table/InfoTable.tsx  |  3 ++
 scm-ui/ui-components/src/table/SortIcon.tsx   |  3 ++
 scm-ui/ui-components/src/table/Table.tsx      | 16 ++++++----
 scm-ui/ui-components/src/table/TextColumn.tsx |  3 ++
 40 files changed, 179 insertions(+), 19 deletions(-)

diff --git a/scm-ui/ui-components/src/Icon.tsx b/scm-ui/ui-components/src/Icon.tsx
index f610344b3f..b5a0cdb9eb 100644
--- a/scm-ui/ui-components/src/Icon.tsx
+++ b/scm-ui/ui-components/src/Icon.tsx
@@ -38,6 +38,9 @@ type Props = {
   alt?: string;
 };
 
+/**
+ * @deprecated
+ */
 const Icon: FC<Props> = ({
   iconStyle = "fas",
   color = "secondary",
@@ -48,12 +51,12 @@ const Icon: FC<Props> = ({
   testId,
   tabIndex,
   onEnter,
-  alt = title
+  alt = title,
 }) => {
   return (
     <i
       onClick={onClick}
-      onKeyPress={event => event.key === "Enter" && onEnter && onEnter(event)}
+      onKeyPress={(event) => event.key === "Enter" && onEnter && onEnter(event)}
       title={title}
       className={classNames(iconStyle, "fa-fw", "fa-" + name, `has-text-${color}`, className)}
       tabIndex={tabIndex}
diff --git a/scm-ui/ui-components/src/Tooltip.tsx b/scm-ui/ui-components/src/Tooltip.tsx
index 2d84ab48e8..2d134a0454 100644
--- a/scm-ui/ui-components/src/Tooltip.tsx
+++ b/scm-ui/ui-components/src/Tooltip.tsx
@@ -92,7 +92,7 @@ const Arrow = {
   bottom: ArrowBottom,
   left: ArrowLeft,
   right: ArrowRight,
-  top: ArrowTop
+  top: ArrowTop,
 };
 
 const TooltipContainerBase = styled.div<{ multiline?: boolean }>`
@@ -136,7 +136,7 @@ const Container = {
   bottom: TooltipContainerBottom,
   left: TooltipContainerLeft,
   right: TooltipContainerRight,
-  top: TooltipContainerTop
+  top: TooltipContainerTop,
 };
 
 type Props = {
@@ -150,6 +150,9 @@ type Props = {
 
 export type TooltipLocation = "bottom" | "right" | "top" | "left";
 
+/**
+ * @deprecated use {@link ui-overlays/Tooltip} instead
+ */
 const Tooltip: FC<Props> = ({ className, message, location = "right", multiline, children, id }) => {
   const [open, setOpen] = useState(false);
 
diff --git a/scm-ui/ui-components/src/buttons/AddButton.tsx b/scm-ui/ui-components/src/buttons/AddButton.tsx
index 4c321d9d68..f6eab55773 100644
--- a/scm-ui/ui-components/src/buttons/AddButton.tsx
+++ b/scm-ui/ui-components/src/buttons/AddButton.tsx
@@ -24,6 +24,9 @@
 import React from "react";
 import Button, { ButtonProps } from "./Button";
 
+/**
+ * @deprecated Use {@link ui-buttons/src/Button.tsx} instead
+ */
 class AddButton extends React.Component<ButtonProps> {
   render() {
     return <Button color="default" icon="plus" {...this.props} />;
diff --git a/scm-ui/ui-components/src/buttons/Button.tsx b/scm-ui/ui-components/src/buttons/Button.tsx
index 346b09524c..38a206905b 100644
--- a/scm-ui/ui-components/src/buttons/Button.tsx
+++ b/scm-ui/ui-components/src/buttons/Button.tsx
@@ -47,6 +47,9 @@ type Props = ButtonProps & {
   color?: string;
 };
 
+/**
+ * @deprecated Use {@link ui-buttons/src/Button.tsx} instead
+ */
 const Button = React.forwardRef<HTMLButtonElement | HTMLAnchorElement, Props>(
   (
     {
diff --git a/scm-ui/ui-components/src/buttons/ButtonAddons.tsx b/scm-ui/ui-components/src/buttons/ButtonAddons.tsx
index a94995cec1..644278e1d3 100644
--- a/scm-ui/ui-components/src/buttons/ButtonAddons.tsx
+++ b/scm-ui/ui-components/src/buttons/ButtonAddons.tsx
@@ -36,6 +36,9 @@ type Props = {
   children: ReactNode;
 };
 
+/**
+ * @deprecated
+ */
 class ButtonAddons extends React.Component<Props> {
   render() {
     const { className, children } = this.props;
diff --git a/scm-ui/ui-components/src/buttons/ButtonGroup.tsx b/scm-ui/ui-components/src/buttons/ButtonGroup.tsx
index 3c3ab7635f..2a764ee829 100644
--- a/scm-ui/ui-components/src/buttons/ButtonGroup.tsx
+++ b/scm-ui/ui-components/src/buttons/ButtonGroup.tsx
@@ -29,6 +29,9 @@ type Props = {
   children: ReactNode;
 };
 
+/**
+ * @deprecated
+ */
 class ButtonGroup extends React.Component<Props> {
   render() {
     const { className, children } = this.props;
diff --git a/scm-ui/ui-components/src/buttons/CreateButton.tsx b/scm-ui/ui-components/src/buttons/CreateButton.tsx
index 5b4173a7f8..ce2a4a6afd 100644
--- a/scm-ui/ui-components/src/buttons/CreateButton.tsx
+++ b/scm-ui/ui-components/src/buttons/CreateButton.tsx
@@ -30,6 +30,9 @@ const Wrapper = styled.div`
   border: var(--scm-border);
 `;
 
+/**
+ * @deprecated Use {@link ui-buttons/src/Button.tsx} instead
+ */
 export default class CreateButton extends React.Component<ButtonProps> {
   render() {
     return (
diff --git a/scm-ui/ui-components/src/buttons/DeleteButton.tsx b/scm-ui/ui-components/src/buttons/DeleteButton.tsx
index ce483e6e76..5dfb70001a 100644
--- a/scm-ui/ui-components/src/buttons/DeleteButton.tsx
+++ b/scm-ui/ui-components/src/buttons/DeleteButton.tsx
@@ -24,6 +24,9 @@
 import React from "react";
 import Button, { ButtonProps } from "./Button";
 
+/**
+ * @deprecated Use {@link ui-buttons/src/Button.tsx} instead
+ */
 class DeleteButton extends React.Component<ButtonProps> {
   render() {
     return <Button color="warning" icon="times" {...this.props} />;
diff --git a/scm-ui/ui-components/src/buttons/DownloadButton.tsx b/scm-ui/ui-components/src/buttons/DownloadButton.tsx
index e99bdf5d63..eafa38a282 100644
--- a/scm-ui/ui-components/src/buttons/DownloadButton.tsx
+++ b/scm-ui/ui-components/src/buttons/DownloadButton.tsx
@@ -30,6 +30,9 @@ type Props = {
   onClick?: () => void;
 };
 
+/**
+ * @deprecated
+ */
 class DownloadButton extends React.Component<Props> {
   render() {
     const { displayName, url, disabled, onClick } = this.props;
diff --git a/scm-ui/ui-components/src/buttons/EditButton.tsx b/scm-ui/ui-components/src/buttons/EditButton.tsx
index 4887965ae3..c169a7fa7f 100644
--- a/scm-ui/ui-components/src/buttons/EditButton.tsx
+++ b/scm-ui/ui-components/src/buttons/EditButton.tsx
@@ -24,6 +24,9 @@
 import React from "react";
 import Button, { ButtonProps } from "./Button";
 
+/**
+ * @deprecated Use {@link ui-buttons/src/Button.tsx} instead
+ */
 class EditButton extends React.Component<ButtonProps> {
   render() {
     return <Button color="default" {...this.props} />;
diff --git a/scm-ui/ui-components/src/buttons/LinkStyleButton.tsx b/scm-ui/ui-components/src/buttons/LinkStyleButton.tsx
index 71a2c0461a..18ce490759 100644
--- a/scm-ui/ui-components/src/buttons/LinkStyleButton.tsx
+++ b/scm-ui/ui-components/src/buttons/LinkStyleButton.tsx
@@ -25,6 +25,9 @@
 import styled from "styled-components";
 import NoStyleButton from "./NoStyleButton";
 
+/**
+ * @deprecated Use {@link ui-buttons/src/Button.tsx} instead
+ */
 const LinkStyleButton = styled(NoStyleButton)`
   text-decoration: underline;
 `;
diff --git a/scm-ui/ui-components/src/buttons/NoStyleButton.tsx b/scm-ui/ui-components/src/buttons/NoStyleButton.tsx
index 9ef55ce4ad..d8be9f0dea 100644
--- a/scm-ui/ui-components/src/buttons/NoStyleButton.tsx
+++ b/scm-ui/ui-components/src/buttons/NoStyleButton.tsx
@@ -24,6 +24,9 @@
 
 import styled from "styled-components";
 
+/**
+ * @deprecated
+ */
 const NoStyleButton = styled.button`
   background: none;
   color: inherit;
diff --git a/scm-ui/ui-components/src/buttons/OpenInFullscreenButton.tsx b/scm-ui/ui-components/src/buttons/OpenInFullscreenButton.tsx
index 2f583c1f58..0f414caaf8 100644
--- a/scm-ui/ui-components/src/buttons/OpenInFullscreenButton.tsx
+++ b/scm-ui/ui-components/src/buttons/OpenInFullscreenButton.tsx
@@ -41,6 +41,9 @@ const Button = styled.button`
   }
 `;
 
+/**
+ * @deprecated
+ */
 const OpenInFullscreenButton: FC<Props> = ({ modalTitle, modalBody, tooltipStyle = "tooltipComponent" }) => {
   const [t] = useTranslation("repos");
   const [showModal, setShowModal] = useState(false);
diff --git a/scm-ui/ui-components/src/buttons/RemoveEntryOfTableButton.tsx b/scm-ui/ui-components/src/buttons/RemoveEntryOfTableButton.tsx
index f7702da2d6..eacbfc18dd 100644
--- a/scm-ui/ui-components/src/buttons/RemoveEntryOfTableButton.tsx
+++ b/scm-ui/ui-components/src/buttons/RemoveEntryOfTableButton.tsx
@@ -34,6 +34,9 @@ type Props = {
 
 type State = {};
 
+/**
+ * @deprecated
+ */
 class RemoveEntryOfTableButton extends React.Component<Props, State> {
   render() {
     const { label, entryname, removeEntry, disabled } = this.props;
diff --git a/scm-ui/ui-components/src/buttons/SubmitButton.tsx b/scm-ui/ui-components/src/buttons/SubmitButton.tsx
index 46985f107e..83bba1b50f 100644
--- a/scm-ui/ui-components/src/buttons/SubmitButton.tsx
+++ b/scm-ui/ui-components/src/buttons/SubmitButton.tsx
@@ -29,6 +29,9 @@ type SubmitButtonProps = ButtonProps & {
   testId?: string;
 };
 
+/**
+ * @deprecated Use {@link ui-buttons/src/Button.tsx} instead
+ */
 class SubmitButton extends React.Component<SubmitButtonProps> {
   static defaultProps = {
     scrollToTop: true,
diff --git a/scm-ui/ui-components/src/forms/AddEntryToTableField.tsx b/scm-ui/ui-components/src/forms/AddEntryToTableField.tsx
index 879d7fb7d5..bc19ed0ac1 100644
--- a/scm-ui/ui-components/src/forms/AddEntryToTableField.tsx
+++ b/scm-ui/ui-components/src/forms/AddEntryToTableField.tsx
@@ -41,6 +41,10 @@ const FullWidthInputField = styled(InputField)`
   width: 100%;
 `;
 
+/**
+ *
+ * @deprecated
+ */
 const AddEntryToTableField: FC<Props> = ({
   addEntry,
   disabled,
diff --git a/scm-ui/ui-components/src/forms/AddKeyValueEntryToTableField.tsx b/scm-ui/ui-components/src/forms/AddKeyValueEntryToTableField.tsx
index f52a3e1ba1..468af82563 100644
--- a/scm-ui/ui-components/src/forms/AddKeyValueEntryToTableField.tsx
+++ b/scm-ui/ui-components/src/forms/AddKeyValueEntryToTableField.tsx
@@ -54,6 +54,9 @@ const MobileWrappedDiv = styled.div`
   }
 `;
 
+/**
+ * @deprecated
+ */
 const AddKeyValueEntryToTableField: FC<Props> = ({
   keyFieldLabel,
   valueFieldLabel,
@@ -63,7 +66,7 @@ const AddKeyValueEntryToTableField: FC<Props> = ({
   valueHelpText,
   validateEntry,
   errorMessage,
-  addEntry
+  addEntry,
 }) => {
   const [key, setKey] = useState("");
   const [value, setValue] = useState("");
diff --git a/scm-ui/ui-components/src/forms/AutocompleteAddEntryToTableField.tsx b/scm-ui/ui-components/src/forms/AutocompleteAddEntryToTableField.tsx
index 933a9533ce..35e51af8ea 100644
--- a/scm-ui/ui-components/src/forms/AutocompleteAddEntryToTableField.tsx
+++ b/scm-ui/ui-components/src/forms/AutocompleteAddEntryToTableField.tsx
@@ -44,6 +44,9 @@ const FullWidthAutocomplete = styled(Autocomplete)`
   width: 100%;
 `;
 
+/**
+ * @deprecated
+ */
 const AutocompleteAddEntryToTableField: FC<Props> = ({
   addEntry,
   disabled,
diff --git a/scm-ui/ui-components/src/forms/Checkbox.tsx b/scm-ui/ui-components/src/forms/Checkbox.tsx
index 92b3ecca1f..1b65b2e5f9 100644
--- a/scm-ui/ui-components/src/forms/Checkbox.tsx
+++ b/scm-ui/ui-components/src/forms/Checkbox.tsx
@@ -132,6 +132,9 @@ const InnerCheckbox: FC<FieldProps<BaseProps, HTMLInputElement, boolean>> = ({
   );
 };
 
+/**
+ * @deprecated
+ */
 const Checkbox: FieldType<BaseProps, HTMLInputElement, boolean> = createFormFieldWrapper(InnerCheckbox);
 
 export default Checkbox;
diff --git a/scm-ui/ui-components/src/forms/FileInput.tsx b/scm-ui/ui-components/src/forms/FileInput.tsx
index 8aa810f7bf..bca1b69784 100644
--- a/scm-ui/ui-components/src/forms/FileInput.tsx
+++ b/scm-ui/ui-components/src/forms/FileInput.tsx
@@ -41,6 +41,9 @@ type Props = {
   onBlur?: (event: FocusEvent<HTMLInputElement>) => void;
 };
 
+/**
+ * @deprecated
+ */
 const FileInput = React.forwardRef<HTMLInputElement, Props>(
   ({ name, filenamePlaceholder, testId, helpText, placeholder, disabled, label, className, onBlur, onChange }, ref) => {
     const [t] = useTranslation("commons");
diff --git a/scm-ui/ui-components/src/forms/FileUpload.tsx b/scm-ui/ui-components/src/forms/FileUpload.tsx
index e5165ae368..9cb5901c45 100644
--- a/scm-ui/ui-components/src/forms/FileUpload.tsx
+++ b/scm-ui/ui-components/src/forms/FileUpload.tsx
@@ -31,6 +31,9 @@ type Props = {
   disabled?: boolean;
 };
 
+/**
+ * @deprecated
+ */
 const FileUpload: FC<Props> = ({ handleFile, filenamePlaceholder = "", disabled = false }) => {
   const [t] = useTranslation("commons");
   const [file, setFile] = useState<File | null>(null);
diff --git a/scm-ui/ui-components/src/forms/FilterInput.tsx b/scm-ui/ui-components/src/forms/FilterInput.tsx
index d7b4a1c832..18ca23bc03 100644
--- a/scm-ui/ui-components/src/forms/FilterInput.tsx
+++ b/scm-ui/ui-components/src/forms/FilterInput.tsx
@@ -41,6 +41,9 @@ const FixedHeightInput = styled.input`
   height: 2.5rem;
 `;
 
+/**
+ * @deprecated
+ */
 const FilterInput: FC<Props> = ({ filter, value, testId, placeholder, autoFocus, className, id }) => {
   const [stateValue, setStateValue] = useState(value || "");
   const [timeoutId, setTimeoutId] = useState<ReturnType<typeof setTimeout>>();
@@ -74,7 +77,7 @@ const FilterInput: FC<Props> = ({ filter, value, testId, placeholder, autoFocus,
           type="search"
           placeholder={placeholder || t("filterEntries")}
           value={stateValue}
-          onChange={event => setStateValue(event.target.value)}
+          onChange={(event) => setStateValue(event.target.value)}
           autoFocus={autoFocus || false}
           aria-describedby={id}
           aria-label={t("filterEntries")}
diff --git a/scm-ui/ui-components/src/forms/FormFieldTypes.tsx b/scm-ui/ui-components/src/forms/FormFieldTypes.tsx
index 998548c733..649944ef5e 100644
--- a/scm-ui/ui-components/src/forms/FormFieldTypes.tsx
+++ b/scm-ui/ui-components/src/forms/FormFieldTypes.tsx
@@ -23,21 +23,33 @@
  */
 import React, { ChangeEvent, FC, FocusEvent } from "react";
 
+/**
+ * @deprecated
+ */
 export type MinimumBaseProps = {
   name?: string;
 };
 
+/**
+ * @deprecated
+ */
 export type LegacyProps<Base extends MinimumBaseProps, ValueType> = Base & {
   onChange?: (value: ValueType, name?: string) => void;
   onBlur?: (value: ValueType, name?: string) => void;
   innerRef?: never;
 };
 
+/**
+ * @deprecated
+ */
 export type RefProps<Base extends MinimumBaseProps, ElementType extends HTMLElement> = Base & {
   onChange?: (event: ChangeEvent<ElementType>) => void;
   onBlur?: (event: FocusEvent<ElementType>) => void;
 };
 
+/**
+ * @deprecated
+ */
 export type InnerRefProps<Base extends MinimumBaseProps, ElementType extends HTMLElement> = RefProps<
   Base,
   ElementType
@@ -45,31 +57,49 @@ export type InnerRefProps<Base extends MinimumBaseProps, ElementType extends HTM
   innerRef: React.ForwardedRef<ElementType>;
 };
 
+/**
+ * @deprecated
+ */
 export const isUsingRef = <Base extends MinimumBaseProps, ElementType extends HTMLElement, ValueType>(
   props: Partial<FieldProps<Base, ElementType, ValueType>>
 ): props is InnerRefProps<Base, ElementType> => {
   return (props as Partial<InnerRefProps<Base, ElementType>>).innerRef !== undefined;
 };
 
+/**
+ * @deprecated
+ */
 export const isLegacy = <Base extends MinimumBaseProps, ElementType extends HTMLElement, ValueType>(
   props: FieldProps<Base, ElementType, ValueType>
 ): props is LegacyProps<Base, ValueType> => {
   return (props as Partial<InnerRefProps<Base, ElementType>>).innerRef === undefined;
 };
 
+/**
+ * @deprecated
+ */
 export type FieldProps<Base extends MinimumBaseProps, ElementType extends HTMLElement, ValueType> =
   | LegacyProps<Base, ValueType>
   | InnerRefProps<Base, ElementType>;
 
+/**
+ * @deprecated
+ */
 export type OuterProps<Base extends MinimumBaseProps, ElementType extends HTMLElement> = RefProps<Base, ElementType> & {
   ref: React.Ref<ElementType>;
 };
 
+/**
+ * @deprecated
+ */
 export type FieldType<Base extends MinimumBaseProps, ElementType extends HTMLElement, ValueType> = {
   (props: OuterProps<Base, ElementType>): React.ReactElement<OuterProps<Base, ElementType>> | null;
   (props: LegacyProps<Base, ValueType>): React.ReactElement<LegacyProps<Base, ValueType>> | null;
 };
 
+/**
+ * @deprecated
+ */
 export const createFormFieldWrapper = <Base extends MinimumBaseProps, ElementType extends HTMLElement, ValueType>(
   InnerType: FC<FieldProps<Base, ElementType, ValueType>>
 ) =>
diff --git a/scm-ui/ui-components/src/forms/LabelWithHelpIcon.tsx b/scm-ui/ui-components/src/forms/LabelWithHelpIcon.tsx
index cc3529d9c2..5e28e61a61 100644
--- a/scm-ui/ui-components/src/forms/LabelWithHelpIcon.tsx
+++ b/scm-ui/ui-components/src/forms/LabelWithHelpIcon.tsx
@@ -31,6 +31,9 @@ type Props = {
   helpId?: string;
 };
 
+/**
+ * @deprecated
+ */
 class LabelWithHelpIcon extends React.Component<Props> {
   renderHelp() {
     const { helpText, helpId } = this.props;
diff --git a/scm-ui/ui-components/src/forms/MemberNameTagGroup.tsx b/scm-ui/ui-components/src/forms/MemberNameTagGroup.tsx
index e2107b3c44..ec42c9f999 100644
--- a/scm-ui/ui-components/src/forms/MemberNameTagGroup.tsx
+++ b/scm-ui/ui-components/src/forms/MemberNameTagGroup.tsx
@@ -33,6 +33,9 @@ type Props = WithTranslation & {
   helpText?: string;
 };
 
+/**
+ * @deprecated
+ */
 class MemberNameTagGroup extends React.Component<Props> {
   render() {
     const { members, label, helpText, t } = this.props;
@@ -61,4 +64,7 @@ class MemberNameTagGroup extends React.Component<Props> {
   };
 }
 
+/**
+ * @deprecated
+ */
 export default withTranslation("groups")(MemberNameTagGroup);
diff --git a/scm-ui/ui-components/src/forms/PasswordConfirmation.tsx b/scm-ui/ui-components/src/forms/PasswordConfirmation.tsx
index 688ce55353..90134e24ea 100644
--- a/scm-ui/ui-components/src/forms/PasswordConfirmation.tsx
+++ b/scm-ui/ui-components/src/forms/PasswordConfirmation.tsx
@@ -101,6 +101,9 @@ const PasswordConfirmation: FC<InnerProps> = ({ passwordChanged, passwordValidat
   );
 };
 
+/**
+ * @deprecated
+ */
 export default React.forwardRef<HTMLInputElement, BaseProps>((props, ref) => (
   <PasswordConfirmation {...props} innerRef={ref} />
 ));
diff --git a/scm-ui/ui-components/src/forms/Radio.tsx b/scm-ui/ui-components/src/forms/Radio.tsx
index aa15f4e3be..57ebb651a6 100644
--- a/scm-ui/ui-components/src/forms/Radio.tsx
+++ b/scm-ui/ui-components/src/forms/Radio.tsx
@@ -107,6 +107,9 @@ const InnerRadio: FC<FieldProps<BaseProps, HTMLInputElement, boolean>> = ({
   );
 };
 
+/**
+ * @deprecated
+ */
 const Radio: FieldType<BaseProps, HTMLInputElement, boolean> = createFormFieldWrapper(InnerRadio);
 
 export default Radio;
diff --git a/scm-ui/ui-components/src/forms/Select.tsx b/scm-ui/ui-components/src/forms/Select.tsx
index 62f14d17e2..193383a0ae 100644
--- a/scm-ui/ui-components/src/forms/Select.tsx
+++ b/scm-ui/ui-components/src/forms/Select.tsx
@@ -50,6 +50,9 @@ type BaseProps = {
   ariaLabelledby?: string;
 };
 
+/**
+ * @deprecated
+ */
 const InnerSelect: FC<FieldProps<BaseProps, HTMLSelectElement, string>> = ({
   value,
   defaultValue,
@@ -69,7 +72,7 @@ const InnerSelect: FC<FieldProps<BaseProps, HTMLSelectElement, string>> = ({
   const field = useInnerRef(props.innerRef);
 
   let opts = options;
-  if (value && addValueToOptions && !options.some(o => o.value === value)) {
+  if (value && addValueToOptions && !options.some((o) => o.value === value)) {
     opts = [{ label: value, value }, ...options];
   }
 
@@ -128,7 +131,7 @@ const InnerSelect: FC<FieldProps<BaseProps, HTMLSelectElement, string>> = ({
           aria-describedby={helpText ? helpId : undefined}
           {...createAttributesForTesting(testId)}
         >
-          {opts.map(opt => {
+          {opts.map((opt) => {
             return (
               <option value={opt.value} key={"KEY_" + opt.value}>
                 {opt.label}
@@ -141,6 +144,9 @@ const InnerSelect: FC<FieldProps<BaseProps, HTMLSelectElement, string>> = ({
   );
 };
 
+/**
+ * @deprecated
+ */
 const Select: FieldType<BaseProps, HTMLSelectElement, string> = createFormFieldWrapper(InnerSelect);
 
 export default Select;
diff --git a/scm-ui/ui-components/src/forms/TagGroup.tsx b/scm-ui/ui-components/src/forms/TagGroup.tsx
index 8cc3c73fef..d718795490 100644
--- a/scm-ui/ui-components/src/forms/TagGroup.tsx
+++ b/scm-ui/ui-components/src/forms/TagGroup.tsx
@@ -32,6 +32,9 @@ type Props = {
   onRemove: (p: DisplayedUser[]) => void;
 };
 
+/**
+ * @deprecated
+ */
 export default class TagGroup extends React.Component<Props> {
   render() {
     const { items, label, helpText } = this.props;
diff --git a/scm-ui/ui-components/src/forms/Textarea.tsx b/scm-ui/ui-components/src/forms/Textarea.tsx
index ce45d3425e..0561671f3f 100644
--- a/scm-ui/ui-components/src/forms/Textarea.tsx
+++ b/scm-ui/ui-components/src/forms/Textarea.tsx
@@ -45,6 +45,9 @@ type BaseProps = {
   readOnly?: boolean;
 };
 
+/**
+ * @deprecated
+ */
 const InnerTextarea: FC<FieldProps<BaseProps, HTMLTextAreaElement, string>> = ({
   placeholder,
   value,
@@ -130,6 +133,9 @@ const InnerTextarea: FC<FieldProps<BaseProps, HTMLTextAreaElement, string>> = ({
   );
 };
 
+/**
+ * @deprecated
+ */
 const Textarea: FieldType<BaseProps, HTMLTextAreaElement, string> = createFormFieldWrapper(InnerTextarea);
 
 export default Textarea;
diff --git a/scm-ui/ui-components/src/forms/TriStateCheckbox.tsx b/scm-ui/ui-components/src/forms/TriStateCheckbox.tsx
index 95b4d2d230..5b702d606d 100644
--- a/scm-ui/ui-components/src/forms/TriStateCheckbox.tsx
+++ b/scm-ui/ui-components/src/forms/TriStateCheckbox.tsx
@@ -32,6 +32,9 @@ type Props = {
   testId?: string;
 };
 
+/**
+ * @deprecated
+ */
 const TriStateCheckbox: FC<Props> = ({ checked, indeterminate, disabled, label, testId }) => {
   let icon;
   if (indeterminate) {
diff --git a/scm-ui/ui-components/src/forms/useAutofocus.ts b/scm-ui/ui-components/src/forms/useAutofocus.ts
index f09b772cb4..70ea67489b 100644
--- a/scm-ui/ui-components/src/forms/useAutofocus.ts
+++ b/scm-ui/ui-components/src/forms/useAutofocus.ts
@@ -47,4 +47,7 @@ const useAutofocus = <T extends HTMLElement | null>(enabled?: boolean, innerRef?
   return ref;
 };
 
+/**
+ * @deprecated
+ */
 export default useAutofocus;
diff --git a/scm-ui/ui-components/src/forms/useInnerRef.ts b/scm-ui/ui-components/src/forms/useInnerRef.ts
index ecf04820ba..402fb02a53 100644
--- a/scm-ui/ui-components/src/forms/useInnerRef.ts
+++ b/scm-ui/ui-components/src/forms/useInnerRef.ts
@@ -40,4 +40,7 @@ const useInnerRef = <T extends HTMLElement | null>(innerRef?: React.ForwardedRef
   return ref;
 };
 
+/**
+ * @deprecated
+ */
 export default useInnerRef;
diff --git a/scm-ui/ui-components/src/popover/Popover.tsx b/scm-ui/ui-components/src/popover/Popover.tsx
index 704106eab3..86b4284004 100644
--- a/scm-ui/ui-components/src/popover/Popover.tsx
+++ b/scm-ui/ui-components/src/popover/Popover.tsx
@@ -43,7 +43,7 @@ type ContainerProps = {
 const PopoverContainer = styled.div<ContainerProps>`
   position: absolute;
   z-index: 100;
-  width: ${props => props.width}px;
+  width: ${(props) => props.width}px;
   display: block;
 
   &:before {
@@ -54,7 +54,7 @@ const PopoverContainer = styled.div<ContainerProps>`
     height: 0;
     width: 0;
     top: 100%;
-    left: ${props => props.width / 2}px;
+    left: ${(props) => props.width / 2}px;
     border-color: transparent;
     border-bottom-color: var(--scm-popover-border-color);
     border-left-color: var(--scm-popover-border-color);
@@ -71,7 +71,10 @@ const PopoverHeading = styled.div`
   height: 1.5em;
 `;
 
-const Popover: FC<Props> = props => {
+/**
+ * @deprecated use {@link ui-overlays/popover} instead
+ */
+const Popover: FC<Props> = (props) => {
   if (!props.show) {
     return null;
   }
@@ -89,13 +92,13 @@ const InnerPopover: FC<Props> = ({ title, show, width, offsetTop, offsetLeft, di
 
   const onMouseEnter = () => {
     dispatch({
-      type: "enter-popover"
+      type: "enter-popover",
     });
   };
 
   const onMouseLeave = () => {
     dispatch({
-      type: "leave-popover"
+      type: "leave-popover",
     });
   };
 
@@ -118,7 +121,7 @@ const InnerPopover: FC<Props> = ({ title, show, width, offsetTop, offsetLeft, di
 };
 
 Popover.defaultProps = {
-  width: 120
+  width: 120,
 };
 
 export default Popover;
diff --git a/scm-ui/ui-components/src/popover/usePopover.ts b/scm-ui/ui-components/src/popover/usePopover.ts
index d3dea847a8..18ffb89f6c 100644
--- a/scm-ui/ui-components/src/popover/usePopover.ts
+++ b/scm-ui/ui-components/src/popover/usePopover.ts
@@ -100,6 +100,9 @@ const dispatchDeferred = (dispatch: Dispatch<Action>, action: Action) => {
   setTimeout(() => dispatch(action), 250);
 };
 
+/**
+ * @deprecated
+ */
 const usePopover = () => {
   const [state, dispatch] = useReducer(reducer, initialState);
   const triggerRef = useRef<HTMLElement | null>(null);
diff --git a/scm-ui/ui-components/src/table/Column.tsx b/scm-ui/ui-components/src/table/Column.tsx
index 2e4570f2f7..dc8ca9e522 100644
--- a/scm-ui/ui-components/src/table/Column.tsx
+++ b/scm-ui/ui-components/src/table/Column.tsx
@@ -28,6 +28,9 @@ type Props = ColumnProps & {
   children: (row: any, columnIndex: number, rowIndex: number) => ReactNode;
 };
 
+/**
+ * @deprecated
+ */
 const Column: FC<Props> = ({ row, columnIndex, rowIndex, children }) => {
   if (row === undefined) {
     throw new Error("missing row, use column only as child of Table");
diff --git a/scm-ui/ui-components/src/table/InfoTable.tsx b/scm-ui/ui-components/src/table/InfoTable.tsx
index cfece8bc1b..d59b139787 100644
--- a/scm-ui/ui-components/src/table/InfoTable.tsx
+++ b/scm-ui/ui-components/src/table/InfoTable.tsx
@@ -51,6 +51,9 @@ const StyledTable = styled.table`
   }
 `;
 
+/**
+ * @deprecated
+ */
 const InfoTable: FC<Props> = ({ className, children, ...rest }) => (
   <StyledTable className={classNames("table", className)} {...rest}>
     {children}
diff --git a/scm-ui/ui-components/src/table/SortIcon.tsx b/scm-ui/ui-components/src/table/SortIcon.tsx
index c1c932c17d..5648f440a2 100644
--- a/scm-ui/ui-components/src/table/SortIcon.tsx
+++ b/scm-ui/ui-components/src/table/SortIcon.tsx
@@ -30,6 +30,9 @@ type Props = {
   isVisible: boolean;
 };
 
+/**
+ * @deprecated
+ */
 const SortIcon: FC<Props> = (props: Props) => {
   return (
     <Icon
diff --git a/scm-ui/ui-components/src/table/Table.tsx b/scm-ui/ui-components/src/table/Table.tsx
index 4953808490..8e9ada2719 100644
--- a/scm-ui/ui-components/src/table/Table.tsx
+++ b/scm-ui/ui-components/src/table/Table.tsx
@@ -35,6 +35,9 @@ type Props = {
   className?: string;
 };
 
+/**
+ * @deprecated
+ */
 const Table: FC<Props> = ({ data, sortable, children, emptyMessage, className }) => {
   const [tableData, setTableData] = useState(data);
   useEffect(() => {
@@ -63,7 +66,9 @@ const Table: FC<Props> = ({ data, sortable, children, emptyMessage, className })
         {React.Children.map(children, (child, columnIndex) => {
           const { className: columnClassName, ...childProperties } = (child as ReactElement).props;
           return (
-            <td className={columnClassName}>{React.cloneElement((child as ReactElement), { ...childProperties, columnIndex, rowIndex, row })}</td>
+            <td className={columnClassName}>
+              {React.cloneElement(child as ReactElement, { ...childProperties, columnIndex, rowIndex, row })}
+            </td>
           );
         })}
       </tr>
@@ -112,14 +117,15 @@ const Table: FC<Props> = ({ data, sortable, children, emptyMessage, className })
         <tr>
           {React.Children.map(children, (child, index) => (
             <th
-              className={isSortable((child as ReactElement)) && "is-clickable"}
-              onClick={isSortable((child as ReactElement)) ? () => tableSort(index) : undefined}
+              className={isSortable(child as ReactElement) && "is-clickable"}
+              onClick={isSortable(child as ReactElement) ? () => tableSort(index) : undefined}
               onMouseEnter={() => setHoveredColumnIndex(index)}
               onMouseLeave={() => setHoveredColumnIndex(undefined)}
               key={index}
             >
               {(child as ReactElement).props.header}
-              {isSortable((child as ReactElement)) && renderSortIcon((child as ReactElement), ascending, shouldShowIcon(index))}
+              {isSortable(child as ReactElement) &&
+                renderSortIcon(child as ReactElement, ascending, shouldShowIcon(index))}
             </th>
           ))}
         </tr>
@@ -130,7 +136,7 @@ const Table: FC<Props> = ({ data, sortable, children, emptyMessage, className })
 };
 
 Table.defaultProps = {
-  sortable: true
+  sortable: true,
 };
 
 const renderSortIcon = (child: ReactElement, ascending: boolean, showIcon: boolean) => {
diff --git a/scm-ui/ui-components/src/table/TextColumn.tsx b/scm-ui/ui-components/src/table/TextColumn.tsx
index 74dfe80316..d7088aa2a8 100644
--- a/scm-ui/ui-components/src/table/TextColumn.tsx
+++ b/scm-ui/ui-components/src/table/TextColumn.tsx
@@ -29,6 +29,9 @@ type Props = ColumnProps & {
   dataKey: string;
 };
 
+/**
+ * @deprecated
+ */
 const TextColumn: FC<Props> = ({ row, dataKey }) => {
   return row[dataKey];
 };