Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

feat: adding permissions to core actions and disabling on Hero #574

Merged
merged 11 commits into from
Aug 28, 2024
+188 −74
Merged

feat: adding permissions to core actions and disabling on Hero #574

Show file tree
Hide file tree
Changes from 3 commits
Commits
Show all changes
11 commits
Select commit Hold shift + click to select a range
cae5bd5
feat: adding permissions to core actions and disabling on Hero
xaviemirmon Aug 21, 2024
dd443d2
fix: moving drag permission logic to dropzone
xaviemirmon Aug 21, 2024
7180587
fix: tweaking styles for actionBar and disabled drag
xaviemirmon Aug 22, 2024
c5bdea9
fix: actionBar styling
xaviemirmon Aug 22, 2024
8954b94
fix: adding insert and edit permissions
xaviemirmon Aug 22, 2024
9a4ff7b
Removing unused library
xaviemirmon Aug 22, 2024
520ada1
fix: moving context to ComponentList
xaviemirmon Aug 23, 2024
c84b3c6
fix: renaming API variable to "item," adding disabled state for drawe…
xaviemirmon Aug 27, 2024
4be9ef3
fix: moved location of usePuck due to linting errors
xaviemirmon Aug 27, 2024
ac90fef
fix: intermittent history error due to usePuck placement
xaviemirmon Aug 27, 2024
3b6d51c
fix: adding default object prop to get permissions and fixing weird t…
xaviemirmon Aug 27, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
3 changes: 3 additions & 0 deletions apps/demo/app/custom-ui/[...puckPath]/client.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -314,6 +314,9 @@ export function Client({ path, isEdit }: { path: string; isEdit: boolean }) {
...config.components.Hero,
permissions: {
debug: false,
drag: false,
delete: false,
duplicate: false,
chrisvxd marked this conversation as resolved.
Show resolved Hide resolved
},
},
},
Expand Down
8 changes: 5 additions & 3 deletions packages/core/components/ActionBar/styles.module.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -9,6 +9,10 @@
color: var(--puck-color-white);
font-family: var(--puck-font-family);
gap: 4px;
justify-content: center;
align-items: center;
min-height: 26px;
border-left: 0.5px solid var(--puck-color-grey-05); /* Fractional value required due to scaling */
xaviemirmon marked this conversation as resolved.
Show resolved Hide resolved
}

.ActionBarComponent-actionsLabel {
Expand All @@ -19,9 +23,7 @@
justify-content: center;
align-items: center;
padding-left: 8px;
padding-right: 16px;
margin-right: 8px;
border-right: 0.5px solid var(--puck-color-grey-05); /* Fractional value required due to scaling */
padding-right: 8px;
text-overflow: ellipsis;
white-space: nowrap;
}
Expand Down
37 changes: 29 additions & 8 deletions packages/core/components/DraggableComponent/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -18,6 +18,7 @@ import { Loader } from "../Loader";
import { ActionBar } from "../ActionBar";
import { DefaultOverride } from "../DefaultOverride";
import { useLoadedOverrides } from "../../lib/use-loaded-overrides";
import { getPermissions } from "../../lib/get-permissions";
chrisvxd marked this conversation as resolved.
Show resolved Hide resolved

const getClassName = getClassNameFactory("DraggableComponent", styles);

Expand Down Expand Up @@ -82,7 +83,15 @@ export const DraggableComponent = ({
indicativeHover?: boolean;
style?: CSSProperties;
}) => {
const { zoomConfig, status, overrides, plugins } = useAppContext();
const {
zoomConfig,
status,
overrides,
plugins,
selectedItem,
config,
globalPermissions,
} = useAppContext();
const isModifierHeld = useModifierHeld("Alt");

const El = status !== "LOADING" ? Draggable : DefaultDraggable;
Expand All @@ -109,6 +118,14 @@ export const DraggableComponent = ({
[loadedOverrides]
);

const permissions =
selectedItem &&
getPermissions({
selectedItem,
globalPermissions: globalPermissions || {},
config,
});

return (
<El
key={id}
Expand All @@ -133,7 +150,7 @@ export const DraggableComponent = ({
style={{
...style,
...provided.draggableProps.style,
cursor: isModifierHeld ? "initial" : "grab",
cursor: isModifierHeld || isDragDisabled ? "initial" : "grab",
}}
onMouseOver={onMouseOver}
onMouseOut={onMouseOut}
Expand Down Expand Up @@ -163,12 +180,16 @@ export const DraggableComponent = ({
}}
>
<CustomActionBar label={label}>
xaviemirmon marked this conversation as resolved.
Show resolved Hide resolved
<ActionBar.Action onClick={onDuplicate} label="Duplicate">
<Copy size={16} />
</ActionBar.Action>
<ActionBar.Action onClick={onDelete} label="Delete">
<Trash size={16} />
</ActionBar.Action>
{permissions && permissions.duplicate && (
<ActionBar.Action onClick={onDuplicate} label="Duplicate">
<Copy size={16} />
</ActionBar.Action>
)}
{permissions && permissions.delete && (
<ActionBar.Action onClick={onDelete} label="Delete">
<Trash size={16} />
</ActionBar.Action>
)}
</CustomActionBar>
</div>
</div>
Expand Down
11 changes: 11 additions & 0 deletions packages/core/components/DropZone/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -11,6 +11,7 @@ import { getZoneId } from "../../lib/get-zone-id";
import { useAppContext } from "../Puck/context";
import { DropZoneProps } from "./types";
import { ComponentConfig, PuckContext } from "../../types/Config";
import { getPermissions } from "../../lib/get-permissions";

const getClassName = getClassNameFactory("DropZone", styles);

Expand Down Expand Up @@ -237,6 +238,15 @@ function DropZoneEdit({ zone, allow, disallow, style }: DropZoneProps) {
const label =
componentConfig?.["label"] ?? item.type.toString();

const canDrag = getPermissions({
selectedItem: getItem(
{ index: i, zone: zoneCompound },
appContext.state.data
),
config: appContext.config,
globalPermissions: appContext.globalPermissions || {},
}).drag;

return (
<div
key={item.props.id}
Expand All @@ -258,6 +268,7 @@ function DropZoneEdit({ zone, allow, disallow, style }: DropZoneProps) {
forceHover={
hoveringComponent === componentId && !userIsDragging
}
isDragDisabled={!canDrag}
indicativeHover={
userIsDragging &&
containsZone &&
Expand Down
Loading