Skip to content

Commit

Permalink
Better handling when no sdl for migrations
Browse files Browse the repository at this point in the history
  • Loading branch information
@jaclarke
jaclarke committed Jan 7, 2025
1 parent 0cb762e commit 0a64566
Show file tree
Hide file tree
Showing 2 changed files with 140 additions and 69 deletions.
77 changes: 65 additions & 12 deletions shared/common/branchGraph/branchGraph.module.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -586,32 +586,40 @@
box-shadow: 0px 2px 8px rgba(0, 0, 0, 0.12), 0px 0px 2px rgba(0, 0, 0, 0.06);
z-index: 2;

.closeButton {
display: none;
}

@include isMobile {
width: 100%;
}
}

.closeButton {
display: flex;
align-self: flex-end;
margin: 12px;
margin-bottom: 6px;
.panelHeader {
display: grid;
grid-template-columns: 1fr auto 1fr;
padding: 8px;
padding-bottom: 0;

.closeButton {
grid-column: 3;
padding: 5px;
border: 0;
color: var(--tertiary_text_color);
justify-self: end;

span {
display: none;
}
}
}

.sdlToggle {
grid-column: 2;
display: flex;
background: var(--Grey97);
border: 1px solid var(--Grey93);
border-radius: 8px;
font-family: "Roboto Flex Variable", sans-serif;
line-height: 16px;
margin: 8px;
margin-bottom: 0;
align-self: end;
align-self: flex-start;
margin: 0 auto;

@include darkTheme {
background: var(--Grey16);
Expand Down Expand Up @@ -645,6 +653,11 @@
box-shadow: 0px 0px 3px 0px rgba(0, 0, 0, 0.4);
}
}

&.disabled {
opacity: 0.3;
pointer-events: none;
}
}
}

Expand Down Expand Up @@ -881,6 +894,46 @@
}
}

.noSdlDiff {
display: flex;
flex-direction: column;
align-items: center;
flex-grow: 1;
padding: 12px;
gap: 12px;
color: var(--secondary_text_color);

.message {
font-style: italic;
margin-top: 4px;
}
.note {
font-size: 13px;
display: flex;
align-items: center;
gap: 2px;
color: var(--tertiary_text_color);

svg {
width: 20px;
height: 20px;
}

code {
font-family: "Roboto Mono Variable", monospace;
font-size: 12px;
font-weight: 450;
background: var(--Grey93);
border-radius: 4px;
padding: 2px 4px;

@include darkTheme {
background: var(--Grey20);
}
}
}
}

