Skip to content

Commit 5c48c00

Browse files
bogdan-tsbogdan-ts
committed
Merge branch 'consulting-ui-polishing' into 'master'
Consulting section UI polishing See merge request postgres-ai/database-lab!970
2 parents 3851492 + 4fc3aa6 commit 5c48c00

File tree

3 files changed

+84
-69
lines changed

3 files changed

+84
-69
lines changed

‎ui/packages/platform/src/pages/Consulting/TransactionsTable/TransactionsTable.tsx‎

Lines changed: 42 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,42 @@
1+
import React from "react";
2+
import { Paper, Table, TableBody, TableCell, TableContainer, TableHead, TableRow } from "@mui/material";
3+
import { Transaction } from "stores/consulting";
4+
import { formatPostgresInterval } from "../utils";
5+
import { Link } from "@postgres.ai/shared/components/Link2";
6+
7+
8+
type TransactionsTableProps = {
9+
transactions: Transaction[],
10+
alias: string
11+
}
12+
13+
export const TransactionsTable = ({ transactions, alias }: TransactionsTableProps) => (
14+
<TableContainer component={Paper} sx={{ mt: 1 }}>
15+
<Table>
16+
<TableHead>
17+
<TableRow>
18+
<TableCell>Action</TableCell>
19+
<TableCell>Amount</TableCell>
20+
<TableCell>Date</TableCell>
21+
<TableCell>Details</TableCell>
22+
</TableRow>
23+
</TableHead>
24+
<TableBody>
25+
{transactions.map(({ amount, created_at, issue_id, description, id }: Transaction) => (
26+
<TableRow key={id}>
27+
<TableCell sx={{ whiteSpace: 'nowrap' }}>{amount.charAt(0) === '-' ? 'Utilize' : 'Replenish'}</TableCell>
28+
<TableCell sx={{ whiteSpace: 'nowrap' }}>{formatPostgresInterval(amount || '00')}</TableCell>
29+
<TableCell sx={{ whiteSpace: 'nowrap' }}>{new Date(created_at)?.toISOString()?.split('T')?.[0]}</TableCell>
30+
<TableCell>
31+
{issue_id ? (
32+
<Link external to={`https://gitlab.com/postgres-ai/postgresql-consulting/support/${alias}/-/issues/${issue_id}`} target="_blank">
33+
{description}
34+
</Link>
35+
) : description}
36+
</TableCell>
37+
</TableRow>
38+
))}
39+
</TableBody>
40+
</Table>
41+
</TableContainer>
42+
);

‎ui/packages/platform/src/pages/Consulting/index.tsx‎

Lines changed: 41 additions & 68 deletions
Original file line numberDiff line numberDiff line change
@@ -1,12 +1,7 @@
11
import React, { useEffect } from "react";
22
import ConsolePageTitle from "../../components/ConsolePageTitle";
3-
import Table from '@mui/material/Table';
4-
import TableBody from '@mui/material/TableBody';
5-
import TableCell from '@mui/material/TableCell';
6-
import TableContainer from '@mui/material/TableContainer';
7-
import TableHead from '@mui/material/TableHead';
8-
import TableRow from '@mui/material/TableRow';
9-
import { Grid, Paper, Typography } from "@mui/material";
3+
import Alert from "@mui/material/Alert";
4+
import { Grid, Typography } from "@mui/material";
105
import Button from "@mui/material/Button";
116
import Box from "@mui/material/Box/Box";
127
import { observer } from "mobx-react-lite";
@@ -16,11 +11,9 @@ import { makeStyles } from "@material-ui/core";
1611
import { PageSpinner } from "@postgres.ai/shared/components/PageSpinner";
1712
import { ProductCardWrapper } from "../../components/ProductCard/ProductCardWrapper";
1813
import { Link } from "@postgres.ai/shared/components/Link2";
19-
import Permissions from "../../utils/permissions";
20-
import { WarningWrapper } from "../../components/Warning/WarningWrapper";
21-
import { messages } from "../../assets/messages";
2214
import { ConsoleBreadcrumbsWrapper } from "../../components/ConsoleBreadcrumbs/ConsoleBreadcrumbsWrapper";
2315
import { formatPostgresInterval } from "./utils";
16+
import { TransactionsTable } from "./TransactionsTable/TransactionsTable";
2417

2518

2619

@@ -88,16 +81,6 @@ export const Consulting = observer((props: ConsultingWrapperProps) => {
8881
)
8982
}
9083

