feat(medusa,dashboard): Tax settings pages and fixes to list tax rates endpoint (#6606)

**What**
- Adds pages for managing tax settings and tax rates for regions.
- Fixes `list` tax rates endpoint, which was missing pagination, search, order, and filters.

**Note**
The fix to the tax rate list endpoint is very rough, as I have had to reimplement most of the logic from our transformQuery middleware. This is because this endpoints does not follow normal convention for fields and expand and uses string arrays instead of strings separated by commas. Our middleware does not support this, and changing the endpoint to align with other endpoints on the expand and fields params would be a breaking change. Since this is very temporary until 2.0 I think it's okay for the time being.

CLOSES CORE-1654
This commit is contained in:
Kasper Fabricius Kristensen
2024-03-09 14:19:29 +01:00
committed by GitHub
parent 7109969874
commit c2d56ca12b
88 changed files with 3659 additions and 489 deletions

View File

@@ -109,7 +109,7 @@ export const DateFilter = ({
sideOffset={8}
collisionPadding={24}
className={clx(
"bg-ui-bg-base text-ui-fg-base shadow-elevation-flyout max-h-[var(--radix-popper-available-height)] w-[300px] overflow-hidden rounded-lg"
"bg-ui-bg-base text-ui-fg-base shadow-elevation-flyout h-full max-h-[var(--radix-popper-available-height)] w-[300px] overflow-auto rounded-lg"
)}
onInteractOutside={(e) => {
if (e.target instanceof HTMLElement) {

View File

@@ -9,6 +9,7 @@ type DataTableSkeletonProps = {
orderBy: boolean
filterable: boolean
pagination: boolean
layout?: "fit" | "fill"
}
export const DataTableSkeleton = ({
@@ -18,6 +19,7 @@ export const DataTableSkeleton = ({
searchable,
orderBy,
pagination,
layout = "fit",
}: DataTableSkeletonProps) => {
const rows = Array.from({ length: rowCount }, (_, i) => i)
@@ -30,7 +32,11 @@ export const DataTableSkeleton = ({
const colWidth = 100 / colCount
return (
<div>
<div
className={clx({
"flex h-full flex-col overflow-hidden": layout === "fill",
})}
>
{hasToolbar && (
<div className="flex items-center justify-between px-6 py-4">
{filterable && <Skeleton className="h-7 w-full max-w-[160px]" />}
@@ -42,74 +48,91 @@ export const DataTableSkeleton = ({
)}
</div>
)}
<Table>
<Table.Header>
<Table.Row
className={clx({
"border-b-0 [&_th:last-of-type]:w-[1%] [&_th:last-of-type]:whitespace-nowrap":
hasActions,
"[&_th:first-of-type]:w-[1%] [&_th:first-of-type]:whitespace-nowrap":
hasSelect,
<div
className={clx("flex w-full flex-col overflow-hidden", {
"flex flex-1 flex-col": layout === "fill",
})}
>
<div
className={clx("w-full", {
"min-h-0 flex-grow overflow-hidden": layout === "fill",
"overflow-x-auto": layout === "fit",
})}
>
<Table>
<Table.Header>
<Table.Row
className={clx({
"border-b-0 [&_th:last-of-type]:w-[1%] [&_th:last-of-type]:whitespace-nowrap":
hasActions,
"[&_th:first-of-type]:w-[1%] [&_th:first-of-type]:whitespace-nowrap":
hasSelect,
})}
>
{columns.map((col, i) => {
const isSelectHeader = col.id === "select"
const isActionsHeader = col.id === "actions"
const isSpecialHeader = isSelectHeader || isActionsHeader
return (
<Table.HeaderCell
key={i}
style={{
width: !isSpecialHeader ? `${colWidth}%` : undefined,
}}
>
{isActionsHeader ? null : (
<Skeleton
className={clx("h-7", {
"w-7": isSelectHeader,
"w-full": !isSelectHeader,
})}
/>
)}
</Table.HeaderCell>
)
})}
</Table.Row>
</Table.Header>
<Table.Body>
{rows.map((_, j) => (
<Table.Row key={j}>
{columns.map((col, k) => {
const isSpecialCell =
col.id === "select" || col.id === "actions"
return (
<Table.Cell key={k}>
<Skeleton
className={clx("h-7", {
"w-7": isSpecialCell,
"w-full": !isSpecialCell,
})}
/>
</Table.Cell>
)
})}
</Table.Row>
))}
</Table.Body>
</Table>
</div>
{pagination && (
<div
className={clx("flex items-center justify-between p-4", {
"border-t": layout === "fill",
})}
>
{columns.map((col, i) => {
const isSelectHeader = col.id === "select"
const isActionsHeader = col.id === "actions"
const isSpecialHeader = isSelectHeader || isActionsHeader
return (
<Table.HeaderCell
key={i}
style={{
width: !isSpecialHeader ? `${colWidth}%` : undefined,
}}
>
{isActionsHeader ? null : (
<Skeleton
className={clx("h-7", {
"w-7": isSelectHeader,
"w-full": !isSelectHeader,
})}
/>
)}
</Table.HeaderCell>
)
})}
</Table.Row>
</Table.Header>
<Table.Body>
{rows.map((_, j) => (
<Table.Row key={j}>
{columns.map((col, k) => {
const isSpecialCell =
col.id === "select" || col.id === "actions"
return (
<Table.Cell key={k}>
<Skeleton
className={clx("h-7", {
"w-7": isSpecialCell,
"w-full": !isSpecialCell,
})}
/>
</Table.Cell>
)
})}
</Table.Row>
))}
</Table.Body>
</Table>
{pagination && (
<div className="flex items-center justify-between p-4">
<Skeleton className="h-7 w-[138px]" />
<div className="flex items-center gap-x-2">
<Skeleton className="h-7 w-24" />
<Skeleton className="h-7 w-11" />
<Skeleton className="h-7 w-11" />
<Skeleton className="h-7 w-[138px]" />
<div className="flex items-center gap-x-2">
<Skeleton className="h-7 w-24" />
<Skeleton className="h-7 w-11" />
<Skeleton className="h-7 w-11" />
</div>
</div>
</div>
)}
)}
</div>
</div>
)
}

View File

@@ -36,6 +36,7 @@ export const DataTable = <TData,>({
if (isLoading) {
return (
<DataTableSkeleton
layout={layout}
columns={columns}
rowCount={pageSize}
searchable={search}
@@ -52,7 +53,13 @@ export const DataTable = <TData,>({
const noRecords = !isLoading && count === 0 && noQuery
if (noRecords) {
return <NoRecords />
return (
<NoRecords
className={clx({
"flex h-full flex-col overflow-hidden": layout === "fill",
})}
/>
)
}
return (