Skip to content

Navigation Menu

Sign in
Appearance settings

Search code, repositories, users, issues, pull requests...

Provide feedback

We read every piece of feedback, and take your input very seriously.

Saved searches

Use saved searches to filter your results more quickly
Sign up
Appearance settings

Commit 5c48c00

Browse files
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
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+
exportinterface Transaction {
77
id: string;
88
org_id: number;
99
issue_id: number;

0 commit comments

Comments
(0)

AltStyle によって変換されたページ (->オリジナル) /