91-
if (orgData === null || !Permissions.isAdmin(orgData)) {
92-
return (
93-
<Box>
94-
{breadcrumbs}
95-
<ConsolePageTitle title={"Consulting"} />
96-
<WarningWrapper>{messages.noPermissionPage}</WarningWrapper>
97-
</Box>
98-
)
99-
}
100-
10184
if (orgData.consulting_type === null) {
10285
return (
10386
<Box>
@@ -132,19 +115,11 @@ export const Consulting = observer((props: ConsultingWrapperProps) => {
132115
{breadcrumbs}
133116
<ConsolePageTitle title={"Consulting"} />
134117
<Grid container spacing={3}>
135-
{orgData.consulting_type === 'retainer' && <Grid item xs={12} md={8}>
136-
<Typography variant="h6" classes={{root: classes.sectionLabel}}>
137-
Retainer balance:
138-
</Typography>
139-
<Typography variant="h5" sx={{ marginTop: 1}}>
140-
{formatPostgresInterval(consultingStore.orgBalance?.[0]?.balance || '00') || 0}
141-
</Typography>
142-
</Grid>}
143118
<Grid item xs={12} md={8}>
144119
<Box>
145-
<Button variant="contained" component="a" href="https://buy.stripe.com/7sI5odeXt3tB0Eg3cm" target="_blank">
146-
Replenish consulting hours
147-
</Button>
120+
<Typography variant="body1" sx={{ fontSize: 14 }}>
121+
Thank you for choosing Postgres.AI as your PostgreSQL consulting partner. Your plan: {orgData.consulting_type.toUpperCase()}.
122+
</Typography>
148123
</Box>
149124
</Grid>
150125
<Grid item xs={12} md={8}>
@@ -172,6 +147,37 @@ export const Consulting = observer((props: ConsultingWrapperProps) => {
172147
</Box>
173148
</Grid>
174149
<Grid item xs={12} md={8}>
150+
<Box>
151+
<Typography variant="h6" classes={{root: classes.sectionLabel}}>
152+
Email:
153+
</Typography>
154+
<Typography variant="body1" sx={{ marginTop: 1, fontSize: 14}}>
155+
<Link to={`mailto:consulting@postgres.ai`} external target="_blank">
156+
consulting@postgres.ai
157+
</Link>
158+
</Typography>
159+
</Box>
160+
</Grid>
161+
{consultingStore.orgBalance?.[0]?.balance?.charAt(0) === '-' && <Grid item xs={12} md={8}>
162+
<Alert severity="warning">Consulting hours overdrawn</Alert>
163+
</Grid>}
164+
{orgData.consulting_type === 'retainer' && <Grid item xs={12} md={8}>
165+
<Typography variant="h6" classes={{root: classes.sectionLabel}}>
166+
Retainer balance:
167+
</Typography>
168+
<Typography variant="h5" sx={{ marginTop: 1}}>
169+
{formatPostgresInterval(consultingStore.orgBalance?.[0]?.balance || '00') || 0}
170+
</Typography>
171+
</Grid>}
172+
{orgData.consulting_type === 'retainer' && <Grid item xs={12} md={8}>
173+
<Box>
174+
<Button variant="contained" component="a" href="https://buy.stripe.com/7sI5odeXt3tB0Eg3cm" target="_blank">
175+
Replenish consulting hours
176+
</Button>
177+
</Box>
178+
</Grid>}
179+
180+
{orgData.consulting_type === 'retainer' && <Grid item xs={12} md={8}>
175181
<Typography variant="h6" classes={{root: classes.sectionLabel}}>
176182
Activity:
177183
</Typography>
@@ -180,44 +186,11 @@ export const Consulting = observer((props: ConsultingWrapperProps) => {
180186
? <Typography variant="body1" sx={{ marginTop: 1}}>
181187
No activity yet
182188
</Typography>
183-
: <TableContainer component={Paper} sx={{ marginTop: 1}}>
184-
<Table>
185-
<TableHead>
186-
<TableRow>
187-
<TableCell>Action</TableCell>
188-
<TableCell>Amount</TableCell>
189-
<TableCell>Date</TableCell>
190-
<TableCell>Details</TableCell>
191-
</TableRow>
192-
</TableHead>
193-
<TableBody>
194-
{
195-
consultingStore.transactions.map((transaction, index) => {
196-
return (
197-
<TableRow key={index}>
198-
<TableCell sx={{whiteSpace: 'nowrap'}}>{transaction.amount.charAt(0) === '-' ? 'Utilize' : 'Replenish'}</TableCell>
199-
<TableCell sx={{color: transaction.amount.charAt(0) === '-' ? 'red' : 'green', whiteSpace: 'nowrap'}}>
200-
{formatPostgresInterval(transaction.amount || '00')}
201-
</TableCell>
202-
<TableCell sx={{whiteSpace: 'nowrap'}}>{new Date(transaction.created_at)?.toISOString()?.split('T')?.[0]}</TableCell>
203-
<TableCell>
204-
{transaction.issue_id
205-
? <Link external to={`https://gitlab.com/postgres-ai/postgresql-consulting/support/${orgData.alias}/-/issues/${transaction.issue_id}`} target="_blank">
206-
{transaction.description}
207-
</Link>
208-
: transaction.description
209-
}
210-
</TableCell>
211-
</TableRow>
212-
);
213-
})
214-
}
215-
</TableBody>
216-
</Table>
217-
</TableContainer>
189+
: <TransactionsTable transactions={consultingStore.transactions} alias={orgData.alias} />
218190
}
219-
</Grid>
191+
</Grid>}
220192
</Grid>
221193
</div>
222194
);
223-
});
195+
});
196+

‎ui/packages/platform/src/stores/consulting.ts‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,7 @@ import { request } from "../helpers/request";
33

44
const apiServer = process.env.REACT_APP_API_URL_PREFIX || '';
55

6-
interface Transaction {
6+
export interface Transaction {
77
id: string;
88
org_id: number;
99
issue_id: number;

0 commit comments

Comments
 (0)