Skip to content

Commit

Permalink
feat: create environment aliases form
Browse files Browse the repository at this point in the history
  • Loading branch information
@adrians5j
adrians5j committed Mar 30, 2020
1 parent cd556b9 commit 8c036ee
Show file tree
Hide file tree
Showing 4 changed files with 377 additions and 0 deletions.
53 changes: 53 additions & 0 deletions packages/app-headless-cms/src/admin/views/EnvironmentAliases/EnvironmentAliases.tsx
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,53 @@
import React from "react";
import { SplitView, LeftPanel, RightPanel } from "@webiny/app-admin/components/SplitView";
import { FloatingActionButton } from "@webiny/app-admin/components/FloatingActionButton";
import EnvironmentAliasesDataList from "./EnvironmentAliasesDataList";
import EnvironmentAliasesForm from "./EnvironmentAliasesForm";
import { CrudProvider } from "@webiny/app-admin/contexts/Crud";
import {
READ_ENVIRONMENT_ALIAS,
LIST_ENVIRONMENT_ALIASES,
CREATE_ENVIRONMENT_ALIAS,
UPDATE_ENVIRONMENT_ALIAS,
DELETE_ENVIRONMENT_ALIAS
} from "./graphql";

function EnvironmentAliases() {
return (
<CrudProvider
delete={{
mutation: DELETE_ENVIRONMENT_ALIAS
}}
read={READ_ENVIRONMENT_ALIAS}
create={{
mutation: CREATE_ENVIRONMENT_ALIAS
}}
update={{
mutation: UPDATE_ENVIRONMENT_ALIAS
}}
list={{
query: LIST_ENVIRONMENT_ALIASES,
variables: { sort: { savedOn: -1 } }
}}
>
{({ actions }) => (
<>
<SplitView>
<LeftPanel span={4}>
<EnvironmentAliasesDataList />
</LeftPanel>
<RightPanel span={8}>
<EnvironmentAliasesForm />
</RightPanel>
</SplitView>
<FloatingActionButton
data-testid="new-record-button"
onClick={actions.resetForm}
/>
</>
)}
</CrudProvider>
);
}

export default EnvironmentAliases;
85 changes: 85 additions & 0 deletions packages/app-headless-cms/src/admin/views/EnvironmentAliases/EnvironmentAliasesDataList.tsx
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,85 @@
import React from "react";
import { i18n } from "@webiny/app/i18n";
import { ConfirmationDialog } from "@webiny/ui/ConfirmationDialog";
import { DeleteIcon } from "@webiny/ui/List/DataList/icons";
import { useCrud } from "@webiny/app-admin/hooks/useCrud";
import { Typography } from "@webiny/ui/Typography";

import {
DataList,
List,
ListItem,
ListItemText,
ListItemTextSecondary,
ListItemMeta,
ListActions
} from "@webiny/ui/List";

const t = i18n.ns("app-page-builder/admin/environmentAliases/data-list");

const EnvironmentAliasesDataList = () => {
const { actions, list } = useCrud();

return (
<DataList
{...list}
title={t`Environment Aliases`}
sorters={[
{
label: t`Newest to oldest`,
sorters: { createdOn: -1 }
},
{
label: t`Oldest to newest`,
sorters: { createdOn: 1 }
},
{
label: t`Name A-Z`,
sorters: { name: 1 }
},
{
label: t`Name Z-A`,
sorters: { name: -1 }
}
]}
>
{({ data, isSelected, select }) => (
<List data-testid="default-data-list">
{data.map(item => (
<ListItem key={item.id} selected={isSelected(item)}>
<ListItemText onClick={() => select(item)}>
{item.name}{" "}
{item.default && (
<Typography use={"overline"}>{t`(default)`}</Typography>
)}
<ListItemTextSecondary>
{item.environment
? t`Points to: {environment}`({
environment: item.environment.name
})
: t`No environment.`}
</ListItemTextSecondary>
</ListItemText>

<ListItemMeta>
<ListActions>
<ConfirmationDialog>
{({ showConfirmation }) => (
<DeleteIcon
onClick={() => {
showConfirmation(() => actions.delete(item));
}}
/>
)}
</ConfirmationDialog>
</ListActions>
</ListItemMeta>
</ListItem>
))}
</List>
)}
</DataList>
);
};

export default EnvironmentAliasesDataList;
111 changes: 111 additions & 0 deletions packages/app-headless-cms/src/admin/views/EnvironmentAliases/EnvironmentAliasesForm.tsx
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,111 @@
import React from "react";
import { Form } from "@webiny/form";
import { Grid, Cell } from "@webiny/ui/Grid";
import { Input } from "@webiny/ui/Input";
import { ButtonPrimary } from "@webiny/ui/Button";
import { CircularProgress } from "@webiny/ui/Progress";
import { useCrud } from "@webiny/app-admin/hooks/useCrud";
import { i18n } from "@webiny/app/i18n";
import { useQuery, useApolloClient } from "react-apollo";
import get from "lodash.get";
import { GET_ENVIRONMENT_ALIAS_BY_SLUG } from "./graphql";
import { LIST_ENVIRONMENTS } from "./../Environments/graphql";
import NameSlug from "../../components/NameSlug";
import { AutoComplete } from "@webiny/ui/AutoComplete";

