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

Rapid exp title changes dependent on new or edit fixes #2901 #2994

Merged
merged 4 commits into from
Jul 8, 2020
Merged

Rapid exp title changes dependent on new or edit fixes #2901 #2994

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
3cf150a
Rapid exp title changes dependent on new or edit fixes #2901
tiftran Jul 7, 2020
fd9ded3
determine new or edit based on experiment data
tiftran Jul 7, 2020
04aff65
formatting
tiftran Jul 7, 2020
63fd1a6
Merge branch 'main' into 2901
jaredlockhart Jul 8, 2020
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
8 changes: 6 additions & 2 deletions app/experimenter/static/rapid/__tests__/app.test.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -25,7 +25,7 @@ describe("<App />", () => {
const { getByText } = renderWithRouter(<App />, {
route: "/new/",
});
expect(getByText("Create a New A/A Experiment")).toBeInTheDocument();
expect(getByText(/Create a New A\/A Experiment/)).toBeInTheDocument();
});

it("includes the experiment form page at `/:experimentSlug/edit/`", async () => {
Expand All @@ -41,7 +41,11 @@ describe("<App />", () => {
const { getByText, getByLabelText } = renderWithRouter(<App />, {
route: "/test-slug/edit/",
});
expect(getByText("Create a New A/A Experiment")).toBeInTheDocument();
await waitFor(() => {
return expect(
getByText("Edit Experiment: Test Name"),
).toBeInTheDocument();
});

const nameField = getByLabelText("Public Name") as HTMLInputElement;
await waitFor(() => {
Expand Down
26 changes: 26 additions & 0 deletions app/experimenter/static/rapid/components/experiments/ExperimentEditHeader.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,26 @@
import React from "react";

import { useExperimentState } from "experimenter-rapid/contexts/experiment/hooks";

const ExperimentFormPage: React.FC = () => {
const experimentData = useExperimentState();
let pageHeading = `Create a New A/A Experiment: ${experimentData.name}`;
if (experimentData.slug) {
pageHeading = `Edit Experiment: ${experimentData.name}`;
}

return (
<div className="mb-4">
Copy link
Contributor

Choose a reason for hiding this comment

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

Below this was wrapped in a <div className="col pt-3"> (see deleted L9 in app/experimenter/static/rapid/components/pages/ExperimentFormPage.tsx).
Not sure if that is still needed, but 🤷 .

Copy link
Contributor Author

Choose a reason for hiding this comment

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

I intially had it, but it gave me a weird indent 🤷‍♀️. Not exactly the best with front end stuff 😅

<div className="d-flex align-items-center">
<h3 className="mr-3">{pageHeading}</h3>
<span className="badge badge-secondary mb-1">Draft</span>
</div>
<p>
Create and automatically launch an A/A CFR experiment. A/A experiments
measure the accuracy of the tool.
</p>
</div>
);
};

export default ExperimentFormPage;
16 changes: 3 additions & 13 deletions app/experimenter/static/rapid/components/pages/ExperimentFormPage.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,25 +1,15 @@
import React from "react";

import ExperimentEditHeader from "experimenter-rapid/components/experiments/ExperimentEditHeader";
import ExperimentForm from "experimenter-rapid/components/forms/ExperimentForm";
import ExperimentProvider from "experimenter-rapid/contexts/experiment/provider";

const ExperimentFormPage: React.FC = () => {
return (
<ExperimentProvider>
<div className="col pt-3">
<div className="mb-4">
<div className="d-flex align-items-center">
<h3 className="mr-3">Create a New A/A Experiment</h3>
<span className="badge badge-secondary mb-1">Draft</span>
</div>
<p>
Create and automatically launch an A/A CFR experiment. A/A
experiments measure the accuracy of the tool.
</p>
</div>
<ExperimentEditHeader />

<ExperimentForm />
</div>
<ExperimentForm />
</ExperimentProvider>
);
};
Expand Down