Table panel: Add alt and title text options to image cell type (#89930)

* Various updates

* Update form callbacks

* Use defaultValue as opposed to value on input

* Fix things up

* Docs

* Prettier

* Update docs

* Update label text

* Prettier

public/app/plugins/panel/table/TableCellOptionEditor.tsx

@@ -9,6 +9,7 @@ import { Field, Select, TableCellDisplayMode, useStyles2 } from '@grafana/ui';
 import { AutoCellOptionsEditor } from './cells/AutoCellOptionsEditor';
 import { BarGaugeCellOptionsEditor } from './cells/BarGaugeCellOptionsEditor';
 import { ColorBackgroundCellOptionsEditor } from './cells/ColorBackgroundCellOptionsEditor';
+import { ImageCellOptionsEditor } from './cells/ImageCellOptionsEditor';
 import { SparklineCellOptionsEditor } from './cells/SparklineCellOptionsEditor';
 
 // The props that any cell type editor are expected
@@ -73,6 +74,9 @@ export const TableCellOptionEditor = ({ value, onChange }: Props) => {
       {cellType === TableCellDisplayMode.Sparkline && (
         <SparklineCellOptionsEditor cellOptions={value} onChange={onCellOptionsChange} />
       )}
+      {cellType === TableCellDisplayMode.Image && (
+        <ImageCellOptionsEditor cellOptions={value} onChange={onCellOptionsChange} />
+      )}
     </div>
   );
 };

public/app/plugins/panel/table/cells/ImageCellOptionsEditor.tsx

@@ -0,0 +1,33 @@
+import { FormEvent } from 'react';
+
+import { TableImageCellOptions } from '@grafana/schema';
+import { Field, Input } from '@grafana/ui';
+
+import { TableCellEditorProps } from '../TableCellOptionEditor';
+
+export const ImageCellOptionsEditor = ({ cellOptions, onChange }: TableCellEditorProps<TableImageCellOptions>) => {
+  const onAltChange = (e: FormEvent<HTMLInputElement>) => {
+    cellOptions.alt = e.currentTarget.value;
+    onChange(cellOptions);
+  };
+
+  const onTitleChange = (e: FormEvent<HTMLInputElement>) => {
+    cellOptions.title = e.currentTarget.value;
+    onChange(cellOptions);
+  };
+
+  return (
+    <>
+      <Field
+        label="Alt text"
+        description="Alternative text that will be displayed if an image can't be displayed or for users who use a screen reader"
+      >
+        <Input onChange={onAltChange} defaultValue={cellOptions.alt} />
+      </Field>
+
+      <Field label="Title text" description="Text that will be displayed when the image is hovered by a cursor">
+        <Input onChange={onTitleChange} defaultValue={cellOptions.title} />
+      </Field>
+    </>
+  );
+};