Add required frontend to show results

web/components/roomConfig/FeedConnection.module.scss

@@ -1,4 +1,9 @@
 .resultListItem {
     list-style: none;
     padding-bottom: 1rem;
+}
+
+.logContainer {
+    overflow: auto;
+    max-height: 10rem;
 }

web/components/roomConfig/GenericWebhookConfig.tsx

@@ -7,6 +7,7 @@ import { GenericHookConnectionState, GenericHookResponseItem } from "../../../sr
 import { ConnectionConfigurationProps, RoomConfig } from "./RoomConfig";
 import { InputField, ButtonSet, Button } from "../elements";
 import WebhookIcon from "../../icons/webhook.png";
+import styles from "./FeedConnection.module.scss";
 
 const EXAMPLE_SCRIPT = `if (data.counter === undefined) {
     result = {
@@ -27,8 +28,38 @@ const EXAMPLE_SCRIPT = `if (data.counter === undefined) {
 
 const DOCUMENTATION_LINK = "https://matrix-org.github.io/matrix-hookshot/latest/setup/webhooks.html#script-api";
 
+const RecentResults: FunctionComponent<{item: GenericHookResponseItem, onRefreshClick: MouseEvent}> = ({ item, onRefreshClick }) => {
+    if (!item.secrets) {
+        return null;
+    }
+    return <>
+        <h3>Recent requests</h3>
+        <Button onClick={onRefreshClick}> Refresh </Button> 
+        {!item.secrets.lastResults.length && <span>There have been no recent requests.</span>}
+        <ul>
+            {item.secrets.lastResults.map(item => <li className={styles.resultListItem} key={item.timestamp}>
+                {new Date(item.timestamp).toLocaleString()}: 
+                {item.ok && ` Successful request`}
+                {!item.ok && `⚠️ ${item.error}`}
+                <details>
+                    <summary>Details</summary>
+                    { item.error && <p>Error: <span>{item.error}</span></p> }
+                    <p>User-Agent: <span>{item.metadata.userAgent || "Unknown"}</span></p>
+                    <p>Content-Type: <span>{item.metadata.contentType || "Unknown"}</span></p>
+                    { item.logs && <>
+                        <p> Logs </p>
+                        <pre className={styles.logContainer}>
+                            {item.logs}
+                        </pre>
+                    </>}
+                </details>
+            </li>
+            )}
+        </ul>
+    </>;
+}
 
-const ConnectionConfiguration: FunctionComponent<ConnectionConfigurationProps<ServiceConfig, GenericHookResponseItem, GenericHookConnectionState>> = ({serviceConfig, existingConnection, onSave, onRemove}) => {
+const ConnectionConfiguration: FunctionComponent<ConnectionConfigurationProps<ServiceConfig, GenericHookResponseItem, GenericHookConnectionState>> = ({serviceConfig, existingConnection, onSave, onRemove, onRefresh}) => {
     const [transFn, setTransFn] = useState<string>(existingConnection?.config.transformationFunction as string || EXAMPLE_SCRIPT);
     const [transFnEnabled, setTransFnEnabled] = useState(serviceConfig.allowJsTransformationFunctions && !!existingConnection?.config.transformationFunction);
     const nameRef = createRef<HTMLInputElement>();
@@ -72,6 +103,9 @@ const ConnectionConfiguration: FunctionComponent<ConnectionConfigurationProps<Se
             { canEdit && <Button type="submit">{ existingConnection ? "Save" : "Add webhook" }</Button>}
             { canEdit && existingConnection && <Button intent="remove" onClick={onRemove}>Remove webhook</Button>}
         </ButtonSet>
+
+        { existingConnection && <RecentResults onRefreshClick={onRefresh} item={existingConnection} />}
+
     </form>;
 };
 

web/components/roomConfig/RoomConfig.tsx

@@ -11,6 +11,7 @@ export interface ConnectionConfigurationProps<SConfig, ConnectionType extends Ge
     onSave: (newConfig: ConnectionState) => void,
     existingConnection?: ConnectionType;
     onRemove?: () => void,
+    onRefresh?: () => void,
     api: BridgeAPI;
 }
 
@@ -41,6 +42,11 @@ export const RoomConfig = function<SConfig, ConnectionType extends GetConnection
     const [ newConnectionKey, incrementConnectionKey ] = useReducer<number, undefined>(n => n+1, 0);
 
     useEffect(() => {
+        refreshConnections();
+    }, [api, roomId, type, newConnectionKey]);
+
+
+    const refreshConnections = useCallback(() => {
         api.getConnectionsForService<ConnectionType>(roomId, type).then(res => {
             setCanEditRoom(res.canEdit);
             setConnections(res.connections);
@@ -52,10 +58,11 @@ export const RoomConfig = function<SConfig, ConnectionType extends GetConnection
                 message: ex instanceof BridgeAPIError ? ex.message : "Unknown error"
             });
         });
-    }, [api, roomId, type, newConnectionKey]);
+    }, [api, roomId, type]);
 
     useEffect(() => {
-        api.getServiceConfig<SConfig>(type)
+        if (!serviceConfig) {
+            api.getServiceConfig<SConfig>(type)
             .then(setServiceConfig)
             .then(() => {
                 setError(null);
@@ -67,7 +74,8 @@ export const RoomConfig = function<SConfig, ConnectionType extends GetConnection
                     message: ex instanceof BridgeAPIError ? ex.message : "Unknown error"
                 });
             })
-    }, [api, type]);
+        }
+    }, [api, type, serviceConfig]);
 
     const handleSaveOnCreation = useCallback((config) => {
         api.createConnection(roomId, connectionEventType, config).then(() => {
@@ -98,6 +106,7 @@ export const RoomConfig = function<SConfig, ConnectionType extends GetConnection
                 api={api}
                 serviceConfig={serviceConfig}
                 onSave={handleSaveOnCreation}
+                onRefresh={refreshConnections}
             />}
         </section>}
         <section>
@@ -107,6 +116,7 @@ export const RoomConfig = function<SConfig, ConnectionType extends GetConnection
                         api={api}
                         serviceConfig={serviceConfig}
                         existingConnection={c}
+                        onRefresh={refreshConnections}
                         onSave={(config) => {
                             api.updateConnection(roomId, c.id, config).then(() => {
                                 // Force reload