Skip to content

Commit

Permalink
Merge pull request #2897 from bakdata/history-empty-state
Browse files Browse the repository at this point in the history 
History empty state
  • Loading branch information
@Kadrian
Kadrian authored Jan 24, 2023
2 parents 3849d37 + e4cf1f1 commit 0e851b0
Show file tree
Hide file tree
Showing 14 changed files with 296 additions and 126 deletions.
146 changes: 69 additions & 77 deletions frontend/mock-api/index.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -51,7 +51,7 @@ module.exports = function (app, port) {
);

app.post(
"/api/datasets/:datasetId/queries/:id/cancel",
"/api/queries/:id/cancel",
mockAuthMiddleware,
function response(req, res) {
setTimeout(() => {
Expand Down Expand Up @@ -99,7 +99,7 @@ module.exports = function (app, port) {
);

app.delete(
"/api/datasets/:datasetId/queries/:id",
"/api/queries/:id",
mockAuthMiddleware,
function response(req, res) {
setTimeout(() => {
Expand All @@ -109,68 +109,64 @@ module.exports = function (app, port) {
},
);

app.get(
"/api/datasets/:datasetId/queries/:id",
mockAuthMiddleware,
function response(req, res) {
if (req.params.id !== 1) {
setTimeout(() => {
res.sendFile(path.join(__dirname, "./stored-queries/25.json"));
}, LONG_DELAY);
} else {
setTimeout(() => {
res.setHeader("Content-Type", "application/json");
app.get("/api/queries/:id", mockAuthMiddleware, function response(req, res) {
if (req.params.id !== 1) {
setTimeout(() => {
res.sendFile(path.join(__dirname, "./stored-queries/25.json"));
}, LONG_DELAY);
} else {
setTimeout(() => {
res.setHeader("Content-Type", "application/json");

const dice = Math.random();

const dice = Math.random();

if (dice <= 0.1) {
res.status(422);
res.send(ERROR);
} else if (dice > 0.1 && dice <= 0.7) {
res.send(
JSON.stringify({
id: 1,
status: "RUNNING",
progress: Math.floor(Math.random() * 10) / 10,
}),
);
} else if (dice > 0.7 && dice <= 0.75) {
res.send(
JSON.stringify({
id: 1,
status: "FAILED",
error: {
code: "EXAMPLE_ERROR_INTERPOLATED",
context: {
adjective: "easy",
},
if (dice <= 0.1) {
res.status(422);
res.send(ERROR);
} else if (dice > 0.1 && dice <= 0.7) {
res.send(
JSON.stringify({
id: 1,
status: "RUNNING",
progress: Math.floor(Math.random() * 10) / 10,
}),
);
} else if (dice > 0.7 && dice <= 0.75) {
res.send(
JSON.stringify({
id: 1,
status: "FAILED",
error: {
code: "EXAMPLE_ERROR_INTERPOLATED",
context: {
adjective: "easy",
},
}),
);
} else {
res.send(
JSON.stringify({
id: 1,
status: "DONE",
numberOfResults: 5,
resultUrls: [
`/api/results/results.xlsx`,
`/api/results/results.csv`,
],
columnDescriptions: [
{
label: "Money Range",
selectId: null,
type: "MONEY",
},
],
}),
);
}
}, LONG_DELAY);
}
},
);
},
}),
);
} else {
res.send(
JSON.stringify({
id: 1,
status: "DONE",
numberOfResults: 5,
resultUrls: [
`/api/results/results.xlsx`,
`/api/results/results.csv`,
],
columnDescriptions: [
{
label: "Money Range",
selectId: null,
type: "MONEY",
},
],
}),
);
}
}, LONG_DELAY);
}
});

/*
DATASETS
Expand Down Expand Up @@ -212,13 +208,9 @@ module.exports = function (app, port) {
},
);

app.get(
"/api/datasets/:datasetId/concepts/:id",
mockAuthMiddleware,
function response(req, res) {
res.sendFile(path.join(__dirname, `./concepts/${req.params.id}.json`));
},
);
app.get("/api/concepts/:id", mockAuthMiddleware, function response(req, res) {
res.sendFile(path.join(__dirname, `./concepts/${req.params.id}.json`));
});

/*
STORED QUERIES
Expand Down Expand Up @@ -283,7 +275,7 @@ module.exports = function (app, port) {
);

app.patch(
"/api/datasets/:datasetId/queries/:id",
"/api/queries/:id",
mockAuthMiddleware,
function response(req, res) {
setTimeout(() => {
Expand All @@ -293,7 +285,7 @@ module.exports = function (app, port) {
);

app.delete(
"/api/datasets/:datasetId/queries/:id",
"/api/queries/:id",
mockAuthMiddleware,
function response(req, res) {
setTimeout(() => {
Expand Down Expand Up @@ -332,7 +324,7 @@ module.exports = function (app, port) {
);

app.post(
"/api/datasets/:datasetId/concepts/:conceptId/tables/:tableId/filters/:filterId/autocomplete",
"/api/filters/:filterId/autocomplete",
mockAuthMiddleware,
function response(req, res) {
setTimeout(() => {
Expand Down Expand Up @@ -373,7 +365,7 @@ module.exports = function (app, port) {
);

app.post(
"/api/datasets/:datasetId/concepts/:conceptId/resolve",
"/api/concepts/:conceptId/resolve",
mockAuthMiddleware,
function response(req, res) {
setTimeout(() => {
Expand Down Expand Up @@ -405,7 +397,7 @@ module.exports = function (app, port) {
For DND File see ./app/api/dnd
*/
app.post(
"/api/datasets/:datasetId/concepts/:conceptId/tables/:tableId/filters/:filterId/resolve",
"/api/filters/:filterId/resolve",
mockAuthMiddleware,
function response(req, res) {
setTimeout(() => {
Expand Down Expand Up @@ -548,7 +540,7 @@ module.exports = function (app, port) {
);

app.get(
"/api/datasets/:datasetId/form-configs/:id",
"/api/form-configs/:id",
mockAuthMiddleware,
function response(req, res) {
setTimeout(() => {
Expand All @@ -558,7 +550,7 @@ module.exports = function (app, port) {
);

app.patch(
"/api/datasets/:datasetId/form-configs/:id",
"/api/form-configs/:id",
mockAuthMiddleware,
function response(req, res) {
setTimeout(() => {
Expand All @@ -569,7 +561,7 @@ module.exports = function (app, port) {
);

app.delete(
"/api/datasets/:datasetId/form-configs/:id",
"/api/form-configs/:id",
mockAuthMiddleware,
function response(req, res) {
setTimeout(() => {
Expand Down
43 changes: 12 additions & 31 deletions frontend/src/js/button/HistoryButton.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,48 +1,29 @@
import styled from "@emotion/styled";
import { useCallback } from "react";
import { useTranslation } from "react-i18next";
import { useDispatch, useSelector } from "react-redux";
import { useDispatch } from "react-redux";

import type { ColumnDescription } from "../api/types";
import type { StateT } from "../app/reducers";
import { useGetAuthorizedUrl } from "../authorization/useAuthorizedUrl";
import { openHistory, useNewHistorySession } from "../entity-history/actions";
import { openHistory } from "../entity-history/actions";

import IconButton from "./IconButton";

const SxIconButton = styled(IconButton)`
const Button = styled(IconButton)`
white-space: nowrap;
height: 35px;
padding: 5px 12px;
height: 30px;
`;

interface PropsT {
columns: ColumnDescription[];
label: string;
url: string;
}

const HistoryButton = ({ url, label, columns, ...restProps }: PropsT) => {
export const HistoryButton = () => {
const { t } = useTranslation();
const dispatch = useDispatch();
const isLoading = useSelector<StateT, boolean>(
(state) => state.entityHistory.isLoading,
);

const getAuthorizedUrl = useGetAuthorizedUrl();
const newHistorySession = useNewHistorySession();
const onClick = useCallback(() => {
dispatch(openHistory());
}, [dispatch]);

return (
<SxIconButton
icon={isLoading ? "spinner" : "list-ul"}
frame
onClick={async () => {
await newHistorySession(getAuthorizedUrl(url), columns, label);
dispatch(openHistory());
}}
{...restProps}
>
<Button icon="list-ul" frame onClick={onClick}>
{t("history.history")}
</SxIconButton>
</Button>
);
};

export default HistoryButton;
45 changes: 45 additions & 0 deletions frontend/src/js/button/QueryResultHistoryButton.tsx
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,45 @@
import styled from "@emotion/styled";
import { useTranslation } from "react-i18next";
import { useDispatch, useSelector } from "react-redux";

import type { ColumnDescription } from "../api/types";
import type { StateT } from "../app/reducers";
import { useGetAuthorizedUrl } from "../authorization/useAuthorizedUrl";
import { openHistory, useNewHistorySession } from "../entity-history/actions";

import IconButton from "./IconButton";

const SxIconButton = styled(IconButton)`
white-space: nowrap;
height: 35px;
`;

interface PropsT {
columns: ColumnDescription[];
label: string;
url: string;
}

export const QueryResultHistoryButton = ({ url, label, columns }: PropsT) => {
const { t } = useTranslation();
const dispatch = useDispatch();
const isLoading = useSelector<StateT, boolean>(
(state) => state.entityHistory.isLoading,
);

const getAuthorizedUrl = useGetAuthorizedUrl();
const newHistorySession = useNewHistorySession();

return (
<SxIconButton
icon={isLoading ? "spinner" : "list-ul"}
frame
onClick={async () => {
await newHistorySession(getAuthorizedUrl(url), columns, label);
dispatch(openHistory());
}}
>
{t("history.history")}
</SxIconButton>
);
};
15 changes: 8 additions & 7 deletions frontend/src/js/entity-history/History.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -61,6 +61,7 @@ const SidebarBottom = styled("div")`

const Header = styled("div")`
display: flex;
flex-direction: row-reverse;
gap: 15px;
justify-content: space-between;
`;
Expand Down Expand Up @@ -177,6 +178,13 @@ export const History = () => {
<ErrorBoundary FallbackComponent={ErrorFallback}>
<Main>
<Header>
<Controls>
<SxSourcesControl
options={options}
sourcesFilter={sourcesFilter}
setSourcesFilter={setSourcesFilter}
/>
</Controls>
{currentEntityId && (
<EntityHeader
currentEntityIndex={currentEntityIndex}
Expand All @@ -187,13 +195,6 @@ export const History = () => {
entityStatusOptions={entityStatusOptions}
/>
)}
<Controls>
<SxSourcesControl
options={options}
sourcesFilter={sourcesFilter}
setSourcesFilter={setSourcesFilter}
/>
</Controls>
</Header>
<Flex>
<Sidebar>
Expand Down
Loading

0 comments on commit 0e851b0

Please sign in to comment.