Merge branch 'fix/invite-users' into 'release'

Fix - Invite Users

See merge request theappsmith/internal-tools-client!237

app/client/src/components/editorComponents/form/FormFooter.tsx

@@ -11,7 +11,7 @@ type FormFooterProps = {
   submitText?: string;
   cancelText?: string;
   submitOnEnter?: boolean;
-  canSubmit: boolean;
+  canSubmit?: boolean;
 };
 
 const FooterActions = styled.div`
@@ -47,7 +47,7 @@ export const FormFooter = (props: FormFooterProps) => {
             type={props.submitOnEnter ? "submit" : "button"}
             intent="primary"
             onClick={props.onSubmit}
-            disabled={!props.canSubmit}
+            disabled={props.canSubmit === false}
             loading={props.submitting}
             large
           />

app/client/src/constants/orgConstants.ts

@@ -1,6 +1,7 @@
 export type OrgRole = {
   id: string;
   name: string;
+  displayName?: string;
   isDefault?: boolean;
 };
 

app/client/src/index.tsx

@@ -1,4 +1,5 @@
 import React, { lazy, Suspense } from "react";
+import { Helmet } from "react-helmet";
 import ReactDOM from "react-dom";
 import { Provider } from "react-redux";
 import Loader from "pages/common/Loader";
@@ -36,6 +37,10 @@ ReactDOM.render(
   <DndProvider backend={HTML5Backend}>
     <Provider store={store}>
       <ThemeProvider theme={theme}>
+        <Helmet>
+          <meta charSet="utf-8" />
+          <link rel="shortcut icon" href="/favicon-orange.ico" />
+        </Helmet>
         <Router history={history}>
           <Suspense fallback={loadingIndicator}>
             <Switch>

app/client/src/pages/Editor/index.tsx

@@ -103,7 +103,6 @@ class Editor extends Component<EditorProps> {
         <Helmet>
           <meta charSet="utf-8" />
           <title>Editor | Appsmith</title>
-          <link rel="shortcut icon" href="/favicon-orange.ico" />
         </Helmet>
         <EditorHeader
           isSaving={this.props.isSaving}

app/client/src/pages/common/PageWrapper.tsx

@@ -49,9 +49,7 @@ type PageWrapperProps = {
 export const PageWrapper = (props: PageWrapperProps) => (
   <Wrapper>
     <Helmet>
-      <meta charSet="utf-8" />
       <title>{`${props.displayName} | Appsmith`}</title>
-      <link rel="shortcut icon" href="/favicon-black.ico" />
     </Helmet>
     <PageHeader />
     <PageBody>{props.children}</PageBody>

app/client/src/pages/organization/InviteUsersForm.tsx

@@ -187,10 +187,9 @@ export const InviteUsersForm = (props: InviteUsersFormProps) => {
     roles,
     initialize,
     defaultRole,
-    pristine,
+    anyTouched,
   } = props;
   const history = useHistory();
-
   useEffect(() => {
     if (!roles) {
       fetchRoles();
@@ -232,8 +231,7 @@ export const InviteUsersForm = (props: InviteUsersFormProps) => {
       <FormFooter
         divider
         onSubmit={handleSubmit(inviteUsersToOrgSubmitHandler)}
-        canSubmit={!pristine}
-        submitting={submitting && !submitFailed}
+        submitting={submitting && !(submitFailed && !anyTouched)}
         onCancel={() => history.goBack()}
         submitOnEnter={false}
         submitText={INVITE_USERS_SUBMIT_BUTTON_TEXT}

app/client/src/selectors/organizationSelectors.tsx

@@ -1,26 +1,32 @@
 import { createSelector } from "reselect";
 import { AppState } from "reducers";
 import { OrgRole, Org } from "constants/orgConstants";
-import _ from "lodash";
 
+export const getRolesFromState = (state: AppState) => state.ui.orgs.roles;
 export const getOrgs = (state: AppState) => state.ui.orgs.list;
 export const getCurrentUserOrgId = (state: AppState) =>
   state.ui.users.current?.currentOrganizationId;
+
 export const getCurrentOrg = createSelector(
   getOrgs,
   getCurrentUserOrgId,
   (orgs?: Org[], id?: string) => {
-    if (orgs && id) {
-      return _.find(orgs, { id: id });
+    if (id) {
+      return orgs?.find(org => org.id === id);
     }
-    return undefined;
   },
 );
 
-export const getRoles = (state: AppState): OrgRole[] | undefined => {
-  return state.ui.orgs.roles;
-};
+export const getRoles = createSelector(getRolesFromState, (roles?: OrgRole[]):
+  | OrgRole[]
+  | undefined => {
+  return roles?.map(role => ({
+    id: role.id,
+    name: role.displayName || role.name,
+    isDefault: role.isDefault,
+  }));
+});
 
-export const getDefaultRole = (state: AppState): OrgRole | undefined => {
-  return state.ui.orgs.roles?.find(role => role.isDefault);
-};
+export const getDefaultRole = createSelector(getRoles, (roles?: OrgRole[]) => {
+  return roles?.find(role => role.isDefault);
+});