add resource works (#1137)

src/client/src/actions/modalActions/modalActions.ts

@@ -20,12 +20,12 @@ const closeModalAction = (): ICloseModal => ({
   type: MODAL_TYPEKEYS.CLOSE_MODALS
 });
 
-const openAzureLoginModalAction = () => {
+const openAzureLoginModalAction = (serviceInternalName: string) => {
   return (dispatch: Dispatch<ModalActionType>) => {
     dispatch(
       openModalAction({
         modalType: MODAL_TYPES.AZURE_LOGIN_MODAL,
-        modalData: null
+        modalData: serviceInternalName
       })
     );
   };

src/client/src/containers/AzureLogin/index.tsx

@@ -4,7 +4,6 @@ import { connect } from "react-redux";
 import { ThunkDispatch } from "redux-thunk";
 import classnames from "classnames";
 import { InjectedIntlProps, injectIntl, FormattedMessage } from "react-intl";
-import * as ModalActions from "../../actions/modalActions/modalActions";
 import styles from "./styles.module.css";
 
 import {
@@ -25,7 +24,6 @@ import keyUpHandler from "../../utils/keyUpHandler";
 
 interface IDispatchProps {
   setDetailPage: (detailPageInfo: IOption) => any;
-  openAzureLoginModal: () => any;
 }
 
 interface IAzureLoginProps {
@@ -53,16 +51,8 @@ class AzureLogin extends React.Component<Props> {
     }
   };
 
-  signInKeyDownHandler = (event: React.KeyboardEvent) => {
-    if (event.key === KEY_EVENTS.ENTER || event.key === KEY_EVENTS.SPACE) {
-      event.preventDefault();
-      event.stopPropagation();
-      this.props.openAzureLoginModal();
-    }
-  };
-
   public render() {
-    const { isLoggedIn, intl, email, openAzureLoginModal } = this.props;
+    const { isLoggedIn, intl, email } = this.props;
 
     return (
       <div className={styles.centerViewAzure}>
@@ -98,20 +88,6 @@ class AzureLogin extends React.Component<Props> {
                 </div>
               </div>
             )}
-            {!isLoggedIn && (
-              <div
-                role="button"
-                tabIndex={0}
-                className={classnames(styles.loginButton, styles.azureProfile)}
-                onClick={openAzureLoginModal}
-                onKeyDown={this.signInKeyDownHandler}
-              >
-                <FormattedMessage
-                  id="header.signIn"
-                  defaultMessage="Log In / Create an Account"
-                />
-              </div>
-            )}
           </div>
 
           <AzureSubscriptions />
@@ -135,9 +111,6 @@ const mapStateToProps = (state: AppState): IAzureLoginProps => {
 const mapDispatchToProps = (
   dispatch: ThunkDispatch<AppState, void, RootAction>
 ): IDispatchProps => ({
-  openAzureLoginModal: () => {
-    dispatch(ModalActions.openAzureLoginModalAction());
-  },
   setDetailPage: (detailPageInfo: IOption) => {
     const isIntlFormatted = true;
     dispatch(setDetailPageAction(detailPageInfo, isIntlFormatted));

src/client/src/containers/AzureLoginModal/index.tsx

@@ -6,7 +6,6 @@ import asModal from "../../components/Modal";
 import { injectIntl, InjectedIntlProps } from "react-intl";
 import { closeModalAction } from "../../actions/modalActions/modalActions";
 import { AppState } from "../../reducers";
-import { Dispatch } from "redux";
 import RootAction from "../../actions/ActionType";
 import { isAzureLoginModalOpenSelector } from "../../selectors/modalSelector";
 import { EXTENSION_COMMANDS, EXTENSION_MODULES } from "../../utils/constants";
@@ -19,22 +18,34 @@ import { strings as messages } from "./strings";
 import { KEY_EVENTS } from "../../utils/constants";
 import { ReactComponent as Cancel } from "../../assets/cancel.svg";
 import CollapsibleInfoBox from "../../components/CollapsibleInfoBox";
+import { WIZARD_CONTENT_INTERNAL_NAMES } from "../../utils/constants";
+import * as ModalActions from "../../actions/modalActions/modalActions";
+import { ThunkDispatch } from "redux-thunk";
 
 interface IStateProps {
   isModalOpen: boolean;
   vscode: any;
   isLoggedIn: boolean;
+  selectedAzureServiceName: string;
 }
 
 interface IDispatchProps {
   closeModal: () => any;
+  openAppServiceModal: () => any;
+  openCosmosDbModal: () => any;
 }
 
 type Props = IStateProps & IDispatchProps & InjectedIntlProps;
 
 const AzureLoginModal = (props: Props) => {
   const { formatMessage } = props.intl;
-  const { isLoggedIn, closeModal } = props;
+  const {
+    isLoggedIn,
+    closeModal,
+    selectedAzureServiceName,
+    openAppServiceModal,
+    openCosmosDbModal
+  } = props;
   const handleSignInClick = () => {
     // initiates a login command to VSCode ReactPanel class
     props.vscode.postMessage({
@@ -53,9 +64,20 @@ const AzureLoginModal = (props: Props) => {
   };
 
   React.useEffect(() => {
-    // close sign in modal when user logs in
+    // close sign in modal and opens azure service form
     if (isLoggedIn) {
       closeModal();
+      if (
+        selectedAzureServiceName &&
+        selectedAzureServiceName === WIZARD_CONTENT_INTERNAL_NAMES.APP_SERVICE
+      ) {
+        openAppServiceModal();
+      } else if (
+        selectedAzureServiceName &&
+        selectedAzureServiceName === WIZARD_CONTENT_INTERNAL_NAMES.APP_SERVICE
+      ) {
+        openCosmosDbModal();
+      }
     }
   }, [isLoggedIn]);
 
@@ -145,14 +167,21 @@ const mapStateToProps = (state: AppState): IStateProps => {
   return {
     isModalOpen: isAzureLoginModalOpenSelector(state),
     vscode: vscodeObject,
-    isLoggedIn
+    isLoggedIn,
+    selectedAzureServiceName: state.modals.openModal.modalData
   };
 };
 const mapDispatchToProps = (
-  dispatch: Dispatch<RootAction>
+  dispatch: ThunkDispatch<AppState, void, RootAction>
 ): IDispatchProps => ({
   closeModal: () => {
     dispatch(closeModalAction());
+  },
+  openCosmosDbModal: () => {
+    dispatch(ModalActions.openCosmosDbModalAction());
+  },
+  openAppServiceModal: () => {
+    dispatch(ModalActions.openAppServiceModalAction());
   }
 });
 

src/client/src/containers/AzureSubscriptions/index.tsx

@@ -35,6 +35,7 @@ interface IDispatchProps {
   setDetailPage: (detailPageInfo: IOption) => void;
   openAzureFunctionsModal: () => any;
   openAppServiceModal: () => any;
+  openAzureLoginModal: (serviceInternalName: string) => any;
 }
 
 interface IAzureLoginProps {
@@ -167,7 +168,7 @@ class AzureSubscriptions extends React.Component<Props, IState> {
     subtitle?: FormattedMessage.MessageDescriptor
   ) {
     const { formatMessage } = this.props.intl;
-    const createdHostingServiceInternalName = this.getCreatedHostingService();
+    const { openAzureLoginModal } = this.props;
 
     return (
       <div
@@ -188,21 +189,6 @@ class AzureSubscriptions extends React.Component<Props, IState> {
               // show cards with preview flag only if wizard is also in preview
               const shouldShowCard = isPreview || !option.isPreview;
               if (shouldShowCard && option.type === type) {
-                let isCardDisabled: boolean = !isLoggedIn;
-
-                switch (option.type) {
-                  case servicesEnum.HOSTING:
-                    // if a hosting service is already created, any other hosting services card should be disabled
-                    if (createdHostingServiceInternalName) {
-                      isCardDisabled =
-                        option.internalName !==
-                        createdHostingServiceInternalName;
-                    }
-                    break;
-                  default:
-                    break;
-                }
-
                 return (
                   <div
                     key={JSON.stringify(option.title)}
@@ -215,10 +201,11 @@ class AzureSubscriptions extends React.Component<Props, IState> {
                       buttonText={this.addOrEditResourceText(
                         option.internalName
                       )}
-                      handleButtonClick={this.getServicesModalOpener(
-                        option.internalName
-                      )}
-                      disabled={isCardDisabled}
+                      handleButtonClick={
+                        isLoggedIn
+                          ? this.getServicesModalOpener(option.internalName)
+                          : () => openAzureLoginModal(option.internalName)
+                      }
                       handleDetailsClick={setDetailPage}
                     />
                   </div>
@@ -307,6 +294,9 @@ const mapDispatchToProps = (
   },
   openAppServiceModal: () => {
     dispatch(ModalActions.openAppServiceModalAction());
+  },
+  openAzureLoginModal: (serviceInternalName: string) => {
+    dispatch(ModalActions.openAzureLoginModalAction(serviceInternalName));
   }
 });