refactor: port event pages to TS (#1193)

frontend/src/component/feature/FeatureView/FeatureLog/FeatureLog.tsx

@@ -15,7 +15,7 @@ const FeatureLog = () => {
 
     return (
         <div className={styles.container}>
-            <FeatureEventHistory toggleName={feature.name} />
+            <FeatureEventHistory featureId={feature.name} />
         </div>
     );
 };

frontend/src/component/feature/FeatureView/FeatureOverview/FeatureOverviewEnvironments/FeatureOverviewEnvironment/EnvironmentAccordionBody/StrategyDraggableItem/StrategyItem/StrategyExecution/StrategyExecution.tsx

@@ -1,5 +1,5 @@
 import { Fragment, useMemo, VFC } from 'react';
-import { Box, Chip, Tooltip } from '@mui/material';
+import { Box, Chip } from '@mui/material';
 import { IFeatureStrategy } from 'interfaces/strategy';
 import { ConditionallyRender } from 'component/common/ConditionallyRender/ConditionallyRender';
 import PercentageCircle from 'component/common/PercentageCircle/PercentageCircle';

frontend/src/component/history/EventHistory/EventHistory.tsx

@@ -8,5 +8,5 @@ export const EventHistory = () => {
         return null;
     }
 
-    return <EventLog history={events} title="Event log" />;
+    return <EventLog events={events} title="Event log" />;
 };

frontend/src/component/history/EventLog/EventCard/EventCard.tsx

@@ -1,9 +1,14 @@
-import EventDiff from './EventDiff/EventDiff';
+import EventDiff from 'component/history/EventLog/EventCard/EventDiff/EventDiff';
-
 import { useStyles } from './EventCard.styles';
 import { ConditionallyRender } from 'component/common/ConditionallyRender/ConditionallyRender';
+import { IEvent } from 'interfaces/event';
 
