merge: dev into next

cypress-tests/cypress/e2e/admin/pageBuilder/templates/pageTemplatesCrud.cy.ts

@@ -34,7 +34,9 @@ context("Page Builder - Template CRUD", () => {
                 });
         });
         cy.findByTestId("pb-editor-page-title").click();
-        cy.get(`input[value="${templateName}"]`).clear().type(templateNameEdit).blur();
+        cy.findByTestId("pb-editor-page-title").within(() => {
+            cy.get(`input[value="${templateName}"]`).clear().type(templateNameEdit).blur();
+        });
         cy.findByRole("button", { name: "Save Changes" }).should("exist").click();
         cy.contains(templateNameEdit).should("exist");
 

packages/api-admin-users/src/graphql/install.gql.ts

@@ -21,7 +21,8 @@ export default new GraphQLSchemaPlugin<AdminUsersContext>({
     resolvers: {
         AdminUsersQuery: {
             version: async (_, __, context) => {
-                return await context.adminUsers.getVersion();
+                const version = await context.adminUsers.getVersion();
+                return version ? "true" : null;
             }
         },
         AdminUsersMutation: {

packages/api-file-manager/src/graphql/baseSchema.ts

@@ -87,7 +87,8 @@ export const createBaseSchema = () => {
                         return null;
                     }
 
-                    return await fileManager.getVersion();
+                    const version = await fileManager.getVersion();
+                    return version ? "true" : null;
                 },
                 async getSettings(_, __, context) {
                     return resolve(() => context.fileManager.getSettings());

packages/api-form-builder/src/plugins/graphql.ts

@@ -60,7 +60,8 @@ const plugin: GraphQLSchemaPlugin<FormBuilderContext> = {
                     }
 
                     try {
-                        return formBuilder.getSystemVersion();
+                        const version = await formBuilder.getSystemVersion();
+                        return version ? "true" : null;
                     } catch (e) {
                         return new ErrorResponse({
                             code: "FORM_BUILDER_ERROR",

packages/api-headless-cms/src/graphql/system.ts

@@ -40,7 +40,8 @@ const plugin = new GraphQLSchemaPlugin({
         CmsQuery: {
             version: async (_: any, __: any, context: CmsContext) => {
                 try {
-                    return context.cms.getSystemVersion();
+                    const version = await context.cms.getSystemVersion();
+                    return version ? "true" : null;
                 } catch (e) {
                     return new ErrorResponse(e);
                 }

packages/api-headless-cms/src/types.ts

@@ -264,6 +264,7 @@ export interface CmsDynamicZoneTemplate {
     fields: CmsModelField[];
     layout: string[][];
     validation: CmsModelFieldValidation[];
+    tags?: string[];
 }
 
 /**

packages/api-i18n/src/graphql/graphql/installation.ts

@@ -30,7 +30,8 @@ export const createInstallationGraphQL = (): GraphQLSchemaPlugin<I18NContext> =>
                             return null;
                         }
 
-                        return i18n.system.getSystemVersion();
+                        const version = await i18n.system.getSystemVersion();
+                        return version ? "true" : null;
                     }
                 },
                 I18NMutation: {

packages/api-page-builder/src/graphql/graphql/install.gql.ts

@@ -36,7 +36,8 @@ export const createInstallGraphQL = (): GraphQLSchemaPlugin<PbContext> => {
                             return null;
                         }
 
-                        return pageBuilder.getSystemVersion();
+                        const version = await pageBuilder.getSystemVersion();
+                        return version ? "true" : null;
                     }
                 },
                 PbMutation: {

packages/api-security/src/graphql/install.gql.ts

@@ -17,7 +17,8 @@ export default new GraphQLSchemaPlugin<SecurityContext>({
     resolvers: {
         SecurityQuery: {
             version: async (_, __, context) => {
-                return await context.security.getVersion();
+                const version = await context.security.getVersion();
+                return version ? "true" : null;
             }
         },
         SecurityMutation: {

packages/api-tenancy/src/graphql/full.gql.ts

@@ -51,7 +51,8 @@ export default [
             },
             TenancyQuery: {
                 version: async (_, __, context) => {
-                    return await context.tenancy.getVersion();
+                    const version = await context.tenancy.getVersion();
+                    return version ? "true" : null;
                 }
             },
             TenancyMutation: {

packages/app-admin-cognito/package.json

@@ -21,14 +21,14 @@
     "@webiny/app-security": "0.0.0",
     "@webiny/form": "0.0.0",
     "@webiny/plugins": "0.0.0",
+    "@webiny/react-composition": "0.0.0",
     "@webiny/ui": "0.0.0",
     "@webiny/validation": "0.0.0",
     "apollo-client": "^2.6.10",
     "apollo-link-context": "^1.0.20",
     "emotion": "^10.0.27",
     "react": "17.0.2",
-    "react-dom": "17.0.2",
-    "react-social-login-buttons": "^3.9.1"
+    "react-dom": "17.0.2"
   },
   "devDependencies": {
     "@babel/cli": "^7.23.9",
@@ -54,6 +54,9 @@
   },
   "adio": {
     "ignore": {
+      "dependencies": [
+        "@webiny/react-composition"
+      ],
       "peerDependencies": [
         "react-dom"
       ]

packages/app-admin-cognito/src/components/Divider.tsx

@@ -0,0 +1,5 @@
+import styled from "@emotion/styled";
+
+export const Divider = styled.div`
+    border-top: 1px solid #ececec;
+`;

packages/app-admin-cognito/src/components/FederatedProviders.tsx

@@ -0,0 +1,25 @@
+import React from "react";
+import styled from "@emotion/styled";
+import { makeDecoratable } from "@webiny/app-admin";
+
+const FlexContainer = styled.div`
+    display: flex;
+    column-gap: 10px;
+    padding-top: 20px;
+    justify-content: center;
+`;
+
+export interface ContainerProps {
+    children: React.ReactNode;
+}
+
+export const Container = makeDecoratable(
+    "FederatedProvidersContainer",
+    ({ children }: ContainerProps) => {
+        return <FlexContainer>{children}</FlexContainer>;
+    }
+);
+
+export const FederatedProviders = {
+    Container
+};

packages/app-admin-cognito/src/components/View.tsx

@@ -0,0 +1,71 @@
+import * as React from "react";
+import { Logo, makeDecoratable } from "@webiny/app-admin";
+import * as Styled from "./StyledComponents";
+import { Elevation } from "@webiny/ui/Elevation";
+import { Cell, Grid } from "@webiny/ui/Grid";
+import { Typography } from "@webiny/ui/Typography";
+
+export interface ContainerProps {
+    children: React.ReactNode;
+}
+
+const Container = makeDecoratable("ViewContainer", ({ children }: ContainerProps) => (
+    <Styled.Wrapper>
+        <Styled.LogoWrapper>
+            <Logo />
+        </Styled.LogoWrapper>
+        <Styled.LoginContent>{children}</Styled.LoginContent>
+    </Styled.Wrapper>
+));
+
+export interface ContentProps {
+    children: React.ReactNode;
+}
+
+const Content = makeDecoratable("ViewContent", ({ children }: ContentProps) => (
+    <Elevation z={2}>
+        <Styled.InnerContent>{children}</Styled.InnerContent>
+    </Elevation>
+));
+
+export interface FooterProps {
+    children: React.ReactNode;
+}
+
+const Footer = makeDecoratable("ViewFooter", ({ children }: FooterProps) => {
+    return (
+        <Grid>
+            <Cell span={12} style={{ textAlign: "center" }}>
+                {children}
+            </Cell>
+        </Grid>
+    );
+});
+
+export interface TitleProps {
+    title: string;
+    description?: React.ReactNode;
+}
+
+const Title = makeDecoratable("ViewTitle", ({ title, description }: TitleProps) => {
+    return (
+        <Styled.Title>
+            <h1>
+                <Typography use="headline4">{title}</Typography>
+            </h1>
+            {description ? (
+                <p>
+                    <Typography use="body1">{description}</Typography>
+                </p>
+            ) : null}
+        </Styled.Title>
+    );
+});
+
+export const View = {
+    Container,
+    Logo,
+    Content,
+    Title,
+    Footer
+};

packages/app-admin-cognito/src/federatedIdentityProviders.ts

@@ -0,0 +1,18 @@
+import React from "react";
+
+export const federatedIdentityProviders: Record<string, string> = {
+    cognito: "COGNITO",
+    google: "Google",
+    facebook: "Facebook",
+    amazon: "LoginWithAmazon",
+    apple: "SignInWithApple"
+};
+
+export interface SignInProps {
+    signIn: () => void;
+}
+
+export type FederatedIdentityProvider = {
+    name: string;
+    component: React.FunctionComponent<SignInProps>;
+};

packages/app-admin-cognito/src/index.tsx

@@ -1,6 +1,6 @@
 import React, { useCallback, useEffect, useState } from "react";
 import { Auth } from "@aws-amplify/auth";
-import { AuthOptions, CognitoHostedUIIdentityProvider } from "@aws-amplify/auth/lib-esm/types";
+import { AuthOptions } from "@aws-amplify/auth/lib-esm/types";
 import ApolloClient from "apollo-client";
 import { useApolloClient } from "@apollo/react-hooks";
 import { setContext } from "apollo-link-context";
@@ -11,12 +11,21 @@ import { CognitoIdToken } from "@webiny/app-cognito-authenticator/types";
 import { Authenticator } from "@webiny/app-cognito-authenticator/Authenticator";
 import { useSecurity } from "@webiny/app-security";
 import { config as appConfig } from "@webiny/app/config";
-import SignIn from "~/views/SignIn";
-import RequireNewPassword from "~/views/RequireNewPassword";
-import ForgotPassword from "~/views/ForgotPassword";
-import SetNewPassword from "~/views/SetNewPassword";
-import SignedIn from "~/views/SignedIn";
-import LoggingIn from "~/views/LoggingIn";
+import { SignIn } from "~/views/SignIn";
+import { RequireNewPassword } from "~/views/RequireNewPassword";
+import { ForgotPassword } from "~/views/ForgotPassword";
+import { SetNewPassword } from "~/views/SetNewPassword";
+import { SignedIn } from "~/views/SignedIn";
+import { LoggingIn } from "~/views/LoggingIn";
+import { FederatedIdentityProvider } from "~/federatedIdentityProviders";
+import { FederatedProviders } from "~/components/FederatedProviders";
+import { View } from "~/components/View";
+
+export const Components = {
+    View,
+    FederatedProviders,
+    SignIn
+};
 
 const createApolloLinkPlugin = (): ApolloLinkPlugin => {
     return new ApolloLinkPlugin(() => {
@@ -63,22 +72,22 @@ export interface AuthenticationProps {
     children: React.ReactNode;
 }
 
-export type CognitoFederatedProvider = keyof typeof CognitoHostedUIIdentityProvider;
-
 export interface AuthenticationFactoryConfig extends AuthOptions {
-    federatedProviders?: CognitoFederatedProvider[];
-    onError?(error: Error): void;
-    getIdentityData(params: {
+    allowSignInWithCredentials?: boolean;
+    federatedProviders?: FederatedIdentityProvider[];
+    onError?: (error: Error) => void;
+    getIdentityData: (params: {
         client: ApolloClient<any>;
         payload: { [key: string]: any };
-    }): Promise<{ [key: string]: any }>;
+    }) => Promise<{ [key: string]: any }>;
 }
 
 interface AuthenticationFactory {
     (params: AuthenticationFactoryConfig): React.ComponentType<AuthenticationProps>;
 }
 
 export const createAuthentication: AuthenticationFactory = ({
+    allowSignInWithCredentials = true,
     getIdentityData,
     onError,
     ...config
@@ -142,7 +151,10 @@ export const createAuthentication: AuthenticationFactory = ({
                 {loadingIdentity ? (
                     <LoggingIn />
                 ) : (
-                    <SignIn federatedProviders={config.federatedProviders} />
+                    <SignIn
+                        federatedProviders={config.federatedProviders}
+                        allowSignInWithCredentials={allowSignInWithCredentials}
+                    />
                 )}
                 <RequireNewPassword />
                 <ForgotPassword />

packages/app-admin-cognito/src/views/FederatedLogin.tsx

@@ -1,48 +1,37 @@
 import React from "react";
-import styled from "@emotion/styled";
-import { Auth, CognitoHostedUIIdentityProvider } from "@aws-amplify/auth";
+import { Auth } from "@aws-amplify/auth";
+import { CognitoHostedUIIdentityProvider } from "@aws-amplify/auth/lib-esm/types/Auth";
 import {
-    FacebookLoginButton,
-    GoogleLoginButton,
-    AppleLoginButton,
-    AmazonLoginButton
-} from "react-social-login-buttons";
-import { CognitoFederatedProvider } from "~/index";
-
-const federatedButtons = {
-    Facebook: FacebookLoginButton,
-    Google: GoogleLoginButton,
-    Amazon: AmazonLoginButton,
-    Apple: AppleLoginButton,
-    Cognito: () => null
-};
-
-const FederatedContainer = styled.div`
-    border-top: 1px solid #ececec;
-    padding-top: 20px;
-`;
+    federatedIdentityProviders,
+    FederatedIdentityProvider
+} from "~/federatedIdentityProviders";
+import { FederatedProviders } from "~/components/FederatedProviders";
 
 interface FederatedLoginProps {
-    providers: CognitoFederatedProvider[];
+    providers: FederatedIdentityProvider[];
 }
 
 export const FederatedLogin = ({ providers }: FederatedLoginProps) => {
     return (
-        <FederatedContainer>
-            {providers.map(provider => {
-                const Button = federatedButtons[provider];
+        <FederatedProviders.Container>
+            {providers.map(({ name, component: Component }) => {
+                const cognitoProviderName = federatedIdentityProviders[name] ?? name;
+                const isCustomProvider = !(name in federatedIdentityProviders);
+
+                const signIn = () => {
+                    if (isCustomProvider) {
+                        Auth.federatedSignIn({
+                            customProvider: cognitoProviderName
+                        });
+                    } else {
+                        Auth.federatedSignIn({
+                            provider: cognitoProviderName as CognitoHostedUIIdentityProvider
+                        });
+                    }
+                };
 
-                return (
-                    <Button
-                        key={provider}
-                        onClick={() =>
-                            Auth.federatedSignIn({
-                                provider: CognitoHostedUIIdentityProvider[provider]
-                            })
-                        }
-                    />
-                );
+                return <Component key={name} signIn={signIn} />;
             })}
-        </FederatedContainer>
+        </FederatedProviders.Container>
     );
 };