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

shadcn skeleton #721

Closed
wants to merge 15 commits into from
Closed

shadcn skeleton #721

Show file tree
Hide file tree
Changes from 5 commits
Commits
Show all changes
15 commits
Select commit Hold shift + click to select a range
11ac63f
Rough in a skeleton for a shadcn version of autocomponents
airhorns Jan 12, 2025
369dc20
WIP Initial Shadcn Implementation
jadewale Jan 17, 2025
6923baf
Add React label
jadewale Jan 17, 2025
9cfdf1c
Shadcn initial components
jadewale Jan 21, 2025
d31871f
Shadcn packages installation
jadewale Jan 21, 2025
4752779
Add @gadgetinc/react to dependency
jadewale Jan 21, 2025
9f23624
Merge branch 'main' into shadcn-skeleton
jadewale Jan 21, 2025
69fa07a
Remove
jadewale Jan 21, 2025
c3e186d
Update AutoFormMetadataContext props
jadewale Jan 21, 2025
ad47c5d
Install @gadgetinc/react workspace
jadewale Jan 21, 2025
5980ebe
Lint files and update lockfile
jadewale Jan 21, 2025
a2b4b73
remove circular dependency
jadewale Jan 21, 2025
a630362
Update lockfile to sync with package.json
jadewale Jan 21, 2025
2db79f8
remove reference from spec in src
jadewale Jan 21, 2025
8539128
Remove reference in spec from src
jadewale Jan 22, 2025
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
33 changes: 20 additions & 13 deletions packages/react/cypress/component/auto/AutoButton.cy.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -9,7 +9,7 @@ describeForEachAutoAdapter("AutoButton", ({ name, adapter: { AutoButton }, wrapp
});

it("shows a button, runs a create action with no variables, and reports success", () => {
cy.mountWithWrapper(<AutoButton action={api.widget.create} />, wrapper);
cy.mountWithWrapper(<AutoButton id="auto" action={api.widget.create} />, wrapper);
cy.contains("Create Widget");

cy.intercept("POST", `${api.connection.options.endpoint}?operation=createWidget`, {
Expand All @@ -23,7 +23,7 @@ describeForEachAutoAdapter("AutoButton", ({ name, adapter: { AutoButton }, wrapp
},
}).as("createWidget");

cy.get("button").click();
cy.get("#auto").click();

cy.wait("@createWidget");
cy.get("@createWidget").its("request.body.variables").should("deep.equal", { widget: {} });
Expand All @@ -32,7 +32,7 @@ describeForEachAutoAdapter("AutoButton", ({ name, adapter: { AutoButton }, wrapp
});

it("shows a button, runs a create action with variables, and reports success", () => {
cy.mountWithWrapper(<AutoButton action={api.widget.create} variables={{ widget: { name: "foobar" } }} />, wrapper);
cy.mountWithWrapper(<AutoButton id="auto" action={api.widget.create} variables={{ widget: { name: "foobar" } }} />, wrapper);
cy.contains("Create Widget");

cy.intercept("POST", `${api.connection.options.endpoint}?operation=createWidget`, {
Expand All @@ -46,7 +46,7 @@ describeForEachAutoAdapter("AutoButton", ({ name, adapter: { AutoButton }, wrapp
},
}).as("createWidget");

cy.get("button").click();
cy.get("#auto").click();

cy.wait("@createWidget");
cy.get("@createWidget")
Expand All @@ -59,22 +59,22 @@ describeForEachAutoAdapter("AutoButton", ({ name, adapter: { AutoButton }, wrapp
});

it("shows a button, runs a create action with no variables, and reports an error if the network call fails", () => {
cy.mountWithWrapper(<AutoButton action={api.widget.create} />, wrapper);
cy.mountWithWrapper(<AutoButton id="auto" action={api.widget.create} />, wrapper);
cy.contains("Create Widget");

cy.intercept("POST", `${api.connection.options.endpoint}?operation=createWidget`, {
forceNetworkError: true,
}).as("createWidget");

cy.get("button").click();
cy.get("#auto").click();

cy.wait("@createWidget");

cy.contains("Create Widget encountered an error:");
});

it("shows a button, runs an update action with variables, and reports success", () => {
cy.mountWithWrapper(<AutoButton action={api.widget.update} variables={{ id: "123", widget: { name: "foobar" } }} />, wrapper);
cy.mountWithWrapper(<AutoButton id="auto" action={api.widget.update} variables={{ id: "123", widget: { name: "foobar" } }} />, wrapper);
cy.contains("Update Widget");

cy.intercept("POST", `${api.connection.options.endpoint}?operation=updateWidget`, {
Expand All @@ -88,7 +88,7 @@ describeForEachAutoAdapter("AutoButton", ({ name, adapter: { AutoButton }, wrapp
},
}).as("updateWidget");

cy.get("button").click();
cy.get("#auto").click();

cy.wait("@updateWidget");
cy.get("@updateWidget")
Expand All @@ -102,14 +102,20 @@ describeForEachAutoAdapter("AutoButton", ({ name, adapter: { AutoButton }, wrapp
});

it("allows overriding the label", () => {
cy.mountWithWrapper(<AutoButton action={api.widget.create}>Whizbang the flimflam</AutoButton>, wrapper);
cy.mountWithWrapper(
<AutoButton id="auto" action={api.widget.create}>
Whizbang the flimflam
</AutoButton>,
wrapper
);
cy.contains("Whizbang the flimflam");
});

it("allows overriding the onSuccess behaviour", () => {
let onSuccessCalled = false;
cy.mountWithWrapper(
<AutoButton
id="auto"
action={api.widget.update}
variables={{ id: "123", widget: { name: "foobar" } }}
onSuccess={(result: any) => {
Expand All @@ -131,7 +137,7 @@ describeForEachAutoAdapter("AutoButton", ({ name, adapter: { AutoButton }, wrapp
},
}).as("updateWidget");

cy.get("button").click();
cy.get("#auto").click();

cy.wait("@updateWidget").then(() => {
expect(onSuccessCalled).to.be.true;
Expand All @@ -142,6 +148,7 @@ describeForEachAutoAdapter("AutoButton", ({ name, adapter: { AutoButton }, wrapp
let onErrorCalled = false;
cy.mountWithWrapper(
<AutoButton
id="auto"
action={api.widget.update}
variables={{ id: "123", widget: { name: "foobar" } }}
onError={(error: Error) => {
Expand All @@ -157,15 +164,15 @@ describeForEachAutoAdapter("AutoButton", ({ name, adapter: { AutoButton }, wrapp
forceNetworkError: true,
}).as("updateWidget");

cy.get("button").click();
cy.get("#auto").click();

cy.wait("@updateWidget").then(() => {
expect(onErrorCalled).to.be.true;
});
});

it("shows a button, runs an global action with no variables, and reports success", () => {
cy.mountWithWrapper(<AutoButton action={api.flipAll} />, wrapper);
cy.mountWithWrapper(<AutoButton id="auto" action={api.flipAll} />, wrapper);
cy.contains("Flip all");

cy.intercept("POST", `${api.connection.options.endpoint}?operation=flipAll`, {
Expand All @@ -176,7 +183,7 @@ describeForEachAutoAdapter("AutoButton", ({ name, adapter: { AutoButton }, wrapp
},
}).as("flipAll");

cy.get("button").click();
cy.get("#auto").click();

cy.wait("@flipAll");
cy.get("@flipAll").its("request.body.variables").should("deep.equal", {});
Expand Down
34 changes: 21 additions & 13 deletions packages/react/cypress/component/auto/form/AutoForm.cy.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -36,8 +36,8 @@ describeForEachAutoAdapter("AutoForm", ({ name, adapter: { AutoForm }, wrapper }

ensureFieldInputLabelsExist();

cy.get(`input[name="widget.name"]`).type("test record");
cy.get(`input[name="widget.inventoryCount"]`).type("999");
cy.clickAndType(`input[name="widget.name"]`, "test record");
cy.clickAndType(`input[name="widget.inventoryCount"]`, "999");

submit("Widget");
ensureFieldInputLabelsExist();
Expand All @@ -55,8 +55,8 @@ describeForEachAutoAdapter("AutoForm", ({ name, adapter: { AutoForm }, wrapper }
const onSuccessSpy = cy.spy().as("onSuccessSpy");
cy.mountWithWrapper(<AutoForm action={api.widget.create} exclude={["gizmos"]} onSuccess={onSuccessSpy} />, wrapper);

cy.get(`input[name="widget.name"]`).type("test record");
cy.get(`input[name="widget.inventoryCount"]`).type("999");
cy.clickAndType(`input[name="widget.name"]`, "test record");
cy.clickAndType(`input[name="widget.inventoryCount"]`, "999");

cy.getSubmitButton().click();

Expand All @@ -76,8 +76,8 @@ describeForEachAutoAdapter("AutoForm", ({ name, adapter: { AutoForm }, wrapper }
const onFailureSpy = cy.spy().as("onFailureSpy");
cy.mountWithWrapper(<AutoForm action={api.widget.alwaysThrowError} exclude={["gizmos"]} onFailure={onFailureSpy} />, wrapper);

cy.get(`input[name="widget.name"]`).type("test record");
cy.get(`input[name="widget.inventoryCount"]`).type("999");
cy.clickAndType(`input[name="widget.name"]`, "test record");
cy.clickAndType(`input[name="widget.inventoryCount"]`, "999");

cy.getSubmitButton().click();

Expand Down Expand Up @@ -129,6 +129,14 @@ describeForEachAutoAdapter("AutoForm", ({ name, adapter: { AutoForm }, wrapper }
});

it("can render a form to update model and submit it", () => {

/**
* This test is disabled for Shadcn because it's not supported yet. We need to have a list component for this to work properly
*/
if (name === "Shadcn") {
return;
}
Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

tiny nit: I think this is going to be easy to forget to fix later cause its going to show up as a green test when we look at the list of tests. can you file a github issue to ensure we come back to re-enable this?


cy.intercept("POST", `${api.connection.options.endpoint}?operation=widget`, {
body: {
data: {
Expand Down Expand Up @@ -172,9 +180,9 @@ describeForEachAutoAdapter("AutoForm", ({ name, adapter: { AutoForm }, wrapper }
cy.contains("Anything");

// Clear the fetched value to prevent from making the value stored in the database longer as the test runs
cy.get(`input[name="widget.name"]`).clear().type("updated test record");
cy.get(`input[name="widget.inventoryCount"]`).clear().type("1234");
cy.get(`input[name="widget.section"]`).clear().type("Section Foo");
cy.clickAndType(`input[name="widget.name"]`, "updated test record", true);
cy.clickAndType(`input[name="widget.inventoryCount"]`, "1234", true);
cy.clickAndType(`input[name="widget.section"]`, "Section Foo", true);

cy.contains(`Section Foo`).click();
/**
Expand Down Expand Up @@ -205,17 +213,17 @@ describeForEachAutoAdapter("AutoForm", ({ name, adapter: { AutoForm }, wrapper }
ensureFieldInputLabelsExist();

// fill in name but not inventoryCount
cy.get(`input[name="widget.name"]`).type("test record");
cy.clickAndType(`input[name="widget.name"]`, "test record");

cy.get("form [type=submit][aria-hidden!=true]").click();
cy.contains("Inventory count is required");

cy.get(`input[name="widget.inventoryCount"]`).type("42");
cy.clickAndType(`input[name="widget.inventoryCount"]`, "42");

cy.get(`input[name="widget.mustBeLongString"]`).type("short");
cy.clickAndType(`input[name="widget.mustBeLongString"]`, "short");
cy.contains("must be at least 20 characters");

cy.get(`input[name="widget.mustBeLongString"]`).type(` l${"o".repeat(20)}ng enough`);
cy.clickAndType(`input[name="widget.mustBeLongString"]`, ` l${"o".repeat(20)}ng enough`);

submit("Widget");
});
Expand Down
14 changes: 9 additions & 5 deletions packages/react/cypress/component/auto/form/AutoFormDynamicFormInputChanges.cy.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -10,10 +10,10 @@ describeForEachAutoAdapter("AutoForm", ({ name, adapter: { AutoForm }, wrapper }
return (
<>
<AutoForm action={api.widget.update} findBy={findBy} />

<div>
<button id="setFindById1" onClick={() => setFindBy("1")} />
<button id="setFindById2" onClick={() => setFindBy("2")} />
<button style={{width:1, height: 1}} id="setFindById1" onClick={() => setFindBy("1")} />
<button style={{width:1, height: 1}} id="setFindById2" onClick={() => setFindBy("2")} />
</div>
</>
);
Expand Down Expand Up @@ -57,8 +57,12 @@ describeForEachAutoAdapter("AutoForm", ({ name, adapter: { AutoForm }, wrapper }

cy.get(`input[name="widget.name"]`).should("have.value", "test record 1");
cy.get(`input[name="widget.inventoryCount"]`).should("have.value", "1");
cy.get(`input[name="widget.name"]`).type("Dirty the value");
cy.get(`input[name="widget.inventoryCount"]`).type("123546");

cy.clickAndType(`input[name="widget.name"]`, "Dirty the value");



cy.clickAndType(`input[name="widget.inventoryCount"]`, "123546");

cy.get("#setFindById2").click();

Expand Down
8 changes: 4 additions & 4 deletions packages/react/cypress/component/auto/form/AutoFormGlobalActions.cy.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -13,8 +13,8 @@ describeForEachAutoAdapter("AutoForm - Global actions", ({ name, adapter: { Auto
cy.get(`input[name="title"]`).should("have.value", "");
cy.get(`input[name="inventoryCount"]`).should("have.value", "");

cy.get(`input[name="title"]`).type("foo");
cy.get(`input[name="inventoryCount"]`).type("42");
cy.clickAndType(`input[name="title"]`, "foo");
cy.clickAndType(`input[name="inventoryCount"]`, "42");

cy.intercept("POST", `${api.connection.options.endpoint}?operation=flipAll`, {
body: {
Expand Down Expand Up @@ -45,8 +45,8 @@ describeForEachAutoAdapter("AutoForm - Global actions", ({ name, adapter: { Auto
cy.get(`input[name="title"]`).should("have.value", "");
cy.get(`input[name="inventoryCount"]`).should("have.value", "");

cy.get(`input[name="title"]`).type("foo");
cy.get(`input[name="inventoryCount"]`).type("42");
cy.clickAndType(`input[name="title"]`, "foo");
cy.clickAndType(`input[name="inventoryCount"]`, "42");

cy.intercept("POST", `${api.connection.options.endpoint}?operation=flipAll`, {
times: 1,
Expand Down
11 changes: 11 additions & 0 deletions packages/react/cypress/component/auto/form/AutoFormInputLabels.cy.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,15 +1,26 @@
/* eslint-disable jest/valid-expect */
import React from "react";
import { PolarisAutoInput } from "../../../../src/auto/polaris/inputs/PolarisAutoInput.js";
import { makeShadcnAutoInput } from "../../../../src/auto/shadcn/inputs/ShadcnAutoInput.js";
import { humanizeCamelCase } from "../../../../src/utils.js";
import { api } from "../../../support/api.js";
import { describeForEachAutoAdapter } from "../../../support/auto.js";

import { Button } from "../../../../spec/auto/shadcn-defaults/components/Button.js";
import { Checkbox } from "../../../../spec/auto/shadcn-defaults/components/Checkbox.js";
import { Input } from "../../../../spec/auto/shadcn-defaults/components/Input.js";
import { Label } from "../../../../spec/auto/shadcn-defaults/components/Label.js";

const AutoInput = (props: { suiteName: string; field: string; label?: string }) => {
if (props.suiteName === "Polaris") {
return <PolarisAutoInput {...props} />;
}

if (props.suiteName === "Shadcn") {
const ShadcnAutoInput = makeShadcnAutoInput({ Input: Input, Label: Label, Checkbox: Checkbox, Button: Button });
Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

nit: can you move this outside of this function? Otherwise, it's going to re-create the input component every render and for every test, which is kinda slow, and also not how production uses of this stuff will work so I think it will test it a bit differently. the factory functions should generally be invoked in the module scope

return <ShadcnAutoInput {...props} />;
}

throw new Error("Invalid suite name");
};

Expand Down
10 changes: 6 additions & 4 deletions packages/react/cypress/component/auto/form/AutoFormUpsertAction.cy.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -73,8 +73,8 @@ describeForEachAutoAdapter("AutoForm - Upsert Action", ({ name, adapter: { AutoF
};

const populateRequiredFields = () => {
cy.get(`input[name="widget.name"]`).clear().type("name");
cy.get(`input[name="widget.inventoryCount"]`).clear().type("123");
cy.clickAndType(`input[name="widget.name"]`, "name", true);
cy.clickAndType(`input[name="widget.inventoryCount"]`, "123", true);
};

beforeEach(() => {
Expand All @@ -93,10 +93,12 @@ describeForEachAutoAdapter("AutoForm - Upsert Action", ({ name, adapter: { AutoF
populateRequiredFields();

// Does not allow submission when the ID input does not have a positive integer value
cy.get(`input[name="widget.id"]`).clear().type("-1{enter}");
cy.clickAndType(`input[name="widget.id"]`, "-1", true);

if (upsertHasBeenCalled) throw new Error("Upsert was called when it shouldn't have been");

cy.get(`input[name="widget.id"]`).clear().type("1.1{enter}");
cy.clickAndType(`input[name="widget.id"]`, "1.1", true);

if (upsertHasBeenCalled) throw new Error("Upsert was called when it shouldn't have been");

cy.get(`input[name="widget.id"]`).clear().type("1{enter}");
Expand Down
5 changes: 4 additions & 1 deletion packages/react/cypress/component/auto/form/AutoPasswordInput.cy.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -54,8 +54,11 @@ describeForEachAutoAdapter("AutoPasswordInput", ({ name, adapter: { AutoForm },
cy.get(`button[role="passwordEditPasswordButton"]`).first().click();

// Enabled after clicking the edit button

cy.get(`input[name="user.password"]`).should("be.enabled");
cy.get(`input[name="user.password"]`).type(updatedPassword);

cy.clickAndType(`input[name="user.password"]`, updatedPassword);


expectUpdateActionSubmissionVariables(expectedVariables); // Password field is changed and included
submit("User", expectedVariables);
Expand Down
Loading
Loading