add resource works (#1137)
This commit is contained in:
Родитель
c6bb601b38
Коммит
404656023b
|
@ -20,12 +20,12 @@ const closeModalAction = (): ICloseModal => ({
|
||||||
type: MODAL_TYPEKEYS.CLOSE_MODALS
|
type: MODAL_TYPEKEYS.CLOSE_MODALS
|
||||||
});
|
});
|
||||||
|
|
||||||
const openAzureLoginModalAction = () => {
|
const openAzureLoginModalAction = (serviceInternalName: string) => {
|
||||||
return (dispatch: Dispatch<ModalActionType>) => {
|
return (dispatch: Dispatch<ModalActionType>) => {
|
||||||
dispatch(
|
dispatch(
|
||||||
openModalAction({
|
openModalAction({
|
||||||
modalType: MODAL_TYPES.AZURE_LOGIN_MODAL,
|
modalType: MODAL_TYPES.AZURE_LOGIN_MODAL,
|
||||||
modalData: null
|
modalData: serviceInternalName
|
||||||
})
|
})
|
||||||
);
|
);
|
||||||
};
|
};
|
||||||
|
|
|
@ -4,7 +4,6 @@ import { connect } from "react-redux";
|
||||||
import { ThunkDispatch } from "redux-thunk";
|
import { ThunkDispatch } from "redux-thunk";
|
||||||
import classnames from "classnames";
|
import classnames from "classnames";
|
||||||
import { InjectedIntlProps, injectIntl, FormattedMessage } from "react-intl";
|
import { InjectedIntlProps, injectIntl, FormattedMessage } from "react-intl";
|
||||||
import * as ModalActions from "../../actions/modalActions/modalActions";
|
|
||||||
import styles from "./styles.module.css";
|
import styles from "./styles.module.css";
|
||||||
|
|
||||||
import {
|
import {
|
||||||
|
@ -25,7 +24,6 @@ import keyUpHandler from "../../utils/keyUpHandler";
|
||||||
|
|
||||||
interface IDispatchProps {
|
interface IDispatchProps {
|
||||||
setDetailPage: (detailPageInfo: IOption) => any;
|
setDetailPage: (detailPageInfo: IOption) => any;
|
||||||
openAzureLoginModal: () => any;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
interface IAzureLoginProps {
|
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() {
|
public render() {
|
||||||
const { isLoggedIn, intl, email, openAzureLoginModal } = this.props;
|
const { isLoggedIn, intl, email } = this.props;
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<div className={styles.centerViewAzure}>
|
<div className={styles.centerViewAzure}>
|
||||||
|
@ -98,20 +88,6 @@ class AzureLogin extends React.Component<Props> {
|
||||||
</div>
|
</div>
|
||||||
</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>
|
</div>
|
||||||
|
|
||||||
<AzureSubscriptions />
|
<AzureSubscriptions />
|
||||||
|
@ -135,9 +111,6 @@ const mapStateToProps = (state: AppState): IAzureLoginProps => {
|
||||||
const mapDispatchToProps = (
|
const mapDispatchToProps = (
|
||||||
dispatch: ThunkDispatch<AppState, void, RootAction>
|
dispatch: ThunkDispatch<AppState, void, RootAction>
|
||||||
): IDispatchProps => ({
|
): IDispatchProps => ({
|
||||||
openAzureLoginModal: () => {
|
|
||||||
dispatch(ModalActions.openAzureLoginModalAction());
|
|
||||||
},
|
|
||||||
setDetailPage: (detailPageInfo: IOption) => {
|
setDetailPage: (detailPageInfo: IOption) => {
|
||||||
const isIntlFormatted = true;
|
const isIntlFormatted = true;
|
||||||
dispatch(setDetailPageAction(detailPageInfo, isIntlFormatted));
|
dispatch(setDetailPageAction(detailPageInfo, isIntlFormatted));
|
||||||
|
|
|
@ -6,7 +6,6 @@ import asModal from "../../components/Modal";
|
||||||
import { injectIntl, InjectedIntlProps } from "react-intl";
|
import { injectIntl, InjectedIntlProps } from "react-intl";
|
||||||
import { closeModalAction } from "../../actions/modalActions/modalActions";
|
import { closeModalAction } from "../../actions/modalActions/modalActions";
|
||||||
import { AppState } from "../../reducers";
|
import { AppState } from "../../reducers";
|
||||||
import { Dispatch } from "redux";
|
|
||||||
import RootAction from "../../actions/ActionType";
|
import RootAction from "../../actions/ActionType";
|
||||||
import { isAzureLoginModalOpenSelector } from "../../selectors/modalSelector";
|
import { isAzureLoginModalOpenSelector } from "../../selectors/modalSelector";
|
||||||
import { EXTENSION_COMMANDS, EXTENSION_MODULES } from "../../utils/constants";
|
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 { KEY_EVENTS } from "../../utils/constants";
|
||||||
import { ReactComponent as Cancel } from "../../assets/cancel.svg";
|
import { ReactComponent as Cancel } from "../../assets/cancel.svg";
|
||||||
import CollapsibleInfoBox from "../../components/CollapsibleInfoBox";
|
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 {
|
interface IStateProps {
|
||||||
isModalOpen: boolean;
|
isModalOpen: boolean;
|
||||||
vscode: any;
|
vscode: any;
|
||||||
isLoggedIn: boolean;
|
isLoggedIn: boolean;
|
||||||
|
selectedAzureServiceName: string;
|
||||||
}
|
}
|
||||||
|
|
||||||
interface IDispatchProps {
|
interface IDispatchProps {
|
||||||
closeModal: () => any;
|
closeModal: () => any;
|
||||||
|
openAppServiceModal: () => any;
|
||||||
|
openCosmosDbModal: () => any;
|
||||||
}
|
}
|
||||||
|
|
||||||
type Props = IStateProps & IDispatchProps & InjectedIntlProps;
|
type Props = IStateProps & IDispatchProps & InjectedIntlProps;
|
||||||
|
|
||||||
const AzureLoginModal = (props: Props) => {
|
const AzureLoginModal = (props: Props) => {
|
||||||
const { formatMessage } = props.intl;
|
const { formatMessage } = props.intl;
|
||||||
const { isLoggedIn, closeModal } = props;
|
const {
|
||||||
|
isLoggedIn,
|
||||||
|
closeModal,
|
||||||
|
selectedAzureServiceName,
|
||||||
|
openAppServiceModal,
|
||||||
|
openCosmosDbModal
|
||||||
|
} = props;
|
||||||
const handleSignInClick = () => {
|
const handleSignInClick = () => {
|
||||||
// initiates a login command to VSCode ReactPanel class
|
// initiates a login command to VSCode ReactPanel class
|
||||||
props.vscode.postMessage({
|
props.vscode.postMessage({
|
||||||
|
@ -53,9 +64,20 @@ const AzureLoginModal = (props: Props) => {
|
||||||
};
|
};
|
||||||
|
|
||||||
React.useEffect(() => {
|
React.useEffect(() => {
|
||||||
// close sign in modal when user logs in
|
// close sign in modal and opens azure service form
|
||||||
if (isLoggedIn) {
|
if (isLoggedIn) {
|
||||||
closeModal();
|
closeModal();
|
||||||
|
if (
|
||||||
|
selectedAzureServiceName &&
|
||||||
|
selectedAzureServiceName === WIZARD_CONTENT_INTERNAL_NAMES.APP_SERVICE
|
||||||
|
) {
|
||||||
|
openAppServiceModal();
|
||||||
|
} else if (
|
||||||
|
selectedAzureServiceName &&
|
||||||
|
selectedAzureServiceName === WIZARD_CONTENT_INTERNAL_NAMES.APP_SERVICE
|
||||||
|
) {
|
||||||
|
openCosmosDbModal();
|
||||||
|
}
|
||||||
}
|
}
|
||||||
}, [isLoggedIn]);
|
}, [isLoggedIn]);
|
||||||
|
|
||||||
|
@ -145,14 +167,21 @@ const mapStateToProps = (state: AppState): IStateProps => {
|
||||||
return {
|
return {
|
||||||
isModalOpen: isAzureLoginModalOpenSelector(state),
|
isModalOpen: isAzureLoginModalOpenSelector(state),
|
||||||
vscode: vscodeObject,
|
vscode: vscodeObject,
|
||||||
isLoggedIn
|
isLoggedIn,
|
||||||
|
selectedAzureServiceName: state.modals.openModal.modalData
|
||||||
};
|
};
|
||||||
};
|
};
|
||||||
const mapDispatchToProps = (
|
const mapDispatchToProps = (
|
||||||
dispatch: Dispatch<RootAction>
|
dispatch: ThunkDispatch<AppState, void, RootAction>
|
||||||
): IDispatchProps => ({
|
): IDispatchProps => ({
|
||||||
closeModal: () => {
|
closeModal: () => {
|
||||||
dispatch(closeModalAction());
|
dispatch(closeModalAction());
|
||||||
|
},
|
||||||
|
openCosmosDbModal: () => {
|
||||||
|
dispatch(ModalActions.openCosmosDbModalAction());
|
||||||
|
},
|
||||||
|
openAppServiceModal: () => {
|
||||||
|
dispatch(ModalActions.openAppServiceModalAction());
|
||||||
}
|
}
|
||||||
});
|
});
|
||||||
|
|
||||||
|
|
|
@ -35,6 +35,7 @@ interface IDispatchProps {
|
||||||
setDetailPage: (detailPageInfo: IOption) => void;
|
setDetailPage: (detailPageInfo: IOption) => void;
|
||||||
openAzureFunctionsModal: () => any;
|
openAzureFunctionsModal: () => any;
|
||||||
openAppServiceModal: () => any;
|
openAppServiceModal: () => any;
|
||||||
|
openAzureLoginModal: (serviceInternalName: string) => any;
|
||||||
}
|
}
|
||||||
|
|
||||||
interface IAzureLoginProps {
|
interface IAzureLoginProps {
|
||||||
|
@ -167,7 +168,7 @@ class AzureSubscriptions extends React.Component<Props, IState> {
|
||||||
subtitle?: FormattedMessage.MessageDescriptor
|
subtitle?: FormattedMessage.MessageDescriptor
|
||||||
) {
|
) {
|
||||||
const { formatMessage } = this.props.intl;
|
const { formatMessage } = this.props.intl;
|
||||||
const createdHostingServiceInternalName = this.getCreatedHostingService();
|
const { openAzureLoginModal } = this.props;
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<div
|
<div
|
||||||
|
@ -188,21 +189,6 @@ class AzureSubscriptions extends React.Component<Props, IState> {
|
||||||
// show cards with preview flag only if wizard is also in preview
|
// show cards with preview flag only if wizard is also in preview
|
||||||
const shouldShowCard = isPreview || !option.isPreview;
|
const shouldShowCard = isPreview || !option.isPreview;
|
||||||
if (shouldShowCard && option.type === type) {
|
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 (
|
return (
|
||||||
<div
|
<div
|
||||||
key={JSON.stringify(option.title)}
|
key={JSON.stringify(option.title)}
|
||||||
|
@ -215,10 +201,11 @@ class AzureSubscriptions extends React.Component<Props, IState> {
|
||||||
buttonText={this.addOrEditResourceText(
|
buttonText={this.addOrEditResourceText(
|
||||||
option.internalName
|
option.internalName
|
||||||
)}
|
)}
|
||||||
handleButtonClick={this.getServicesModalOpener(
|
handleButtonClick={
|
||||||
option.internalName
|
isLoggedIn
|
||||||
)}
|
? this.getServicesModalOpener(option.internalName)
|
||||||
disabled={isCardDisabled}
|
: () => openAzureLoginModal(option.internalName)
|
||||||
|
}
|
||||||
handleDetailsClick={setDetailPage}
|
handleDetailsClick={setDetailPage}
|
||||||
/>
|
/>
|
||||||
</div>
|
</div>
|
||||||
|
@ -307,6 +294,9 @@ const mapDispatchToProps = (
|
||||||
},
|
},
|
||||||
openAppServiceModal: () => {
|
openAppServiceModal: () => {
|
||||||
dispatch(ModalActions.openAppServiceModalAction());
|
dispatch(ModalActions.openAppServiceModalAction());
|
||||||
|
},
|
||||||
|
openAzureLoginModal: (serviceInternalName: string) => {
|
||||||
|
dispatch(ModalActions.openAzureLoginModalAction(serviceInternalName));
|
||||||
}
|
}
|
||||||
});
|
});
|
||||||
|
|
||||||
|
|
Загрузка…
Ссылка в новой задаче