Mirrors/unleash.unleash
1
0
Fork 0
mirror of https://github.com/Unleash/unleash.git synced 2025-05-03 01:18:43 +02:00
Code Issues Projects Releases Wiki Activity

refactor: port event pages to TS (#1193)

Browse Source
This commit is contained in:
olav 2022-08-04 08:41:01 +02:00 committed by GitHub
parent cc9bef1d43
commit 367d8a6a5a
11 changed files with 78 additions and 66 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
frontend/src/component/feature/FeatureView/FeatureLog/FeatureLog.tsx
View File

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

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

@ -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';

2
frontend/src/component/history/EventHistory/EventHistory.tsx
View File

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

15
frontend/src/component/history/EventLog/EventCard/EventCard.jsx → frontend/src/component/history/EventLog/EventCard/EventCard.tsx
View File

@ -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>

24
frontend/src/component/history/EventLog/EventCard/EventDiff/EventDiff.jsx → frontend/src/component/history/EventLog/EventCard/EventDiff/EventDiff.tsx
View File

@ -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">
{changes.length === 0 ? '(no changes)' : changes}
</code>
{/* @ts-expect-error */}
<code>{changes.length === 0 ? '(no changes)' : changes}</code>
</pre>
);
};
EventDiff.propTypes = {
entry: PropTypes.object,
};
export default EventDiff;

10
frontend/src/component/history/EventLog/EventJson/EventJson.jsx → frontend/src/component/history/EventLog/EventJson/EventJson.tsx
View File

@ -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>
);

41
frontend/src/component/history/EventLog/EventLog.jsx → frontend/src/component/history/EventLog/EventLog.tsx
View File

@ -1,35 +1,47 @@
import { List, Switch, FormControlLabel } from '@mui/material';
import PropTypes from 'prop-types';
import EventJson from './EventJson/EventJson';
import EventJson from 'component/history/EventLog/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;

7
frontend/src/component/history/EventLog/index.tsx
View File

@ -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}

19
frontend/src/component/history/FeatureEventHistory/FeatureEventHistory.jsx
View File

@ -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,
};

18
frontend/src/component/history/FeatureEventHistory/FeatureEventHistory.tsx Normal file
View File

@ -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 />;
};

4
frontend/src/component/history/FeatureEventHistoryPage/FeatureEventHistoryPage.tsx
View File

@ -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} />;
};