-const EventCard = ({ entry, timeFormatted }) => {
+interface IEventCardProps {
+    entry: IEvent;
+    timeFormatted: string;
+}
+
+const EventCard = ({ entry, timeFormatted }: IEventCardProps) => {
     const { classes: styles } = useStyles();
 
     return (
@@ -18,7 +23,7 @@ const EventCard = ({ entry, timeFormatted }) => {
                 <dt className={styles.eventLogHeader}>Changed by: </dt>
                 <dd title={entry.createdBy}>{entry.createdBy}</dd>
                 <ConditionallyRender
-                    condition={entry.project}
+                    condition={Boolean(entry.project)}
                     show={
                         <>
                             <dt className={styles.eventLogHeader}>Project: </dt>
@@ -27,7 +32,7 @@ const EventCard = ({ entry, timeFormatted }) => {
                     }
                 />
                 <ConditionallyRender
-                    condition={entry.featureName}
+                    condition={Boolean(entry.featureName)}
                     show={
                         <>
                             <dt className={styles.eventLogHeader}>Feature: </dt>

frontend/src/component/history/EventLog/EventCard/EventDiff/EventDiff.tsx

@@ -1,7 +1,6 @@
-import PropTypes from 'prop-types';
 import { diff } from 'deep-diff';
-
 import { useStyles } from './EventDiff.styles';
+import { IEvent } from 'interfaces/event';
 
 const DIFF_PREFIXES = {
     A: ' ',
@@ -10,7 +9,11 @@ const DIFF_PREFIXES = {
     N: '+',
 };
 
-const EventDiff = ({ entry }) => {
+interface IEventDiffProps {
+    entry: IEvent;
+}
+
+const EventDiff = ({ entry }: IEventDiffProps) => {
     const { classes: styles } = useStyles();
 
     const KLASSES = {
@@ -25,7 +28,7 @@ const EventDiff = ({ entry }) => {
             ? diff(entry.preData, entry.data)
             : undefined;
 
-    const buildItemDiff = (diff, key) => {
+    const buildItemDiff = (diff: any, key: string) => {
         let change;
         if (diff.lhs !== undefined) {
             change = (
@@ -48,7 +51,7 @@ const EventDiff = ({ entry }) => {
         return change;
     };
 
-    const buildDiff = (diff, idx) => {
+    const buildDiff = (diff: any, idx: number) => {
         let change;
         const key = diff.path.join('.');
 
@@ -66,7 +69,9 @@ const EventDiff = ({ entry }) => {
                 </div>
             );
         } else {
+            // @ts-expect-error
             const spadenClass = KLASSES[diff.kind];
+            // @ts-expect-error
             const prefix = DIFF_PREFIXES[diff.kind];
 
             change = (
@@ -95,15 +100,10 @@ const EventDiff = ({ entry }) => {
 
     return (
         <pre style={{ overflowX: 'auto', overflowY: 'hidden' }} tabIndex={0}>
-            <code className="smalltext man">
+            {/* @ts-expect-error */}
-                {changes.length === 0 ? '(no changes)' : changes}
+            <code>{changes.length === 0 ? '(no changes)' : changes}</code>
-            </code>
         </pre>
     );
 };
 
-EventDiff.propTypes = {
-    entry: PropTypes.object,
-};
-
 export default EventDiff;

frontend/src/component/history/EventLog/EventJson/EventJson.tsx

@@ -1,8 +1,12 @@
 import PropTypes from 'prop-types';
-
 import { useStyles } from './EventJson.styles';
+import { IEvent } from 'interfaces/event';
 
-const EventJson = ({ entry }) => {
+interface IEventJsonProps {
+    entry: IEvent;
+}
+
+const EventJson = ({ entry }: IEventJsonProps) => {
     const { classes: styles } = useStyles();
 
     const localEventData = JSON.parse(JSON.stringify(entry));
@@ -15,7 +19,7 @@ const EventJson = ({ entry }) => {
     return (
         <li className={styles.historyItem}>
             <div>
-                <code className="JSON smalltext man">{prettyPrinted}</code>
+                <code>{prettyPrinted}</code>
             </div>
         </li>
     );

frontend/src/component/history/EventLog/EventLog.tsx

@@ -1,35 +1,47 @@
 import { List, Switch, FormControlLabel } from '@mui/material';
-import PropTypes from 'prop-types';
+import EventJson from 'component/history/EventLog/EventJson/EventJson';
-import EventJson from './EventJson/EventJson';
 import { PageContent } from 'component/common/PageContent/PageContent';
 import { PageHeader } from 'component/common/PageHeader/PageHeader';
-import EventCard from './EventCard/EventCard';
+import EventCard from 'component/history/EventLog/EventCard/EventCard';
 import { useStyles } from './EventLog.styles';
 import { formatDateYMDHMS } from 'utils/formatDate';
+import { IEventSettings } from 'hooks/useEventSettings';
+import { IEvent } from 'interfaces/event';
+import React from 'react';
+import { ILocationSettings } from 'hooks/useLocationSettings';
+
+interface IEventLogProps {
+    title: string;
+    events: IEvent[];
+    eventSettings: IEventSettings;
+    setEventSettings: React.Dispatch<React.SetStateAction<IEventSettings>>;
+    locationSettings: ILocationSettings;
+    displayInline?: boolean;
+}
 
 const EventLog = ({
     title,
-    history,
+    events,
     eventSettings,
     setEventSettings,
     locationSettings,
     displayInline,
-}) => {
+}: IEventLogProps) => {
     const { classes: styles } = useStyles();
     const toggleShowDiff = () => {
         setEventSettings({ showData: !eventSettings.showData });
     };
-    const formatFulldateTime = v => {
+    const formatFulldateTime = (v: string) => {
         return formatDateYMDHMS(v, locationSettings.locale);
     };
 
-    if (!history || history.length < 0) {
+    if (!events || events.length < 0) {
         return null;
     }
 
     let entries;
 
-    const renderListItemCards = entry => (
+    const renderListItemCards = (entry: IEvent) => (
         <li key={entry.id} className={styles.eventEntry}>
             <EventCard
                 entry={entry}
@@ -39,11 +51,11 @@ const EventLog = ({
     );
 
     if (eventSettings.showData) {
-        entries = history.map(entry => (
+        entries = events.map(entry => (
             <EventJson key={`log${entry.id}`} entry={entry} />
         ));
     } else {
-        entries = history.map(renderListItemCards);
+        entries = events.map(renderListItemCards);
     }
 
     return (
@@ -75,13 +87,4 @@ const EventLog = ({
     );
 };
 
-EventLog.propTypes = {
-    history: PropTypes.array,
-    eventSettings: PropTypes.object.isRequired,
-    setEventSettings: PropTypes.func.isRequired,
-    locationSettings: PropTypes.object.isRequired,
-    title: PropTypes.string,
-    displayInline: PropTypes.bool,
-};
-
 export default EventLog;

frontend/src/component/history/EventLog/index.tsx

@@ -1,10 +1,11 @@
-import EventLog from './EventLog';
+import EventLog from 'component/history/EventLog/EventLog';
 import { useEventSettings } from 'hooks/useEventSettings';
 import { useLocationSettings } from 'hooks/useLocationSettings';
+import { IEvent } from 'interfaces/event';
 
 interface IEventLogContainerProps {
     title: string;
-    history: unknown[];
+    events: IEvent[];
     displayInline?: boolean;
 }
 
@@ -15,7 +16,7 @@ const EventLogContainer = (props: IEventLogContainerProps) => {
     return (
         <EventLog
             title={props.title}
-            history={props.history}
+            events={props.events}
             eventSettings={eventSettings}
             setEventSettings={setEventSettings}
             locationSettings={locationSettings}

frontend/src/component/history/FeatureEventHistory/FeatureEventHistory.jsx

@@ -1,19 +0,0 @@
-import PropTypes from 'prop-types';
-import EventLog from '../EventLog';
-import { useFeatureEvents } from 'hooks/api/getters/useFeatureEvents/useFeatureEvents';
-
-export const FeatureEventHistory = ({ toggleName }) => {
-    const { events } = useFeatureEvents(toggleName);
-
-    if (events.length === 0) {
-        return null;
-    }
-
-    return (
-        <EventLog history={events} hideName title="Event log" displayInline />
-    );
-};
-
-FeatureEventHistory.propTypes = {
-    toggleName: PropTypes.string.isRequired,
-};

frontend/src/component/history/FeatureEventHistory/FeatureEventHistory.tsx

@@ -0,0 +1,18 @@
+import EventLog from '../EventLog';
+import { useFeatureEvents } from 'hooks/api/getters/useFeatureEvents/useFeatureEvents';
+
+interface IFeatureEventHistoryProps {
+    featureId: string;
+}
+
+export const FeatureEventHistory = ({
+    featureId,
+}: IFeatureEventHistoryProps) => {
+    const { events } = useFeatureEvents(featureId);
+
+    if (events.length === 0) {
+        return null;
+    }
+
+    return <EventLog events={events} title="Event log" displayInline />;
+};

frontend/src/component/history/FeatureEventHistoryPage/FeatureEventHistoryPage.tsx

@@ -1,9 +1,9 @@
 import React from 'react';
-import { FeatureEventHistory } from '../FeatureEventHistory/FeatureEventHistory';
+import { FeatureEventHistory } from 'component/history/FeatureEventHistory/FeatureEventHistory';
 import { useRequiredPathParam } from 'hooks/useRequiredPathParam';
 
 export const FeatureEventHistoryPage = () => {
     const toggleName = useRequiredPathParam('toggleName');
 
-    return <FeatureEventHistory toggleName={toggleName} />;
+    return <FeatureEventHistory featureId={toggleName} />;
 };