From dffe4664050c83c8a0423644456868b29255ff46 Mon Sep 17 00:00:00 2001 From: Eduard Heimbuch Date: Wed, 2 Dec 2020 13:26:31 +0100 Subject: [PATCH] split AddRepository component into two separate components to simplify the state handling --- scm-ui/ui-webapp/src/containers/Main.tsx | 9 +-- .../components/ImportRepositoryFromUrl.tsx | 8 +-- ...AddRepository.tsx => CreateRepository.tsx} | 71 ++++--------------- .../src/repos/containers/ImportRepository.tsx | 65 ++++++++++++++--- .../main/resources/locales/de/plugins.json | 2 +- .../main/resources/locales/en/plugins.json | 2 +- 6 files changed, 81 insertions(+), 76 deletions(-) rename scm-ui/ui-webapp/src/repos/containers/{AddRepository.tsx => CreateRepository.tsx} (73%) diff --git a/scm-ui/ui-webapp/src/containers/Main.tsx b/scm-ui/ui-webapp/src/containers/Main.tsx index b7742867f8..965610d668 100644 --- a/scm-ui/ui-webapp/src/containers/Main.tsx +++ b/scm-ui/ui-webapp/src/containers/Main.tsx @@ -31,13 +31,13 @@ import Users from "../users/containers/Users"; import Login from "../containers/Login"; import Logout from "../containers/Logout"; -import { ProtectedRoute, ErrorBoundary } from "@scm-manager/ui-components"; +import { ErrorBoundary, ProtectedRoute } from "@scm-manager/ui-components"; import { binder, ExtensionPoint } from "@scm-manager/ui-extensions"; import CreateUser from "../users/containers/CreateUser"; import SingleUser from "../users/containers/SingleUser"; import RepositoryRoot from "../repos/containers/RepositoryRoot"; -import AddRepository from "../repos/containers/AddRepository"; +import CreateRepository from "../repos/containers/CreateRepository"; import Groups from "../groups/containers/Groups"; import SingleGroup from "../groups/containers/SingleGroup"; @@ -47,6 +47,7 @@ import Admin from "../admin/containers/Admin"; import Profile from "./Profile"; import NamespaceRoot from "../repos/namespaces/containers/NamespaceRoot"; +import ImportRepository from "../repos/containers/ImportRepository"; type Props = { me: Me; @@ -77,8 +78,8 @@ class Main extends React.Component { - - + + diff --git a/scm-ui/ui-webapp/src/repos/components/ImportRepositoryFromUrl.tsx b/scm-ui/ui-webapp/src/repos/components/ImportRepositoryFromUrl.tsx index 066de25cd4..fb1a9e0ed7 100644 --- a/scm-ui/ui-webapp/src/repos/components/ImportRepositoryFromUrl.tsx +++ b/scm-ui/ui-webapp/src/repos/components/ImportRepositoryFromUrl.tsx @@ -49,21 +49,21 @@ const ImportRepositoryFromUrl: FC = ({ url, setImportPending }) => { }); const [valid, setValid] = useState({ namespaceAndName: false, contact: true, importUrl: false }); - const isValid = () => { - return Object.values(valid).every(v => v); - }; const [loading, setLoading] = useState(false); const [error, setError] = useState(); const history = useHistory(); const [t] = useTranslation("repos"); + const isValid = () => Object.values(valid).every(v => v); + const handleImportLoading = (loading: boolean) => { - setLoading(loading); setImportPending(loading); + setLoading(loading); }; const submit = (event: FormEvent) => { event.preventDefault(); + setError(undefined); const currentPath = history.location.pathname; handleImportLoading(true); apiClient diff --git a/scm-ui/ui-webapp/src/repos/containers/AddRepository.tsx b/scm-ui/ui-webapp/src/repos/containers/CreateRepository.tsx similarity index 73% rename from scm-ui/ui-webapp/src/repos/containers/AddRepository.tsx rename to scm-ui/ui-webapp/src/repos/containers/CreateRepository.tsx index ef254c8f49..fa2cbc5a44 100644 --- a/scm-ui/ui-webapp/src/repos/containers/AddRepository.tsx +++ b/scm-ui/ui-webapp/src/repos/containers/CreateRepository.tsx @@ -45,7 +45,6 @@ import { } from "../../admin/modules/namespaceStrategies"; import { RouteComponentProps, withRouter } from "react-router-dom"; import { compose } from "redux"; -import ImportRepository from "./ImportRepository"; type Props = WithTranslation & RouteComponentProps & { @@ -72,19 +71,7 @@ type Props = WithTranslation & history: History; }; -type State = { - importPending: boolean; -}; - -class AddRepository extends React.Component { - constructor(props: Props) { - super(props); - - this.state = { - importPending: false - }; - } - +class CreateRepository extends React.Component { componentDidMount() { this.props.resetForm(); this.props.fetchRepositoryTypesIfNeeded(); @@ -95,30 +82,6 @@ class AddRepository extends React.Component { this.props.history.push("/repo/" + repo.namespace + "/" + repo.name); }; - resolveLocation = () => { - const currentUrl = this.props.location.pathname; - if (currentUrl.includes("/repos/create")) { - return "create"; - } - if (currentUrl.includes("/repos/import")) { - return "import"; - } - return ""; - }; - - isImportPage = () => this.resolveLocation() === "import"; - isCreatePage = () => this.resolveLocation() === "create"; - - getSubtitle = () => { - if (this.isCreatePage()) { - return "create.subtitle"; - } else if (this.isImportPage() && this.state.importPending) { - return "import.pending.subtitle"; - } else { - return "import.subtitle"; - } - }; - render() { const { pageLoading, @@ -135,29 +98,21 @@ class AddRepository extends React.Component { return ( } + subtitle={t("create.subtitle")} + afterTitle={} loading={pageLoading} error={error} showContentOnError={true} > - {this.isImportPage() && ( - this.setState({ importPending })} - /> - )} - {this.isCreatePage() && ( - { - createRepo(repoLink, repo, initRepository, (repo: Repository) => this.repoCreated(repo)); - }} - indexResources={indexResources} - /> - )} + { + createRepo(repoLink, repo, initRepository, (repo: Repository) => this.repoCreated(repo)); + }} + indexResources={indexResources} + /> ); } @@ -205,4 +160,4 @@ export default compose( withRouter, withTranslation("repos"), connect(mapStateToProps, mapDispatchToProps) -)(AddRepository); +)(CreateRepository); diff --git a/scm-ui/ui-webapp/src/repos/containers/ImportRepository.tsx b/scm-ui/ui-webapp/src/repos/containers/ImportRepository.tsx index f48a3fe71a..bc7631db68 100644 --- a/scm-ui/ui-webapp/src/repos/containers/ImportRepository.tsx +++ b/scm-ui/ui-webapp/src/repos/containers/ImportRepository.tsx @@ -29,22 +29,41 @@ import { useTranslation } from "react-i18next"; import ImportRepositoryTypeSelect from "../components/ImportRepositoryTypeSelect"; import ImportTypeSelect from "../components/ImportTypeSelect"; import ImportRepositoryFromUrl from "../components/ImportRepositoryFromUrl"; -import { Loading, Notification } from "@scm-manager/ui-components"; +import { Loading, Notification, Page } from "@scm-manager/ui-components"; +import RepositoryFormSwitcher from "../components/form/RepositoryFormSwitcher"; +import { + fetchRepositoryTypesIfNeeded, + getFetchRepositoryTypesFailure, + getRepositoryTypes, + isFetchRepositoryTypesPending +} from "../modules/repositoryTypes"; +import { connect } from "react-redux"; +import { fetchNamespaceStrategiesIfNeeded } from "../../admin/modules/namespaceStrategies"; type Props = { repositoryTypes: RepositoryType[]; - setPending: (pending: boolean) => void; + pageLoading: boolean; + error?: Error; + fetchRepositoryTypesIfNeeded: () => void; + fetchNamespaceStrategiesIfNeeded: () => void; }; -const ImportRepository: FC = ({ repositoryTypes, setPending }) => { +const ImportRepository: FC = ({ + repositoryTypes, + pageLoading, + error, + fetchRepositoryTypesIfNeeded, + fetchNamespaceStrategiesIfNeeded +}) => { const [importPending, setImportPending] = useState(false); const [repositoryType, setRepositoryType] = useState(); const [importType, setImportType] = useState(""); const [t] = useTranslation("repos"); useEffect(() => { - setPending(importPending); - }, [importPending]); + fetchRepositoryTypesIfNeeded(); + fetchNamespaceStrategiesIfNeeded(); + }, [repositoryTypes]); const changeRepositoryType = (repositoryType: RepositoryType) => { setRepositoryType(repositoryType); @@ -65,7 +84,14 @@ const ImportRepository: FC = ({ repositoryTypes, setPending }) => { }; return ( -
+ } + loading={pageLoading} + error={error} + showContentOnError={true} + > {importPending && ( <> {t("import.pending.infoText")} @@ -92,8 +118,31 @@ const ImportRepository: FC = ({ repositoryTypes, setPending }) => { )} {importType && renderImportComponent()} -
+ ); }; -export default ImportRepository; +const mapStateToProps = (state: any) => { + const repositoryTypes = getRepositoryTypes(state); + const pageLoading = isFetchRepositoryTypesPending(state); + const error = getFetchRepositoryTypesFailure(state); + + return { + repositoryTypes, + pageLoading, + error + }; +}; + +const mapDispatchToProps = (dispatch: any) => { + return { + fetchRepositoryTypesIfNeeded: () => { + dispatch(fetchRepositoryTypesIfNeeded()); + }, + fetchNamespaceStrategiesIfNeeded: () => { + dispatch(fetchNamespaceStrategiesIfNeeded()); + } + }; +}; + +export default connect(mapStateToProps, mapDispatchToProps)(ImportRepository); diff --git a/scm-webapp/src/main/resources/locales/de/plugins.json b/scm-webapp/src/main/resources/locales/de/plugins.json index f882236e3e..544cc54e14 100644 --- a/scm-webapp/src/main/resources/locales/de/plugins.json +++ b/scm-webapp/src/main/resources/locales/de/plugins.json @@ -289,7 +289,7 @@ }, "D6SHRfqQw1": { "displayName": "Repository Import fehlgeschlagen", - "description": "Das Repository konnte nicht importiert werden. Entweder wurden die Zugangsdaten (Benutzername/Passwort) nicht gesetzt oder sind fehlerhaft. Bitte prüfen Sie Ihre Eingaben." + "description": "Das Repository konnte nicht importiert werden. Möglicherweise wurden die Zugangsdaten (Benutzername/Passwort) nicht gesetzt oder sind fehlerhaft. Bitte prüfen Sie Ihre Eingaben." } }, "namespaceStrategies": { diff --git a/scm-webapp/src/main/resources/locales/en/plugins.json b/scm-webapp/src/main/resources/locales/en/plugins.json index e35c8942c7..2335a57306 100644 --- a/scm-webapp/src/main/resources/locales/en/plugins.json +++ b/scm-webapp/src/main/resources/locales/en/plugins.json @@ -289,7 +289,7 @@ }, "D6SHRfqQw1": { "displayName": "Repository import failed", - "description": "The repository could not be imported. Either the credentials (username/password) are wrong or missing. Please check your inputs." + "description": "The repository could not be imported. It's likely that either the credentials (username/password) are wrong or missing. Please check your inputs." } }, "namespaceStrategies": {