import {
SimpleForm,
SimpleFormFooter,
SimpleFormContent
} from "@webiny/app-admin/components/SimpleForm";

const t = i18n.ns("app-page-builder/admin/environmentAliases/form");

function EnvironmentAliasesForm() {
const { form: crudForm } = useCrud();

const listEnvironments = useQuery(LIST_ENVIRONMENTS, { variables: { perPage: 100 } });
const apolloClient = useApolloClient();

const environmentsOptions = get(listEnvironments, "data.cms.environments.data", []);

return (
<Form {...crudForm}>
{({ data, form, Bind, setValue }) => (
<SimpleForm data-testid={"pb-environmentAliases-form"}>
{crudForm.loading && <CircularProgress />}
<SimpleFormContent>
<Grid>
<NameSlug
formData={data}
Bind={Bind}
setValue={setValue}
slug={{
description: t`Will be used as part of the GraphQL API URL.`
}}
validateSlugUniqueness={async () => {
if (data.id) {
return;
}

const getEnvironmentAliasBySlug = await apolloClient.query({
query: GET_ENVIRONMENT_ALIAS_BY_SLUG,
variables: {
slug: data.slug
}
});

const existingEnvironmentAlias = get(
getEnvironmentAliasBySlug,
"data.cms.getEnvironmentAlias.data"
);

if (existingEnvironmentAlias) {
throw new Error(
t`Environment with slug "{slug}" already exists.`({
slug: data.slug
})
);
}
}}
/>
<Cell span={12}>
<Bind name="description">
{props => (
<Input
{...props}
rows={4}
maxLength={200}
characterCount
label={t`Description`}
/>
)}
</Bind>
</Cell>
<Cell span={12}>
<Bind name="environment">
{props => (
<AutoComplete
{...props}
placeholder={t`No environment selected.`}
label={t`Environment`}
options={environmentsOptions}
description={t`Choose an existing environment to which this alias will point to.`}
/>
)}
</Bind>
</Cell>
</Grid>
</SimpleFormContent>
<SimpleFormFooter>
<ButtonPrimary
onClick={form.submit}
>{t`Save environment alias`}</ButtonPrimary>
</SimpleFormFooter>
</SimpleForm>
)}
</Form>
);
}

export default EnvironmentAliasesForm;
128 changes: 128 additions & 0 deletions packages/app-headless-cms/src/admin/views/EnvironmentAliases/graphql.ts
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,128 @@
import gql from "graphql-tag";

const fields = `
id
name
slug
description
environment {
id
name
}
`;

export const LIST_ENVIRONMENT_ALIASES = gql`
query listEnvironmentAliases(
$where: JSON
$sort: JSON
$page: Int
$perPage: Int
$search: CmsSearchInput
) {
cms {
environmentAliases: listEnvironmentAliases(
where: $where
sort: $sort
page: $page
perPage: $perPage
search: $search
) {
data {
id
name
slug
createdOn
environment {
id
name
}
}
meta {
totalCount
totalPages
to
from
nextPage
previousPage
}
}
}
}
`;

export const GET_ENVIRONMENT_ALIAS_BY_SLUG = gql`
query getEnvironmentAliasBySlug($slug: String) {
cms {
getEnvironmentAlias(where: { slug: $slug }) {
data {
name
id
}
}
}
}
`;

export const READ_ENVIRONMENT_ALIAS = gql`
query getEnvironmentAlias($id: ID!) {
cms {
environmentAlias: getEnvironmentAlias(id: $id){
data {
${fields}
}
error {
code
message
}
}
}
}
`;

export const CREATE_ENVIRONMENT_ALIAS = gql`
mutation createEnvironmentAlias($data: CmsEnvironmentAliasInput!){
cms {
environmentAlias: createEnvironmentAlias(data: $data) {
data {
${fields}
}
error {
code
message
data
}
}
}
}
`;

export const UPDATE_ENVIRONMENT_ALIAS = gql`
mutation updateEnvironmentAlias($id: ID!, $data: CmsEnvironmentAliasInput!){
cms {
environmentAlias: updateEnvironmentAlias(id: $id, data: $data) {
data {
${fields}
}
error {
code
message
data
}
}
}
}
`;

export const DELETE_ENVIRONMENT_ALIAS = gql`
mutation deleteEnvironmentAlias($id: ID!) {
cms {
deleteEnvironmentAlias(id: $id) {
data
error {
code
message
}
}
}
}
`;

0 comments on commit 8c036ee

Please sign in to comment.