Merge remote-tracking branch 'origin/master' into feat/automation-naming-ux-updates
This commit is contained in:
commit
35e7dc948d
27 changed files with 164 additions and 172 deletions
72
.github/workflows/release-singleimage-test.yml
vendored
72
.github/workflows/release-singleimage-test.yml
vendored
|
@ -1,72 +0,0 @@
|
||||||
name: Test
|
|
||||||
|
|
||||||
on:
|
|
||||||
workflow_dispatch:
|
|
||||||
|
|
||||||
env:
|
|
||||||
CI: true
|
|
||||||
PERSONAL_ACCESS_TOKEN: ${{ secrets.PERSONAL_ACCESS_TOKEN }}
|
|
||||||
REGISTRY_URL: registry.hub.docker.com
|
|
||||||
NX_CLOUD_ACCESS_TOKEN: ${{ secrets.NX_CLOUD_ACCESS_TOKEN }}
|
|
||||||
jobs:
|
|
||||||
build:
|
|
||||||
name: "build"
|
|
||||||
runs-on: ubuntu-latest
|
|
||||||
strategy:
|
|
||||||
matrix:
|
|
||||||
node-version: [18.x]
|
|
||||||
steps:
|
|
||||||
- name: "Checkout"
|
|
||||||
uses: actions/checkout@v4
|
|
||||||
with:
|
|
||||||
submodules: true
|
|
||||||
token: ${{ secrets.PERSONAL_ACCESS_TOKEN }}
|
|
||||||
|
|
||||||
- name: Use Node.js ${{ matrix.node-version }}
|
|
||||||
uses: actions/setup-node@v3
|
|
||||||
with:
|
|
||||||
node-version: ${{ matrix.node-version }}
|
|
||||||
cache: "yarn"
|
|
||||||
- name: Setup QEMU
|
|
||||||
uses: docker/setup-qemu-action@v3
|
|
||||||
- name: Setup Docker Buildx
|
|
||||||
id: buildx
|
|
||||||
uses: docker/setup-buildx-action@v3
|
|
||||||
- name: Run Yarn
|
|
||||||
run: yarn
|
|
||||||
- name: Run Yarn Build
|
|
||||||
run: yarn build --scope @budibase/server --scope @budibase/worker
|
|
||||||
- name: Login to Docker Hub
|
|
||||||
uses: docker/login-action@v2
|
|
||||||
with:
|
|
||||||
username: ${{ secrets.DOCKER_USERNAME }}
|
|
||||||
password: ${{ secrets.DOCKER_API_KEY }}
|
|
||||||
- name: Get the latest release version
|
|
||||||
id: version
|
|
||||||
run: |
|
|
||||||
release_version=$(cat lerna.json | jq -r '.version')
|
|
||||||
echo $release_version
|
|
||||||
echo "RELEASE_VERSION=$release_version" >> $GITHUB_ENV
|
|
||||||
- name: Tag and release Budibase service docker image
|
|
||||||
uses: docker/build-push-action@v5
|
|
||||||
with:
|
|
||||||
context: .
|
|
||||||
push: true
|
|
||||||
pull: true
|
|
||||||
platforms: linux/amd64,linux/arm64
|
|
||||||
build-args: BUDIBASE_VERSION=0.0.0+test
|
|
||||||
tags: budibase/budibase-test:test
|
|
||||||
file: ./hosting/single/Dockerfile.v2
|
|
||||||
cache-from: type=registry,ref=budibase/budibase-test:test
|
|
||||||
cache-to: type=inline
|
|
||||||
- name: Tag and release Budibase Azure App Service docker image
|
|
||||||
uses: docker/build-push-action@v2
|
|
||||||
with:
|
|
||||||
context: .
|
|
||||||
push: true
|
|
||||||
platforms: linux/amd64
|
|
||||||
build-args: |
|
|
||||||
TARGETBUILD=aas
|
|
||||||
BUDIBASE_VERSION=0.0.0+test
|
|
||||||
tags: budibase/budibase-test:aas
|
|
||||||
file: ./hosting/single/Dockerfile.v2
|
|
|
@ -51,7 +51,7 @@ http {
|
||||||
proxy_buffering off;
|
proxy_buffering off;
|
||||||
|
|
||||||
set $csp_default "default-src 'self'";
|
set $csp_default "default-src 'self'";
|
||||||
set $csp_script "script-src 'self' 'unsafe-inline' 'unsafe-eval' https://*.budibase.net https://cdn.budi.live https://js.intercomcdn.com https://widget.intercom.io";
|
set $csp_script "script-src 'self' 'unsafe-inline' 'unsafe-eval' https://*.budibase.net https://cdn.budi.live https://js.intercomcdn.com https://widget.intercom.io https://d2l5prqdbvm3op.cloudfront.net";
|
||||||
set $csp_style "style-src 'self' 'unsafe-inline' https://cdn.jsdelivr.net https://fonts.googleapis.com https://rsms.me https://maxcdn.bootstrapcdn.com";
|
set $csp_style "style-src 'self' 'unsafe-inline' https://cdn.jsdelivr.net https://fonts.googleapis.com https://rsms.me https://maxcdn.bootstrapcdn.com";
|
||||||
set $csp_object "object-src 'none'";
|
set $csp_object "object-src 'none'";
|
||||||
set $csp_base_uri "base-uri 'self'";
|
set $csp_base_uri "base-uri 'self'";
|
||||||
|
|
|
@ -1,5 +1,5 @@
|
||||||
{
|
{
|
||||||
"version": "2.11.44",
|
"version": "2.11.45",
|
||||||
"npmClient": "yarn",
|
"npmClient": "yarn",
|
||||||
"packages": [
|
"packages": [
|
||||||
"packages/*"
|
"packages/*"
|
||||||
|
|
|
@ -33,7 +33,6 @@
|
||||||
"build:sdk": "lerna run --stream build:sdk",
|
"build:sdk": "lerna run --stream build:sdk",
|
||||||
"deps:circular": "madge packages/server/dist/index.js packages/worker/src/index.ts packages/backend-core/dist/src/index.js packages/cli/src/index.js --circular",
|
"deps:circular": "madge packages/server/dist/index.js packages/worker/src/index.ts packages/backend-core/dist/src/index.js packages/cli/src/index.js --circular",
|
||||||
"release": "lerna publish from-package --yes --force-publish --no-git-tag-version --no-push --no-git-reset",
|
"release": "lerna publish from-package --yes --force-publish --no-git-tag-version --no-push --no-git-reset",
|
||||||
"release:develop": "yarn release --dist-tag develop",
|
|
||||||
"restore": "yarn run clean && yarn && yarn run build",
|
"restore": "yarn run clean && yarn && yarn run build",
|
||||||
"nuke": "yarn run nuke:packages && yarn run nuke:docker",
|
"nuke": "yarn run nuke:packages && yarn run nuke:docker",
|
||||||
"nuke:packages": "yarn run restore",
|
"nuke:packages": "yarn run restore",
|
||||||
|
|
|
@ -2,14 +2,14 @@ import sanitizeUrl from "./utils/sanitizeUrl"
|
||||||
import { Screen } from "./utils/Screen"
|
import { Screen } from "./utils/Screen"
|
||||||
import { Component } from "./utils/Component"
|
import { Component } from "./utils/Component"
|
||||||
|
|
||||||
export default function (datasources) {
|
export default function (datasources, mode = "table") {
|
||||||
if (!Array.isArray(datasources)) {
|
if (!Array.isArray(datasources)) {
|
||||||
return []
|
return []
|
||||||
}
|
}
|
||||||
return datasources.map(datasource => {
|
return datasources.map(datasource => {
|
||||||
return {
|
return {
|
||||||
name: `${datasource.label} - List`,
|
name: `${datasource.label} - List`,
|
||||||
create: () => createScreen(datasource),
|
create: () => createScreen(datasource, mode),
|
||||||
id: ROW_LIST_TEMPLATE,
|
id: ROW_LIST_TEMPLATE,
|
||||||
resourceId: datasource.resourceId,
|
resourceId: datasource.resourceId,
|
||||||
}
|
}
|
||||||
|
@ -40,10 +40,24 @@ const generateTableBlock = datasource => {
|
||||||
return tableBlock
|
return tableBlock
|
||||||
}
|
}
|
||||||
|
|
||||||
const createScreen = datasource => {
|
const generateGridBlock = datasource => {
|
||||||
|
const gridBlock = new Component("@budibase/standard-components/gridblock")
|
||||||
|
gridBlock
|
||||||
|
.customProps({
|
||||||
|
table: datasource,
|
||||||
|
})
|
||||||
|
.instanceName(`${datasource.label} - Grid block`)
|
||||||
|
return gridBlock
|
||||||
|
}
|
||||||
|
|
||||||
|
const createScreen = (datasource, mode) => {
|
||||||
return new Screen()
|
return new Screen()
|
||||||
.route(rowListUrl(datasource))
|
.route(rowListUrl(datasource))
|
||||||
.instanceName(`${datasource.label} - List`)
|
.instanceName(`${datasource.label} - List`)
|
||||||
.addChild(generateTableBlock(datasource))
|
.addChild(
|
||||||
|
mode === "table"
|
||||||
|
? generateTableBlock(datasource)
|
||||||
|
: generateGridBlock(datasource)
|
||||||
|
)
|
||||||
.json()
|
.json()
|
||||||
}
|
}
|
||||||
|
|
|
@ -777,7 +777,8 @@
|
||||||
disabled={deleteColName !== originalName}
|
disabled={deleteColName !== originalName}
|
||||||
>
|
>
|
||||||
<p>
|
<p>
|
||||||
Are you sure you wish to delete the column <b>{originalName}?</b>
|
Are you sure you wish to delete the column
|
||||||
|
<b on:click={() => (deleteColName = originalName)}>{originalName}?</b>
|
||||||
Your data will be deleted and this action cannot be undone - enter the column
|
Your data will be deleted and this action cannot be undone - enter the column
|
||||||
name to confirm.
|
name to confirm.
|
||||||
</p>
|
</p>
|
||||||
|
@ -810,4 +811,11 @@
|
||||||
gap: 8px;
|
gap: 8px;
|
||||||
display: flex;
|
display: flex;
|
||||||
}
|
}
|
||||||
|
b {
|
||||||
|
transition: color 130ms ease-out;
|
||||||
|
}
|
||||||
|
b:hover {
|
||||||
|
cursor: pointer;
|
||||||
|
color: var(--spectrum-global-color-gray-900);
|
||||||
|
}
|
||||||
</style>
|
</style>
|
||||||
|
|
|
@ -196,8 +196,36 @@
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
const validateQuery = async () => {
|
||||||
|
const forbiddenBindings = /{{\s?user(\.(\w|\$)*\s?|\s?)}}/g
|
||||||
|
const bindingError = new Error(
|
||||||
|
"'user' is a protected binding and cannot be used"
|
||||||
|
)
|
||||||
|
|
||||||
|
if (forbiddenBindings.test(url)) {
|
||||||
|
throw bindingError
|
||||||
|
}
|
||||||
|
|
||||||
|
if (forbiddenBindings.test(query.fields.requestBody ?? "")) {
|
||||||
|
throw bindingError
|
||||||
|
}
|
||||||
|
|
||||||
|
Object.values(requestBindings).forEach(bindingValue => {
|
||||||
|
if (forbiddenBindings.test(bindingValue)) {
|
||||||
|
throw bindingError
|
||||||
|
}
|
||||||
|
})
|
||||||
|
|
||||||
|
Object.values(query.fields.headers).forEach(headerValue => {
|
||||||
|
if (forbiddenBindings.test(headerValue)) {
|
||||||
|
throw bindingError
|
||||||
|
}
|
||||||
|
})
|
||||||
|
}
|
||||||
|
|
||||||
async function runQuery() {
|
async function runQuery() {
|
||||||
try {
|
try {
|
||||||
|
await validateQuery()
|
||||||
response = await queries.preview(buildQuery())
|
response = await queries.preview(buildQuery())
|
||||||
if (response.rows.length === 0) {
|
if (response.rows.length === 0) {
|
||||||
notifications.info("Request did not return any data")
|
notifications.info("Request did not return any data")
|
||||||
|
|
|
@ -53,7 +53,8 @@
|
||||||
}
|
}
|
||||||
.alert-wrap {
|
.alert-wrap {
|
||||||
display: flex;
|
display: flex;
|
||||||
width: 100%;
|
flex: 0 0 auto;
|
||||||
|
margin: -28px -40px 14px -40px;
|
||||||
}
|
}
|
||||||
.alert-wrap :global(> *) {
|
.alert-wrap :global(> *) {
|
||||||
flex: 1;
|
flex: 1;
|
||||||
|
|
|
@ -126,7 +126,7 @@
|
||||||
{#if section.visible}
|
{#if section.visible}
|
||||||
<DetailSummary
|
<DetailSummary
|
||||||
name={showSectionTitle ? section.name : ""}
|
name={showSectionTitle ? section.name : ""}
|
||||||
collapsible={false}
|
show={section.collapsed !== true}
|
||||||
>
|
>
|
||||||
{#if section.info}
|
{#if section.info}
|
||||||
<div class="section-info">
|
<div class="section-info">
|
||||||
|
|
|
@ -12,6 +12,7 @@
|
||||||
import { capitalise } from "helpers"
|
import { capitalise } from "helpers"
|
||||||
import { goto } from "@roxi/routify"
|
import { goto } from "@roxi/routify"
|
||||||
|
|
||||||
|
let mode
|
||||||
let pendingScreen
|
let pendingScreen
|
||||||
|
|
||||||
// Modal refs
|
// Modal refs
|
||||||
|
@ -100,14 +101,15 @@
|
||||||
}
|
}
|
||||||
|
|
||||||
// Handler for NewScreenModal
|
// Handler for NewScreenModal
|
||||||
export const show = mode => {
|
export const show = newMode => {
|
||||||
|
mode = newMode
|
||||||
selectedTemplates = null
|
selectedTemplates = null
|
||||||
blankScreenUrl = null
|
blankScreenUrl = null
|
||||||
screenMode = mode
|
screenMode = mode
|
||||||
pendingScreen = null
|
pendingScreen = null
|
||||||
screenAccessRole = Roles.BASIC
|
screenAccessRole = Roles.BASIC
|
||||||
|
|
||||||
if (mode === "table") {
|
if (mode === "table" || mode === "grid") {
|
||||||
datasourceModal.show()
|
datasourceModal.show()
|
||||||
} else if (mode === "blank") {
|
} else if (mode === "blank") {
|
||||||
let templates = getTemplates($tables.list)
|
let templates = getTemplates($tables.list)
|
||||||
|
@ -123,6 +125,7 @@
|
||||||
|
|
||||||
// Handler for DatasourceModal confirmation, move to screen access select
|
// Handler for DatasourceModal confirmation, move to screen access select
|
||||||
const confirmScreenDatasources = async ({ templates }) => {
|
const confirmScreenDatasources = async ({ templates }) => {
|
||||||
|
console.log(templates)
|
||||||
selectedTemplates = templates
|
selectedTemplates = templates
|
||||||
screenAccessRoleModal.show()
|
screenAccessRoleModal.show()
|
||||||
}
|
}
|
||||||
|
@ -177,6 +180,7 @@
|
||||||
|
|
||||||
<Modal bind:this={datasourceModal} autoFocus={false}>
|
<Modal bind:this={datasourceModal} autoFocus={false}>
|
||||||
<DatasourceModal
|
<DatasourceModal
|
||||||
|
{mode}
|
||||||
onConfirm={confirmScreenDatasources}
|
onConfirm={confirmScreenDatasources}
|
||||||
initialScreens={!selectedTemplates ? [] : [...selectedTemplates]}
|
initialScreens={!selectedTemplates ? [] : [...selectedTemplates]}
|
||||||
/>
|
/>
|
||||||
|
|
|
@ -7,6 +7,7 @@
|
||||||
import rowListScreen from "builderStore/store/screenTemplates/rowListScreen"
|
import rowListScreen from "builderStore/store/screenTemplates/rowListScreen"
|
||||||
import DatasourceTemplateRow from "./DatasourceTemplateRow.svelte"
|
import DatasourceTemplateRow from "./DatasourceTemplateRow.svelte"
|
||||||
|
|
||||||
|
export let mode
|
||||||
export let onCancel
|
export let onCancel
|
||||||
export let onConfirm
|
export let onConfirm
|
||||||
export let initialScreens = []
|
export let initialScreens = []
|
||||||
|
@ -24,7 +25,10 @@
|
||||||
screen => screen.resourceId !== resourceId
|
screen => screen.resourceId !== resourceId
|
||||||
)
|
)
|
||||||
} else {
|
} else {
|
||||||
selectedScreens = [...selectedScreens, rowListScreen([datasource])[0]]
|
selectedScreens = [
|
||||||
|
...selectedScreens,
|
||||||
|
rowListScreen([datasource], mode)[0],
|
||||||
|
]
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
Binary file not shown.
After Width: | Height: | Size: 24 KiB |
|
@ -3,6 +3,7 @@
|
||||||
import CreationPage from "components/common/CreationPage.svelte"
|
import CreationPage from "components/common/CreationPage.svelte"
|
||||||
import blankImage from "./blank.png"
|
import blankImage from "./blank.png"
|
||||||
import tableImage from "./table.png"
|
import tableImage from "./table.png"
|
||||||
|
import gridImage from "./grid.png"
|
||||||
import CreateScreenModal from "./CreateScreenModal.svelte"
|
import CreateScreenModal from "./CreateScreenModal.svelte"
|
||||||
import { store } from "builderStore"
|
import { store } from "builderStore"
|
||||||
|
|
||||||
|
@ -43,6 +44,16 @@
|
||||||
<Body size="XS">View, edit and delete rows on a table</Body>
|
<Body size="XS">View, edit and delete rows on a table</Body>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
<div class="card" on:click={() => createScreenModal.show("grid")}>
|
||||||
|
<div class="image">
|
||||||
|
<img alt="" src={gridImage} />
|
||||||
|
</div>
|
||||||
|
<div class="text">
|
||||||
|
<Body size="S">Grid</Body>
|
||||||
|
<Body size="XS">View and manipulate rows on a grid</Body>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</CreationPage>
|
</CreationPage>
|
||||||
</div>
|
</div>
|
||||||
|
|
|
@ -21,6 +21,7 @@
|
||||||
export let invertX = false
|
export let invertX = false
|
||||||
export let invertY = false
|
export let invertY = false
|
||||||
export let contentLines = 1
|
export let contentLines = 1
|
||||||
|
export let hidden = false
|
||||||
|
|
||||||
const emptyError = writable(null)
|
const emptyError = writable(null)
|
||||||
|
|
||||||
|
@ -78,6 +79,7 @@
|
||||||
{focused}
|
{focused}
|
||||||
{selectedUser}
|
{selectedUser}
|
||||||
{readonly}
|
{readonly}
|
||||||
|
{hidden}
|
||||||
error={$error}
|
error={$error}
|
||||||
on:click={() => focusedCellId.set(cellId)}
|
on:click={() => focusedCellId.set(cellId)}
|
||||||
on:contextmenu={e => menu.actions.open(cellId, e)}
|
on:contextmenu={e => menu.actions.open(cellId, e)}
|
||||||
|
|
|
@ -10,6 +10,7 @@
|
||||||
export let defaultHeight = false
|
export let defaultHeight = false
|
||||||
export let center = false
|
export let center = false
|
||||||
export let readonly = false
|
export let readonly = false
|
||||||
|
export let hidden = false
|
||||||
|
|
||||||
$: style = getStyle(width, selectedUser)
|
$: style = getStyle(width, selectedUser)
|
||||||
|
|
||||||
|
@ -30,6 +31,7 @@
|
||||||
class:error
|
class:error
|
||||||
class:center
|
class:center
|
||||||
class:readonly
|
class:readonly
|
||||||
|
class:hidden
|
||||||
class:default-height={defaultHeight}
|
class:default-height={defaultHeight}
|
||||||
class:selected-other={selectedUser != null}
|
class:selected-other={selectedUser != null}
|
||||||
class:alt={rowIdx % 2 === 1}
|
class:alt={rowIdx % 2 === 1}
|
||||||
|
@ -81,6 +83,9 @@
|
||||||
.cell.center {
|
.cell.center {
|
||||||
align-items: center;
|
align-items: center;
|
||||||
}
|
}
|
||||||
|
.cell.hidden {
|
||||||
|
content-visibility: hidden;
|
||||||
|
}
|
||||||
|
|
||||||
/* Cell border */
|
/* Cell border */
|
||||||
.cell.focused:after,
|
.cell.focused:after,
|
||||||
|
|
|
@ -17,7 +17,7 @@
|
||||||
isResizing,
|
isResizing,
|
||||||
rand,
|
rand,
|
||||||
sort,
|
sort,
|
||||||
renderedColumns,
|
visibleColumns,
|
||||||
dispatch,
|
dispatch,
|
||||||
subscribe,
|
subscribe,
|
||||||
config,
|
config,
|
||||||
|
@ -50,7 +50,7 @@
|
||||||
|
|
||||||
$: sortedBy = column.name === $sort.column
|
$: sortedBy = column.name === $sort.column
|
||||||
$: canMoveLeft = orderable && idx > 0
|
$: canMoveLeft = orderable && idx > 0
|
||||||
$: canMoveRight = orderable && idx < $renderedColumns.length - 1
|
$: canMoveRight = orderable && idx < $visibleColumns.length - 1
|
||||||
$: sortingLabels = getSortingLabels(column.schema?.type)
|
$: sortingLabels = getSortingLabels(column.schema?.type)
|
||||||
$: searchable = isColumnSearchable(column)
|
$: searchable = isColumnSearchable(column)
|
||||||
$: resetSearchValue(column.name)
|
$: resetSearchValue(column.name)
|
||||||
|
|
|
@ -7,7 +7,7 @@
|
||||||
const {
|
const {
|
||||||
bounds,
|
bounds,
|
||||||
renderedRows,
|
renderedRows,
|
||||||
renderedColumns,
|
visibleColumns,
|
||||||
rowVerticalInversionIndex,
|
rowVerticalInversionIndex,
|
||||||
hoveredRowId,
|
hoveredRowId,
|
||||||
dispatch,
|
dispatch,
|
||||||
|
@ -17,7 +17,7 @@
|
||||||
|
|
||||||
let body
|
let body
|
||||||
|
|
||||||
$: renderColumnsWidth = $renderedColumns.reduce(
|
$: columnsWidth = $visibleColumns.reduce(
|
||||||
(total, col) => (total += col.width),
|
(total, col) => (total += col.width),
|
||||||
0
|
0
|
||||||
)
|
)
|
||||||
|
@ -47,7 +47,7 @@
|
||||||
<div
|
<div
|
||||||
class="blank"
|
class="blank"
|
||||||
class:highlighted={$hoveredRowId === BlankRowID}
|
class:highlighted={$hoveredRowId === BlankRowID}
|
||||||
style="width:{renderColumnsWidth}px"
|
style="width:{columnsWidth}px"
|
||||||
on:mouseenter={$isDragging ? null : () => ($hoveredRowId = BlankRowID)}
|
on:mouseenter={$isDragging ? null : () => ($hoveredRowId = BlankRowID)}
|
||||||
on:mouseleave={$isDragging ? null : () => ($hoveredRowId = null)}
|
on:mouseleave={$isDragging ? null : () => ($hoveredRowId = null)}
|
||||||
on:click={() => dispatch("add-row-inline")}
|
on:click={() => dispatch("add-row-inline")}
|
||||||
|
|
|
@ -10,7 +10,7 @@
|
||||||
focusedCellId,
|
focusedCellId,
|
||||||
reorder,
|
reorder,
|
||||||
selectedRows,
|
selectedRows,
|
||||||
renderedColumns,
|
visibleColumns,
|
||||||
hoveredRowId,
|
hoveredRowId,
|
||||||
selectedCellMap,
|
selectedCellMap,
|
||||||
focusedRow,
|
focusedRow,
|
||||||
|
@ -19,6 +19,7 @@
|
||||||
isDragging,
|
isDragging,
|
||||||
dispatch,
|
dispatch,
|
||||||
rows,
|
rows,
|
||||||
|
columnRenderMap,
|
||||||
} = getContext("grid")
|
} = getContext("grid")
|
||||||
|
|
||||||
$: rowSelected = !!$selectedRows[row._id]
|
$: rowSelected = !!$selectedRows[row._id]
|
||||||
|
@ -34,7 +35,7 @@
|
||||||
on:mouseleave={$isDragging ? null : () => ($hoveredRowId = null)}
|
on:mouseleave={$isDragging ? null : () => ($hoveredRowId = null)}
|
||||||
on:click={() => dispatch("rowclick", rows.actions.cleanRow(row))}
|
on:click={() => dispatch("rowclick", rows.actions.cleanRow(row))}
|
||||||
>
|
>
|
||||||
{#each $renderedColumns as column, columnIdx (column.name)}
|
{#each $visibleColumns as column, columnIdx}
|
||||||
{@const cellId = `${row._id}-${column.name}`}
|
{@const cellId = `${row._id}-${column.name}`}
|
||||||
<DataCell
|
<DataCell
|
||||||
{cellId}
|
{cellId}
|
||||||
|
@ -51,6 +52,7 @@
|
||||||
selectedUser={$selectedCellMap[cellId]}
|
selectedUser={$selectedCellMap[cellId]}
|
||||||
width={column.width}
|
width={column.width}
|
||||||
contentLines={$contentLines}
|
contentLines={$contentLines}
|
||||||
|
hidden={!$columnRenderMap[column.name]}
|
||||||
/>
|
/>
|
||||||
{/each}
|
{/each}
|
||||||
</div>
|
</div>
|
||||||
|
|
|
@ -11,7 +11,6 @@
|
||||||
maxScrollLeft,
|
maxScrollLeft,
|
||||||
bounds,
|
bounds,
|
||||||
hoveredRowId,
|
hoveredRowId,
|
||||||
hiddenColumnsWidth,
|
|
||||||
menu,
|
menu,
|
||||||
} = getContext("grid")
|
} = getContext("grid")
|
||||||
|
|
||||||
|
@ -23,10 +22,10 @@
|
||||||
let initialTouchX
|
let initialTouchX
|
||||||
let initialTouchY
|
let initialTouchY
|
||||||
|
|
||||||
$: style = generateStyle($scroll, $rowHeight, $hiddenColumnsWidth)
|
$: style = generateStyle($scroll, $rowHeight)
|
||||||
|
|
||||||
const generateStyle = (scroll, rowHeight, hiddenWidths) => {
|
const generateStyle = (scroll, rowHeight) => {
|
||||||
const offsetX = scrollHorizontally ? -1 * scroll.left + hiddenWidths : 0
|
const offsetX = scrollHorizontally ? -1 * scroll.left : 0
|
||||||
const offsetY = scrollVertically ? -1 * (scroll.top % rowHeight) : 0
|
const offsetY = scrollVertically ? -1 * (scroll.top % rowHeight) : 0
|
||||||
return `transform: translate3d(${offsetX}px, ${offsetY}px, 0);`
|
return `transform: translate3d(${offsetX}px, ${offsetY}px, 0);`
|
||||||
}
|
}
|
||||||
|
|
|
@ -5,14 +5,14 @@
|
||||||
import HeaderCell from "../cells/HeaderCell.svelte"
|
import HeaderCell from "../cells/HeaderCell.svelte"
|
||||||
import { TempTooltip, TooltipType } from "@budibase/bbui"
|
import { TempTooltip, TooltipType } from "@budibase/bbui"
|
||||||
|
|
||||||
const { renderedColumns, config, hasNonAutoColumn, datasource, loading } =
|
const { visibleColumns, config, hasNonAutoColumn, datasource, loading } =
|
||||||
getContext("grid")
|
getContext("grid")
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<div class="header">
|
<div class="header">
|
||||||
<GridScrollWrapper scrollHorizontally>
|
<GridScrollWrapper scrollHorizontally>
|
||||||
<div class="row">
|
<div class="row">
|
||||||
{#each $renderedColumns as column, idx}
|
{#each $visibleColumns as column, idx}
|
||||||
<HeaderCell {column} {idx}>
|
<HeaderCell {column} {idx}>
|
||||||
<slot name="edit-column" />
|
<slot name="edit-column" />
|
||||||
</HeaderCell>
|
</HeaderCell>
|
||||||
|
|
|
@ -2,17 +2,16 @@
|
||||||
import { getContext, onMount } from "svelte"
|
import { getContext, onMount } from "svelte"
|
||||||
import { Icon, Popover, clickOutside } from "@budibase/bbui"
|
import { Icon, Popover, clickOutside } from "@budibase/bbui"
|
||||||
|
|
||||||
const { renderedColumns, scroll, hiddenColumnsWidth, width, subscribe } =
|
const { visibleColumns, scroll, width, subscribe } = getContext("grid")
|
||||||
getContext("grid")
|
|
||||||
|
|
||||||
let anchor
|
let anchor
|
||||||
let open = false
|
let open = false
|
||||||
|
|
||||||
$: columnsWidth = $renderedColumns.reduce(
|
$: columnsWidth = $visibleColumns.reduce(
|
||||||
(total, col) => (total += col.width),
|
(total, col) => (total += col.width),
|
||||||
0
|
0
|
||||||
)
|
)
|
||||||
$: end = $hiddenColumnsWidth + columnsWidth - 1 - $scroll.left
|
$: end = columnsWidth - 1 - $scroll.left
|
||||||
$: left = Math.min($width - 40, end)
|
$: left = Math.min($width - 40, end)
|
||||||
|
|
||||||
const close = () => {
|
const close = () => {
|
||||||
|
@ -34,7 +33,7 @@
|
||||||
<Popover
|
<Popover
|
||||||
bind:open
|
bind:open
|
||||||
{anchor}
|
{anchor}
|
||||||
align={$renderedColumns.length ? "right" : "left"}
|
align={$visibleColumns.length ? "right" : "left"}
|
||||||
offset={0}
|
offset={0}
|
||||||
popoverTarget={document.getElementById(`add-column-button`)}
|
popoverTarget={document.getElementById(`add-column-button`)}
|
||||||
customZindex={100}
|
customZindex={100}
|
||||||
|
|
|
@ -20,7 +20,7 @@
|
||||||
datasource,
|
datasource,
|
||||||
subscribe,
|
subscribe,
|
||||||
renderedRows,
|
renderedRows,
|
||||||
renderedColumns,
|
visibleColumns,
|
||||||
rowHeight,
|
rowHeight,
|
||||||
hasNextPage,
|
hasNextPage,
|
||||||
maxScrollTop,
|
maxScrollTop,
|
||||||
|
@ -31,6 +31,7 @@
|
||||||
refreshing,
|
refreshing,
|
||||||
config,
|
config,
|
||||||
filter,
|
filter,
|
||||||
|
columnRenderMap,
|
||||||
} = getContext("grid")
|
} = getContext("grid")
|
||||||
|
|
||||||
let visible = false
|
let visible = false
|
||||||
|
@ -38,7 +39,7 @@
|
||||||
let newRow
|
let newRow
|
||||||
let offset = 0
|
let offset = 0
|
||||||
|
|
||||||
$: firstColumn = $stickyColumn || $renderedColumns[0]
|
$: firstColumn = $stickyColumn || $visibleColumns[0]
|
||||||
$: width = GutterWidth + ($stickyColumn?.width || 0)
|
$: width = GutterWidth + ($stickyColumn?.width || 0)
|
||||||
$: $datasource, (visible = false)
|
$: $datasource, (visible = false)
|
||||||
$: invertY = shouldInvertY(offset, $rowVerticalInversionIndex, $renderedRows)
|
$: invertY = shouldInvertY(offset, $rowVerticalInversionIndex, $renderedRows)
|
||||||
|
@ -211,29 +212,28 @@
|
||||||
<div class="normal-columns" transition:fade|local={{ duration: 130 }}>
|
<div class="normal-columns" transition:fade|local={{ duration: 130 }}>
|
||||||
<GridScrollWrapper scrollHorizontally attachHandlers>
|
<GridScrollWrapper scrollHorizontally attachHandlers>
|
||||||
<div class="row">
|
<div class="row">
|
||||||
{#each $renderedColumns as column, columnIdx}
|
{#each $visibleColumns as column, columnIdx}
|
||||||
{@const cellId = `new-${column.name}`}
|
{@const cellId = `new-${column.name}`}
|
||||||
{#key cellId}
|
<DataCell
|
||||||
<DataCell
|
{cellId}
|
||||||
{cellId}
|
{column}
|
||||||
{column}
|
{updateValue}
|
||||||
{updateValue}
|
rowFocused
|
||||||
rowFocused
|
row={newRow}
|
||||||
row={newRow}
|
focused={$focusedCellId === cellId}
|
||||||
focused={$focusedCellId === cellId}
|
width={column.width}
|
||||||
width={column.width}
|
topRow={offset === 0}
|
||||||
topRow={offset === 0}
|
invertX={columnIdx >= $columnHorizontalInversionIndex}
|
||||||
invertX={columnIdx >= $columnHorizontalInversionIndex}
|
{invertY}
|
||||||
{invertY}
|
hidden={!$columnRenderMap[column.name]}
|
||||||
>
|
>
|
||||||
{#if column?.schema?.autocolumn}
|
{#if column?.schema?.autocolumn}
|
||||||
<div class="readonly-overlay">Can't edit auto column</div>
|
<div class="readonly-overlay">Can't edit auto column</div>
|
||||||
{/if}
|
{/if}
|
||||||
{#if isAdding}
|
{#if isAdding}
|
||||||
<div in:fade={{ duration: 130 }} class="loading-overlay" />
|
<div in:fade={{ duration: 130 }} class="loading-overlay" />
|
||||||
{/if}
|
{/if}
|
||||||
</DataCell>
|
</DataCell>
|
||||||
{/key}
|
|
||||||
{/each}
|
{/each}
|
||||||
</div>
|
</div>
|
||||||
</GridScrollWrapper>
|
</GridScrollWrapper>
|
||||||
|
|
|
@ -2,7 +2,7 @@
|
||||||
import { getContext } from "svelte"
|
import { getContext } from "svelte"
|
||||||
import { GutterWidth } from "../lib/constants"
|
import { GutterWidth } from "../lib/constants"
|
||||||
|
|
||||||
const { resize, renderedColumns, stickyColumn, isReordering, scrollLeft } =
|
const { resize, visibleColumns, stickyColumn, isReordering, scrollLeft } =
|
||||||
getContext("grid")
|
getContext("grid")
|
||||||
|
|
||||||
$: offset = GutterWidth + ($stickyColumn?.width || 0)
|
$: offset = GutterWidth + ($stickyColumn?.width || 0)
|
||||||
|
@ -26,7 +26,7 @@
|
||||||
<div class="resize-indicator" />
|
<div class="resize-indicator" />
|
||||||
</div>
|
</div>
|
||||||
{/if}
|
{/if}
|
||||||
{#each $renderedColumns as column}
|
{#each $visibleColumns as column}
|
||||||
<div
|
<div
|
||||||
class="resize-slider"
|
class="resize-slider"
|
||||||
class:visible={activeColumn === column.name}
|
class:visible={activeColumn === column.name}
|
||||||
|
|
|
@ -1,4 +1,4 @@
|
||||||
import { derived, get } from "svelte/store"
|
import { derived } from "svelte/store"
|
||||||
import {
|
import {
|
||||||
MaxCellRenderHeight,
|
MaxCellRenderHeight,
|
||||||
MaxCellRenderWidthOverflow,
|
MaxCellRenderWidthOverflow,
|
||||||
|
@ -50,12 +50,11 @@ export const deriveStores = context => {
|
||||||
const interval = MinColumnWidth
|
const interval = MinColumnWidth
|
||||||
return Math.round($scrollLeft / interval) * interval
|
return Math.round($scrollLeft / interval) * interval
|
||||||
})
|
})
|
||||||
const renderedColumns = derived(
|
const columnRenderMap = derived(
|
||||||
[visibleColumns, scrollLeftRounded, width],
|
[visibleColumns, scrollLeftRounded, width],
|
||||||
([$visibleColumns, $scrollLeft, $width], set) => {
|
([$visibleColumns, $scrollLeft, $width]) => {
|
||||||
if (!$visibleColumns.length) {
|
if (!$visibleColumns.length) {
|
||||||
set([])
|
return {}
|
||||||
return
|
|
||||||
}
|
}
|
||||||
let startColIdx = 0
|
let startColIdx = 0
|
||||||
let rightEdge = $visibleColumns[0].width
|
let rightEdge = $visibleColumns[0].width
|
||||||
|
@ -75,34 +74,16 @@ export const deriveStores = context => {
|
||||||
leftEdge += $visibleColumns[endColIdx].width
|
leftEdge += $visibleColumns[endColIdx].width
|
||||||
endColIdx++
|
endColIdx++
|
||||||
}
|
}
|
||||||
// Render an additional column on either side to account for
|
|
||||||
// debounce column updates based on scroll position
|
|
||||||
const next = $visibleColumns.slice(
|
|
||||||
Math.max(0, startColIdx - 1),
|
|
||||||
endColIdx + 1
|
|
||||||
)
|
|
||||||
const current = get(renderedColumns)
|
|
||||||
if (JSON.stringify(next) !== JSON.stringify(current)) {
|
|
||||||
set(next)
|
|
||||||
}
|
|
||||||
}
|
|
||||||
)
|
|
||||||
|
|
||||||
const hiddenColumnsWidth = derived(
|
// Only update the store if different
|
||||||
[renderedColumns, visibleColumns],
|
let next = {}
|
||||||
([$renderedColumns, $visibleColumns]) => {
|
$visibleColumns
|
||||||
const idx = $visibleColumns.findIndex(
|
.slice(Math.max(0, startColIdx), endColIdx)
|
||||||
col => col.name === $renderedColumns[0]?.name
|
.forEach(col => {
|
||||||
)
|
next[col.name] = true
|
||||||
let width = 0
|
})
|
||||||
if (idx > 0) {
|
return next
|
||||||
for (let i = 0; i < idx; i++) {
|
}
|
||||||
width += $visibleColumns[i].width
|
|
||||||
}
|
|
||||||
}
|
|
||||||
return width
|
|
||||||
},
|
|
||||||
0
|
|
||||||
)
|
)
|
||||||
|
|
||||||
// Determine the row index at which we should start vertically inverting cell
|
// Determine the row index at which we should start vertically inverting cell
|
||||||
|
@ -130,12 +111,12 @@ export const deriveStores = context => {
|
||||||
// Determine the column index at which we should start horizontally inverting
|
// Determine the column index at which we should start horizontally inverting
|
||||||
// cell dropdowns
|
// cell dropdowns
|
||||||
const columnHorizontalInversionIndex = derived(
|
const columnHorizontalInversionIndex = derived(
|
||||||
[renderedColumns, scrollLeft, width],
|
[visibleColumns, scrollLeft, width],
|
||||||
([$renderedColumns, $scrollLeft, $width]) => {
|
([$visibleColumns, $scrollLeft, $width]) => {
|
||||||
const cutoff = $width + $scrollLeft - ScrollBarSize * 3
|
const cutoff = $width + $scrollLeft - ScrollBarSize * 3
|
||||||
let inversionIdx = $renderedColumns.length
|
let inversionIdx = $visibleColumns.length
|
||||||
for (let i = $renderedColumns.length - 1; i >= 0; i--, inversionIdx--) {
|
for (let i = $visibleColumns.length - 1; i >= 0; i--, inversionIdx--) {
|
||||||
const rightEdge = $renderedColumns[i].left + $renderedColumns[i].width
|
const rightEdge = $visibleColumns[i].left + $visibleColumns[i].width
|
||||||
if (rightEdge + MaxCellRenderWidthOverflow <= cutoff) {
|
if (rightEdge + MaxCellRenderWidthOverflow <= cutoff) {
|
||||||
break
|
break
|
||||||
}
|
}
|
||||||
|
@ -148,8 +129,7 @@ export const deriveStores = context => {
|
||||||
scrolledRowCount,
|
scrolledRowCount,
|
||||||
visualRowCapacity,
|
visualRowCapacity,
|
||||||
renderedRows,
|
renderedRows,
|
||||||
renderedColumns,
|
columnRenderMap,
|
||||||
hiddenColumnsWidth,
|
|
||||||
rowVerticalInversionIndex,
|
rowVerticalInversionIndex,
|
||||||
columnHorizontalInversionIndex,
|
columnHorizontalInversionIndex,
|
||||||
}
|
}
|
||||||
|
|
|
@ -44,7 +44,7 @@ RUN chmod +x ./scripts/removeWorkspaceDependencies.sh
|
||||||
WORKDIR /string-templates
|
WORKDIR /string-templates
|
||||||
COPY packages/string-templates/package.json package.json
|
COPY packages/string-templates/package.json package.json
|
||||||
RUN ../scripts/removeWorkspaceDependencies.sh package.json
|
RUN ../scripts/removeWorkspaceDependencies.sh package.json
|
||||||
RUN --mount=type=cache,target=/root/.yarn YARN_CACHE_FOLDER=/root/.yarn yarn install --production=true
|
RUN --mount=type=cache,target=/root/.yarn YARN_CACHE_FOLDER=/root/.yarn yarn install --production=true --network-timeout 1000000
|
||||||
COPY packages/string-templates .
|
COPY packages/string-templates .
|
||||||
|
|
||||||
|
|
||||||
|
@ -57,7 +57,7 @@ COPY scripts/removeWorkspaceDependencies.sh scripts/removeWorkspaceDependencies.
|
||||||
RUN chmod +x ./scripts/removeWorkspaceDependencies.sh
|
RUN chmod +x ./scripts/removeWorkspaceDependencies.sh
|
||||||
RUN ./scripts/removeWorkspaceDependencies.sh package.json
|
RUN ./scripts/removeWorkspaceDependencies.sh package.json
|
||||||
|
|
||||||
RUN --mount=type=cache,target=/root/.yarn YARN_CACHE_FOLDER=/root/.yarn yarn install --production=true \
|
RUN --mount=type=cache,target=/root/.yarn YARN_CACHE_FOLDER=/root/.yarn yarn install --production=true --network-timeout 1000000 \
|
||||||
# Remove unneeded data from file system to reduce image size
|
# Remove unneeded data from file system to reduce image size
|
||||||
&& yarn cache clean && apt-get remove -y --purge --auto-remove g++ make python jq \
|
&& yarn cache clean && apt-get remove -y --purge --auto-remove g++ make python jq \
|
||||||
&& rm -rf /tmp/* /root/.node-gyp /usr/local/lib/node_modules/npm/node_modules/node-gyp
|
&& rm -rf /tmp/* /root/.node-gyp /usr/local/lib/node_modules/npm/node_modules/node-gyp
|
||||||
|
|
|
@ -19,7 +19,7 @@ RUN chmod +x ./scripts/removeWorkspaceDependencies.sh
|
||||||
WORKDIR /string-templates
|
WORKDIR /string-templates
|
||||||
COPY packages/string-templates/package.json package.json
|
COPY packages/string-templates/package.json package.json
|
||||||
RUN ../scripts/removeWorkspaceDependencies.sh package.json
|
RUN ../scripts/removeWorkspaceDependencies.sh package.json
|
||||||
RUN --mount=type=cache,target=/root/.yarn YARN_CACHE_FOLDER=/root/.yarn yarn install --production=true
|
RUN --mount=type=cache,target=/root/.yarn YARN_CACHE_FOLDER=/root/.yarn yarn install --production=true --network-timeout 1000000
|
||||||
COPY packages/string-templates .
|
COPY packages/string-templates .
|
||||||
|
|
||||||
|
|
||||||
|
@ -30,7 +30,7 @@ RUN cd ../string-templates && yarn link && cd - && yarn link @budibase/string-te
|
||||||
|
|
||||||
RUN ../scripts/removeWorkspaceDependencies.sh package.json
|
RUN ../scripts/removeWorkspaceDependencies.sh package.json
|
||||||
|
|
||||||
RUN --mount=type=cache,target=/root/.yarn YARN_CACHE_FOLDER=/root/.yarn yarn install --production=true
|
RUN --mount=type=cache,target=/root/.yarn YARN_CACHE_FOLDER=/root/.yarn yarn install --production=true --network-timeout 1000000
|
||||||
# Remove unneeded data from file system to reduce image size
|
# Remove unneeded data from file system to reduce image size
|
||||||
RUN apk del .gyp \
|
RUN apk del .gyp \
|
||||||
&& yarn cache clean
|
&& yarn cache clean
|
||||||
|
|
8
scripts/updateWorkspaceVersions.V2.sh
Executable file
8
scripts/updateWorkspaceVersions.V2.sh
Executable file
|
@ -0,0 +1,8 @@
|
||||||
|
#!/bin/bash
|
||||||
|
version=$1
|
||||||
|
echo "Setting version $version"
|
||||||
|
yarn lerna exec "yarn version --no-git-tag-version --new-version=$version"
|
||||||
|
echo "Updating dependencies"
|
||||||
|
node scripts/syncLocalDependencies.js $version
|
||||||
|
echo "Syncing yarn workspace"
|
||||||
|
yarn
|
Loading…
Reference in a new issue