Skip to content

Commit

Permalink
debugger
Browse files Browse the repository at this point in the history
  • Loading branch information
balajisoundar committed Dec 1, 2023
1 parent a722329 commit 1d522c3
Show file tree
Hide file tree
Showing 22 changed files with 545 additions and 103 deletions.
Original file line number Diff line number Diff line change
Expand Up @@ -2,8 +2,9 @@ import React from "react";

import type { ControlProps } from "./BaseControl";
import BaseControl from "./BaseControl";
import { Button, Input } from "design-system";
import { Button, Input, Icon } from "design-system";
import type { WidgetProps } from "widgets/BaseWidget";
import styled from "styled-components";

interface ButtonControlState {
showInput: boolean;
Expand All @@ -15,6 +16,12 @@ interface ButtonControlProps extends ControlProps {
onAdd: (widget: WidgetProps, name: string) => Record<string, unknown>;
}

const StyledErrorMessage = styled.div`
display: flex;
gap: 5px;
align-items: center;
`;

const RESTRICTED_NAMES = ["onReset"];

class ButtonControl extends BaseControl<
Expand Down Expand Up @@ -55,18 +62,27 @@ class ButtonControl extends BaseControl<
};

getErrorMessages = () => {
let errorMessage = "";

if (this.state.pristine) {
return "";
} else if (this.state.eventName.trim() === "") {
return "Event name cannot be empty";
} else if (
this.props.widgetProperties.hasOwnProperty(this.state.eventName.trim()) ||
this.props.widgetProperties.events.includes(this.state.eventName.trim())
) {
return "Event name already exists";
errorMessage = "Event name already exists";
} else if (RESTRICTED_NAMES.includes(this.state.eventName.trim())) {
return "Event name is restricted";
errorMessage = "Event name is restricted";
}

return (
errorMessage && (
<StyledErrorMessage>
<Icon name="alert-line" size="sm" />
{errorMessage}
</StyledErrorMessage>
)
);
};