.childItem {
position: relative;
margin: 0 12px 6px 38px;
Expand Down
132 changes: 75 additions & 57 deletions shared/common/branchGraph/index.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -29,6 +29,7 @@ import {
MigrationsListIcon,
WarningIcon,
Button,
InfoIcon,
} from "@edgedb/common/newui";
import {CopyButton} from "../newui/copyButton";
import {PopupArrow} from "../newui/icons/other";
Expand Down Expand Up @@ -451,16 +452,6 @@ export function _BranchGraphRenderer({
setPanelOpen(false);
}}
/>
<button
className={cn(styles.floatingButton, styles.closePanelButton)}
onClick={() => {
setHighlightedMigrationItem(null);
setPanelOpen(false);
}}
>
<CrossIcon />
Close migrations
</button>
</>
) : null}
</div>
Expand Down Expand Up @@ -816,8 +807,6 @@ const MigrationsPanel = observer(function MigrationsPanel({
const {fetchMigrations} = useContext(BranchGraphContext);
const [fetching, setFetching] = useState(false);

const [sdlMode, setSdlMode] = useState(true);

const scrollRef = useRef<HTMLDivElement>(null);
const migrationRefs = useRef({
items: new Map<GraphItem, HTMLDivElement>(),
Expand All @@ -830,6 +819,23 @@ const MigrationsPanel = observer(function MigrationsPanel({
const [panelHeight, _setPanelHeight] = useState(0);
useResize(scrollRef, ({height}) => _setPanelHeight(height));

const noSDLDiffs = useMemo(
() =>
history.items.every((item) => {
const data = migrationScripts.get(item.name);
return data != null && !(item.parent ? data.sdlDiff : data.sdl);
}),
[history, fetching]
);

const [sdlMode, setSdlMode] = useState(showSDLToggle);

useEffect(() => {
if (noSDLDiffs) {
setSdlMode(false);
}
}, [noSDLDiffs]);

useEffect(() => {
if (fetching) return;

Expand All @@ -844,7 +850,7 @@ const MigrationsPanel = observer(function MigrationsPanel({
const {script, sdl} = scripts[i];
const parentName = missingItems[i].parent?.name;
const parentSdl = parentName
? missingItems[i + 1].name === parentName
? missingItems[i + 1]?.name === parentName
? scripts[i + 1].sdl
: migrationScripts.get(parentName)?.sdl ?? null
: null;
Expand Down Expand Up @@ -939,31 +945,35 @@ const MigrationsPanel = observer(function MigrationsPanel({

return (
<div className={styles.migrationsPanel}>
{showSDLToggle ? (
<div className={styles.sdlToggle}>
<div
className={cn(styles.option, {[styles.selected]: !sdlMode})}
onClick={() => setSdlMode(false)}
>
DDL
</div>
<div
className={cn(styles.option, {[styles.selected]: sdlMode})}
onClick={() => setSdlMode(true)}
>
SDL
<div className={styles.panelHeader}>
{showSDLToggle ? (
<div className={styles.sdlToggle}>
<div
className={cn(styles.option, {[styles.selected]: !sdlMode})}
onClick={() => setSdlMode(false)}
>
DDL
</div>
<div
className={cn(styles.option, {
[styles.selected]: sdlMode,
[styles.disabled]: noSDLDiffs,
})}
onClick={() => setSdlMode(true)}
>
SDL
</div>
</div>
</div>
) : null}
) : null}

<Button
className={styles.closeButton}
leftIcon={<CrossIcon />}
kind="outline"
onClick={closePanel}
/>
</div>

<Button
className={styles.closeButton}
leftIcon={<CrossIcon />}
kind="outline"
onClick={closePanel}
>
Close migrations
</Button>
<div ref={scrollRef} className={styles.migrationsPanelInner}>
<div className={styles.panelScrollWrapper}>
{history.children.length
Expand Down Expand Up @@ -995,10 +1005,9 @@ const MigrationsPanel = observer(function MigrationsPanel({
</div>
))
: null}
{history.items.map((item) => {
const code = sdlMode
? migrationScripts.get(item.name)?.sdl
: migrationScripts.get(item.name)?.script;
{history.items.map((item, i) => {
const itemData = migrationScripts.get(item.name);
const code = sdlMode ? itemData?.sdl! : itemData?.script;

const body = (
<div
Expand Down Expand Up @@ -1033,7 +1042,7 @@ const MigrationsPanel = observer(function MigrationsPanel({
)}

<div className={styles.header}>
{item.parent == null ? line : null}
{item.parent == null && i !== 0 ? line : null}
<svg
className={styles.dot}
xmlns="http://www.w3.org/2000/svg"
Expand All @@ -1045,28 +1054,26 @@ const MigrationsPanel = observer(function MigrationsPanel({
</div>

<div className={styles.script}>
{migrationScripts.has(item.name) ? (
sdlMode && item.parent ? (
{itemData ? (
sdlMode && (item.parent || !itemData.sdl) ? (
<SDLCodeDiff
sdl={code ?? null}
diff={migrationScripts.get(item.name)!.sdlDiff}
sdl={itemData.sdl}
diff={itemData.sdlDiff}
/>
) : (
<>
<div className={styles.codeWrapper}>
<CodeBlock code={code ?? "# no sdl"} />
<CodeBlock code={code!} />
</div>
{code ? (
<div className={styles.copyButtonWrapper}>
<div className={styles.copyButtonClip}>
<CopyButton
className={styles.copyButton}
content={code}
mini
/>
</div>
<div className={styles.copyButtonWrapper}>
<div className={styles.copyButtonClip}>
<CopyButton
className={styles.copyButton}
content={code!}
mini
/>
</div>
) : null}
</div>
</>
)
) : (
Expand Down Expand Up @@ -1111,7 +1118,18 @@ function SDLCodeDiff({
sdl: string | null;
}) {
if (!diff) {
return null;
return (
<div className={styles.noSdlDiff}>
<div className={styles.message}>No SDL diff available</div>
<div className={styles.note}>
<InfoIcon />
<span>
Update the <code>store_migration_sdl</code> config to enable SDL
diffs
</span>
</div>
</div>
);
}

const {code, diffMarkers, ranges} = useMemo(() => {
Expand Down

0 comments on commit 0a64566

Please sign in to comment.