render() {
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -30,7 +30,7 @@ export default function CSSEditor(props: ContentProps) {
className={"js-editor"}
focusElementName="custom-widget-css-editor"
folding
height={height - 38}
height={height - 39}
hideEvaluatedValue
input={{
value: srcDoc?.css,
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -31,7 +31,7 @@ export default function HTMLEditor(props: ContentProps) {
className={"js-editor"}
focusElementName="custom-widget-html-editor"
folding
height={height - 38}
height={height - 39}
hideEvaluatedValue
input={{
value: srcDoc?.html,
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -30,7 +30,7 @@ export default function JSEditor(props: ContentProps) {
className={"js-editor"}
focusElementName="custom-widget-js-editor"
folding
height={height - 38}
height={height - 39}
hideEvaluatedValue
input={{
value: srcDoc?.js,
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -2,12 +2,12 @@
}

.editorHeader {
border-bottom: 1px solid #cdd5df;
height: 38px;
border-bottom: 1px solid var(--ads-v2-color-gray-300);
height: 39px;
display: flex;
align-items: center;
padding: 0 10px;
border-top: 1px solid #cdd5df;
border-top: 1px solid var(--ads-v2-color-gray-300);
}

.editorHeaderTitle {
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -9,10 +9,12 @@
justify-content: space-between;
padding-left: 1rem;
padding-right: 0.5rem;
flex-basis: 300px;
flex-basis: 288px;
width: 288px;
flex-grow: 0;
border-left: 1px solid #cdd5df;
height: 48px;
border-left: 1px solid var(--ads-v2-color-gray-300);
height: 49px;
border-bottom: 1px solid var(--ads-v2-color-gray-300);
}

.headerControlsLeft {
Expand All @@ -22,7 +24,8 @@
justify-content: space-between;
padding-left: 0.5rem;
padding-right: 1rem;
flex-basis: calc(100% - 300px);
flex-basis: calc(100% - 288px);
width: calc(100% - 288px);
flex-grow: 0;
gap: 1rem;
}
Expand Down
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
.wrapper {
border-top: 1px solid #cdd5df;
border-top: 1px solid var(--ads-v2-color-gray-300);
}

.tabPanel.tabPanel {
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -23,7 +23,7 @@ export default function Collapsible(props: Props) {
<div className={styles.collapsibleIcon}>
<Icon
name={open ? "arrow-down-s-line" : "arrow-up-s-line"}
size="lg"
size="md"
/>
</div>
</div>
Expand Down
Original file line number Diff line number Diff line change
@@ -1,14 +1,14 @@
import React, { useCallback, useContext, useState } from "react";
import styles from "./styles.module.css";
import { Icon } from "design-system";
import LazyCodeEditor from "components/editorComponents/LazyCodeEditor";
import { Icon, Text } from "design-system";
import {
EditorModes,
EditorSize,
EditorTheme,
TabBehaviour,
} from "components/editorComponents/CodeEditor/EditorConfig";
import { CustomWidgetBuilderContext } from "../..";
import LazyCodeEditor from "components/editorComponents/LazyCodeEditor";

export default function Events() {
const { events } = useContext(CustomWidgetBuilderContext);
Expand Down Expand Up @@ -52,14 +52,18 @@ export default function Events() {
{openState[event] && (
<div className={styles.eventValue}>
<LazyCodeEditor
disabled
evaluatedValue={events[event]}
hideEvaluatedValue
input={{
value: events[event],
}}
isReadOnly
mode={EditorModes.TEXT_WITH_BINDING}
placeholder="No action"
positionCursorInsideBinding
showCustomToolTipForHighlightedText={false}
showLightningMenu={false}
size={EditorSize.EXTENDED}
tabBehaviour={TabBehaviour.INDENT}
theme={EditorTheme.LIGHT}
Expand All @@ -69,6 +73,12 @@ export default function Events() {
</div>
);
})}
{events && Object.keys(events).length === 0 && (
<Text color="#6A7585" renderAs="p">
You haven’t created any events. Return to the app editor to add events
to this custom widget.
</Text>
)}
</div>
);
}
Original file line number Diff line number Diff line change
@@ -1,18 +1,20 @@
.references {
flex-basis: 288px;
border-left: #cdd5df 1px solid;
border-left: var(--ads-v2-color-gray-300) 1px solid;
overflow: auto;
height: calc(100vh - 90px);
}

.collapsible {
border-bottom: 1px solid #cdd5df;
border-bottom: 1px solid var(--ads-v2-color-gray-300);
}

.collapsibleHeader {
display: flex;
padding: 0.5rem 1rem;
justify-content: space-between;
align-items: center;
height: 38px;
}

.collapsibleBody {
Expand All @@ -34,27 +36,26 @@
}

.marginTop {
margin-top: 1rem;
margin: 1rem 0 6px;
}

.events {
width: 100%;
}

.event {
.event:not(:last-child) {
margin-bottom: 12px;
}

.eventName {
display: flex;
align-items: center;
margin-bottom: 8px;
}

.eventLabel {
font-size: 14px;
font-weight: 500;
margin-right: 8px;
font-weight: 400;
margin-right: 2px;
cursor: pointer;
}

Expand All @@ -63,6 +64,7 @@
}

.eventValue {
margin-top: 8px;
width: 100%;
}

Expand All @@ -73,3 +75,7 @@
.switchTransientMode {
margin-bottom: 10px;
}

.noMargin.noMargin {
margin: 0px;
}
47 changes: 0 additions & 47 deletions app/client/src/pages/Editor/CustomWidgetBuilder/Preview.tsx

This file was deleted.

Original file line number Diff line number Diff line change
@@ -0,0 +1,76 @@
import React from "react";
import { Icon } from "design-system";
import styles from "./styles.module.css";
import HelpDropdown from "./helpDropdown";

export interface ConsoleItemProps {
type: string;
args: unknown[];
}

const getIcon = (type: ConsoleItemProps["type"]) => {
switch (type) {
case "error":
return (
<Icon
name="close-circle"
size="md"
style={{
color: "var(--ads-v2-color-red-600)",
}}
/>
);
case "warn":
return (
<Icon
name="alert-fill"
size="md"
style={{
color: "var(--ads-v2-color-yellow-600)",
}}
/>
);
case "log":
return <Icon name="snippet" size="md" />;
default:
return <Icon name="snippet" size="md" />;
}
};

const getContent = (type: string, args: unknown[]) => {
return args.reduce((prev: string, cur) => {
return prev + " " + cur?.toString?.();
}, "");
};

const getBackgroundColor = (type: ConsoleItemProps["type"]) => {
switch (type) {
case "error":
return "var(--ads-v2-color-red-50)";
case "warn":
return "var(--ads-v2-color-yellow-100)";
default:
return "#fff";
}
};

export default function ConsoleItem(props: ConsoleItemProps) {
const { args, type } = props;

return (
<div
className={styles.consoleItem}
style={{
background: getBackgroundColor(props.type),
}}
>
<div className={styles.consoleItemIcon}>{getIcon(props.type)}</div>
<div className={styles.consoleItemMessage}>{getContent(type, args)}</div>
{type === "error" && args.length === 1 && (
<div className={styles.consoleItemHelp}>
<HelpDropdown args={args} type={type} />
</div>
)}
</div>
);
}
Loading

0 comments on commit 1d522c3

Please sign in to comment.