@@ -10,5 +13,8 @@
<%= link_to(_('Learn more about this in the documentation.'), documentation_url('#4.1ImportingRoles', :root_url => ansible_doc_url), target: '_blank') %>
<%= ansible_proxy_import(hash_for_import_ansible_roles_path) %>
+ <%= vcs_import %>
+
+<%= react_component('VcsCloneModalContent', {:title => "Get Ansible-Roles from VCS"})%>
diff --git a/config/routes.rb b/config/routes.rb
index 1a0431e4f..8349ad5f1 100644
--- a/config/routes.rb
+++ b/config/routes.rb
@@ -32,6 +32,17 @@
post :multiple_play_roles
end
end
+ resources :smart_proxies, :only => [] do
+ member do
+ scope '/ansible' do
+ get 'repo_information', to: 'vcs_clone#repo_information'
+ get 'roles', to: 'vcs_clone#installed_roles'
+ post 'roles', to: 'vcs_clone#install_role'
+ put 'roles/:role_name', to: 'vcs_clone#update_role', constraints: { role_name: %r{[^\/]+} }
+ delete 'roles/:role_name', to: 'vcs_clone#delete_role', constraints: { role_name: %r{[^\/]+} }
+ end
+ end
+ end
end
end
end
diff --git a/lib/foreman_ansible/register.rb b/lib/foreman_ansible/register.rb
index a09a49d57..cbb81a594 100644
--- a/lib/foreman_ansible/register.rb
+++ b/lib/foreman_ansible/register.rb
@@ -160,6 +160,8 @@
{ :'api/v2/ansible_inventories' => [:schedule] }
permission :import_ansible_playbooks,
{ :'api/v2/ansible_playbooks' => [:sync, :fetch] }
+ permission :clone_from_vcs,
+ { :'api/v2/vcs_clone' => [:repo_information, :installed_roles, :install_role, :update_role, :delete_role] }
end
role 'Ansible Roles Manager',
@@ -170,7 +172,7 @@
:import_ansible_roles, :view_ansible_variables, :view_lookup_values,
:create_lookup_values, :edit_lookup_values, :destroy_lookup_values,
:create_ansible_variables, :import_ansible_variables,
- :edit_ansible_variables, :destroy_ansible_variables, :import_ansible_playbooks]
+ :edit_ansible_variables, :destroy_ansible_variables, :import_ansible_playbooks, :clone_from_vcs]
role 'Ansible Tower Inventory Reader',
[:view_hosts, :view_hostgroups, :view_facts, :generate_report_templates, :generate_ansible_inventory,
diff --git a/test/functional/api/v2/vcs_clone_controller_test.rb b/test/functional/api/v2/vcs_clone_controller_test.rb
new file mode 100644
index 000000000..f21db651d
--- /dev/null
+++ b/test/functional/api/v2/vcs_clone_controller_test.rb
@@ -0,0 +1,107 @@
+# frozen_string_literal: true
+
+require 'test_plugin_helper'
+
+module Api
+ module V2
+ class VcsCloneControllerTest < ActionController::TestCase
+ describe 'input' do
+ test 'handles missing proxy capability' do
+ proxy = FactoryBot.create(:smart_proxy, :with_ansible)
+
+ get :repo_information,
+ params: { id: proxy.id, vcs_url: 'https://github.com/theforeman/foreman_ansible.git' },
+ session: set_session_user
+
+ response = JSON.parse(@response.body)
+ assert_response :bad_request
+ assert_equal({ 'error' =>
+ { 'message' => 'Smart proxy does not have foreman_ansible installed / is not capable of cloning from VCS' } }, response)
+ end
+ end
+ describe '#repo_information' do
+ test 'requests repo information' do
+ proxy = FactoryBot.create(:smart_proxy, :with_ansible)
+ SmartProxy.any_instance.stubs(:has_capability?).returns(true)
+ ProxyAPI::Ansible.any_instance.expects(:repo_information).returns({
+ 'head' => {},
+ 'branches' => {},
+ 'tags' => {},
+ 'vcs_url' => 'https://github.com/theforeman/foreman_ansible.git'
+ })
+
+ get :repo_information,
+ params: { id: proxy.id, vcs_url: 'https://github.com/theforeman/foreman_ansible.git' },
+ session: set_session_user
+
+ response = JSON.parse(@response.body)
+ assert_response :success
+ assert_equal({ 'head' => {},
+ 'branches' => {},
+ 'tags' => {},
+ 'vcs_url' => 'https://github.com/theforeman/foreman_ansible.git' }, response)
+ end
+ end
+ describe '#installed_roles' do
+ test 'requests installed roles' do
+ proxy = FactoryBot.create(:smart_proxy, :with_ansible)
+ SmartProxy.any_instance.stubs(:has_capability?).returns(true)
+ ProxyAPI::Ansible.any_instance.expects(:list_installed).returns(%w[role1 role2])
+
+ get :installed_roles,
+ params: { id: proxy.id },
+ session: set_session_user
+
+ response = JSON.parse(@response.body)
+ assert_response :success
+ assert_equal(%w[role1 role2], response)
+ end
+ end
+ describe '#install_role' do
+ test 'installes a role' do
+ proxy = FactoryBot.create(:smart_proxy, :with_ansible)
+ SmartProxy.any_instance.stubs(:has_capability?).returns(true)
+
+ post :install_role,
+ params: { id: proxy.id, repo_info: {
+ 'vcs_url' => 'https://github.com/theforeman/foreman_ansible.git',
+ 'name' => 'best.role.ever',
+ 'ref' => 'master'
+ } },
+ session: set_session_user
+ assert_response :success
+ end
+ test 'handles faulty parameters' do
+ proxy = FactoryBot.create(:smart_proxy, :with_ansible)
+ SmartProxy.any_instance.stubs(:has_capability?).returns(true)
+
+ post :install_role,
+ params: { id: proxy.id, 'repo_info': {
+ 'vcs_urll' => 'https://github.com/theforeman/foreman_ansible.git',
+ 'name' => 'best.role.ever',
+ 'ref' => 'master'
+ } },
+ session: set_session_user
+ response = JSON.parse(@response.body)
+ assert_response :bad_request
+ assert_equal({ 'error' => 'param is missing or the value is empty: vcs_url' }, response)
+ end
+ end
+ describe '#update_role' do
+ # With the difference of the http-method being PUT, this is
+ # identical to #install_role
+ end
+ describe '#delete_role' do
+ test 'deletes a role' do
+ proxy = FactoryBot.create(:smart_proxy, :with_ansible)
+ SmartProxy.any_instance.stubs(:has_capability?).returns(true)
+
+ delete :delete_role,
+ params: { id: proxy.id, role_name: 'best.role.ever' },
+ session: set_session_user
+ assert_response :success
+ end
+ end
+ end
+ end
+end
diff --git a/webpack/components/VcsCloneModalContent/VcsCloneModalContent.js b/webpack/components/VcsCloneModalContent/VcsCloneModalContent.js
new file mode 100644
index 000000000..c193a2035
--- /dev/null
+++ b/webpack/components/VcsCloneModalContent/VcsCloneModalContent.js
@@ -0,0 +1,286 @@
+import React, { useState, useEffect, useCallback } from 'react';
+import {
+ Modal,
+ ModalVariant,
+ Button,
+ Grid,
+ GridItem,
+ Form,
+ FormGroup,
+ TextInput,
+ Text,
+ TextVariants,
+ Switch,
+ Alert,
+} from '@patternfly/react-core';
+import { translate as __, sprintf } from 'foremanReact/common/I18n';
+import { GitLinkInputComponent } from './components/GitLinkInputComponent';
+import { BranchTagSelectionMenu } from './components/BranchTagSelectionMenu';
+import { SmartProxySelector } from './components/SmartProxySelector';
+import { ModalConfirmButton } from './components/ModalConfirmButton';
+import { fetchSmartProxies } from './VcsCloneModalContentHelpers';
+
+export const VcsCloneModalContent = () => {
+ // STATE DEFINITION
+
+ const [gitRef, setGitRef] = useState('master');
+ const [installedRoles, setInstalledRoles] = useState({});
+ const [repoName, setRepoName] = useState('');
+ const [isModalButtonLoading, setIsModalButtonLoading] = useState(false);
+ const [isModalOpen, setIsModalOpen] = useState(false);
+ const [repoInfo, setRepoInfo] = useState({
+ branches: {},
+ tags: {},
+ vcs_url: null,
+ });
+ const [branchTagsEnabled, setBranchTagsEnabled] = useState(false);
+ const [alertText, setAlertText] = useState('');
+ const [finalProcedure, setFinalProcedure] = useState('');
+ const [originalRepoName, setOriginalRepoName] = useState('');
+ const [smartProxies, setSmartProxies] = useState({});
+ const [smartProxySelection, setSmartProxySelection] = useState([]);
+ const [updateExisting, setUpdateExisting] = useState(false);
+ const [isErrorState, setIsErrorState] = useState(false);
+ const [isModalButtonActive, setIsModalButtonActive] = useState(false);
+
+ // EFFECT-HANDLERS
+
+ /**
+ * Watch URL-anchor and open/close modal.
+ */
+ useEffect(() => {
+ // Handle direct link ...#vcs_import
+ if (window.location.hash === '#vcs_import') {
+ handleModalToggle();
+ }
+ // Set event listener for anchor change
+ onhashchange = () => {
+ if (window.location.hash === '#vcs_import') {
+ handleModalToggle();
+ }
+ };
+ }, [handleModalToggle]);
+
+ /**
+ * Fetch SmartProxies when the modal is opened.
+ */
+ useEffect(() => {
+ async function request() {
+ if (isModalOpen) {
+ const smartProxiesRequest = await fetchSmartProxies();
+ if (
+ Object.keys(smartProxiesRequest.proxies).length === 0 ||
+ !smartProxiesRequest.ok
+ ) {
+ setAlertText(
+ __('No smartproxies with support for cloning from VCS found')
+ );
+ setIsErrorState(true);
+ } else {
+ setSmartProxies(smartProxiesRequest.proxies);
+ }
+ }
+ }
+
+ // eslint-disable-next-line no-unused-vars
+ const ignored = request();
+ }, [isModalOpen]);
+
+ /**
+ * Update the 'Final Task'-message when an input value is changed.
+ */
+ useEffect(() => {
+ setFinalProcedure(
+ sprintf(
+ __(
+ 'Clone [ %(item)s ] from %(oName)s to SP(s) [ %(sps)s ] as %(rName)s - %(update)s'
+ ),
+ {
+ item: gitRef,
+ oName: originalRepoName,
+ sps: smartProxySelection,
+ rName: repoName,
+ update: updateExisting
+ ? __('updating existing')
+ : __('skipping existing'),
+ }
+ )
+ );
+ }, [gitRef, originalRepoName, smartProxySelection, repoName, updateExisting]);
+
+ useEffect(() => {
+ setIsModalButtonActive(
+ !isErrorState &&
+ repoName !== '' &&
+ smartProxySelection.length !== 0 &&
+ gitRef !== ''
+ );
+ }, [isErrorState, repoName, gitRef, smartProxySelection.length]);
+
+ /**
+ * Method to check whether a role is already present on the selected SmartProxy.
+ * Called when one of the deps is updated
+ * Checks whether 'Repo name' is a role that is already present on the selected SmartProxy.
+ * -> Shows the alert if a collision is present.
+ */
+ useEffect(() => {
+ setIsErrorState(false);
+ if (smartProxySelection.length !== 0) {
+ // eslint-disable-next-line no-unused-vars
+ for (const [_, proxyId] of Object.entries(smartProxies)) {
+ const roles = installedRoles[proxyId];
+
+ if (roles !== undefined) {
+ if (roles.has(repoName) && !updateExisting) {
+ setAlertText(
+ sprintf(
+ __(
+ 'A repository with the name %(rName)s is already present on %(pName)s'
+ ),
+ {
+ rName: repoName,
+ pName: Object.keys(smartProxies).filter(
+ key => smartProxies[key] === proxyId
+ ),
+ }
+ )
+ );
+ setIsErrorState(true);
+ }
+ }
+ }
+ }
+ }, [
+ smartProxySelection,
+ repoName,
+ smartProxies,
+ installedRoles,
+ updateExisting,
+ ]);
+
+ // CALLBACKS
+
+ /**
+ * To be called when the modal is to be opened or closed.
+ * Called by: 'Cancel'- and 'x'-button
+ * Resets all the states and toggles modal visibility.
+ */
+ const handleModalToggle = useCallback(() => {
+ if (isModalOpen) {
+ setGitRef('master');
+ setInstalledRoles({});
+ setRepoName('');
+ setIsModalButtonLoading(false);
+ setIsModalButtonActive(false);
+ setIsModalOpen(false);
+ setRepoInfo({
+ branches: {},
+ tags: {},
+ vcs_url: null,
+ });
+ setIsErrorState(false);
+ setAlertText('');
+ setFinalProcedure('');
+ setOriginalRepoName('');
+ setSmartProxies({});
+ setSmartProxySelection([]);
+ setUpdateExisting(false);
+ setBranchTagsEnabled(false);
+ window.location.hash = '';
+ }
+ setIsModalOpen(!isModalOpen);
+ }, [isModalOpen]);
+
+ return (
+
+
+ {__('Cancel')}
+ ,
+ ]}
+ >
+
+
+
+
+
+
+
+
+
+
+
+
+
+ setUpdateExisting(value)}
+ />
+
+
+
+
+
+
+
+ );
+};
diff --git a/webpack/components/VcsCloneModalContent/VcsCloneModalContentHelpers.js b/webpack/components/VcsCloneModalContent/VcsCloneModalContentHelpers.js
new file mode 100644
index 000000000..ebdf435df
--- /dev/null
+++ b/webpack/components/VcsCloneModalContent/VcsCloneModalContentHelpers.js
@@ -0,0 +1,115 @@
+import React from 'react';
+import { translate as __, sprintf } from 'foremanReact/common/I18n';
+import { showToast } from '../../toastHelper';
+import { foremanUrl } from '../AnsibleRolesAndVariables/AnsibleRolesAndVariablesActions';
+
+export const fetchSmartProxies = async () => {
+ const response = await fetch('/api/smart_proxies');
+ const responseJson = await response.json();
+ const tempSmartProxies = {};
+ responseJson.results.forEach(proxy =>
+ proxy.features.forEach(feature => {
+ if (feature.name === 'Ansible') {
+ if (feature.capabilities.includes('vcs_clone')) {
+ tempSmartProxies[proxy.name] = proxy.id;
+ }
+ }
+ })
+ );
+ return {
+ ok: response.ok,
+ proxies: tempSmartProxies,
+ };
+};
+
+export const getRepoInfo = async (smartProxyId, repoUrl) => {
+ const response = await fetch(
+ `/api/v2/smart_proxies/${smartProxyId}/ansible/repo_information?${new URLSearchParams(
+ {
+ vcs_url: repoUrl,
+ }
+ )}`,
+ {
+ method: 'GET',
+ headers: {
+ Accept: 'application/json',
+ 'Content-Type': 'application/json',
+ },
+ }
+ );
+
+ return {
+ ok: response.ok,
+ result: await response.json(),
+ };
+};
+
+export const installRole = async (
+ updateExisting,
+ smartProxyId,
+ repoUrl,
+ repoName,
+ repoRef
+) => {
+ const response = await fetch(
+ updateExisting
+ ? `/api/v2/smart_proxies/${smartProxyId}/ansible/roles/${repoName}`
+ : `/api/v2/smart_proxies/${smartProxyId}/ansible/roles`,
+ {
+ method: updateExisting ? 'PUT' : 'POST',
+ headers: {
+ Accept: 'application/json',
+ 'Content-Type': 'application/json',
+ },
+ body: JSON.stringify({
+ repo_info: {
+ vcs_url: repoUrl,
+ name: repoName,
+ ref: repoRef,
+ },
+ }),
+ }
+ );
+
+ return {
+ ok: response.ok,
+ status: response.status,
+ result: await response.json(),
+ };
+};
+
+export const showSuccessToast = (taskId, repoName) => {
+ showToast({
+ type: 'success',
+ message: (
+
+ {sprintf(__('Cloning of %(rName)s from VCS started:'), {
+ rName: repoName,
+ })}
+
+ {sprintf(__('View task %(tId)s'), { tId: taskId })}
+
+
+ ),
+ });
+};
+
+export const showErrorToast = (statusCode, repoName) => {
+ showToast({
+ type: 'danger',
+ message: (
+
+ {sprintf(__('Could not start cloning %(rName)s from VCS'), {
+ rName: repoName,
+ })}
+
+ ),
+ });
+};
diff --git a/webpack/components/VcsCloneModalContent/components/BranchTagSelectionMenu.js b/webpack/components/VcsCloneModalContent/components/BranchTagSelectionMenu.js
new file mode 100644
index 000000000..8fa91e532
--- /dev/null
+++ b/webpack/components/VcsCloneModalContent/components/BranchTagSelectionMenu.js
@@ -0,0 +1,91 @@
+import React, { useEffect, useState } from 'react';
+import {
+ Tabs,
+ Tab,
+ TabTitleText,
+ Form,
+ FormGroup,
+ TextInput,
+} from '@patternfly/react-core';
+import PropTypes from 'prop-types';
+import { translate as __ } from 'foremanReact/common/I18n';
+import { MultiSelectorMenu } from './MultiSelectorMenu';
+
+export const BranchTagSelectionMenu = props => {
+ const [activeTabKey, setActiveTabKey] = useState(0);
+
+ useEffect(() => {
+ if (!props.branchTagsEnabled) {
+ setActiveTabKey(0);
+ }
+ }, [props.branchTagsEnabled]);
+
+ return (
+
setActiveTabKey(tabIndex)}
+ isBox
+ >
+ {__('Manual input')}}
+ >
+
+
+ {__('Branches')}}
+ isDisabled={!props.branchTagsEnabled}
+ >
+
+ {__('Tags')}}
+ isDisabled={!props.branchTagsEnabled}
+ >
+
+
+ );
+};
+
+BranchTagSelectionMenu.propTypes = {
+ repoInfo: PropTypes.object,
+ gitRef: PropTypes.string,
+ setGitRef: PropTypes.func,
+ branchTagsEnabled: PropTypes.bool,
+};
+
+BranchTagSelectionMenu.defaultProps = {
+ repoInfo: {
+ branches: {},
+ tags: {},
+ vcs_url: null,
+ },
+ gitRef: 'master',
+ setGitRef: () => {},
+ branchTagsEnabled: false,
+};
diff --git a/webpack/components/VcsCloneModalContent/components/GitLinkInputComponent.js b/webpack/components/VcsCloneModalContent/components/GitLinkInputComponent.js
new file mode 100644
index 000000000..53acc41e1
--- /dev/null
+++ b/webpack/components/VcsCloneModalContent/components/GitLinkInputComponent.js
@@ -0,0 +1,145 @@
+import React, { useCallback, useEffect, useState } from 'react';
+import {
+ Button,
+ InputGroup,
+ TextInput,
+ Form,
+ FormGroup,
+} from '@patternfly/react-core';
+import PropTypes from 'prop-types';
+import { translate as __ } from 'foremanReact/common/I18n';
+import { getRepoInfo } from '../VcsCloneModalContentHelpers';
+
+export const GitLinkInputComponent = props => {
+ const [isButtonActive, setButtonActive] = useState(false);
+ const [textInput, setTextInput] = useState('');
+ const [validated, setValidated] = useState('default');
+ const [invalidText, setInvalidText] = useState('');
+ const [isLoading, setIsLoading] = useState(false);
+
+ const primaryLoadingProps = {};
+ primaryLoadingProps.spinnerAriaValueText = 'Loading';
+ primaryLoadingProps.spinnerAriaLabelledBy = 'primary-loading-button';
+ primaryLoadingProps.isLoading = isLoading;
+
+ /**
+ * To be called when Repo-information is to be requested.
+ * Called by: 'Examine'-Button
+ * Sends a request to the server, which responds with information about the provided repository.
+ */
+ const handleExamineButton = useCallback(
+ async repoUrl => {
+ const roleNameExpr = new RegExp(`^.*/(.*/.*).git$`);
+ const matched = roleNameExpr.exec(repoUrl);
+ try {
+ props.setRepoName(matched[1].replace('/', '_').toLowerCase());
+ props.setOriginalRepoName(matched[1]);
+ } catch (e) {
+ props.setRepoName(__('COULD NOT EXTRACT NAME'));
+ }
+
+ setIsLoading(true);
+
+ const repoInfoRequest = await getRepoInfo(
+ props.smartProxies[props.smartProxySelection],
+ repoUrl
+ );
+
+ if (!repoInfoRequest.ok) {
+ setIsLoading(false);
+ props.setAlertText(__('Could not request metadata. Use manual input.'));
+ props.setIsErrorState(true);
+ props.setBranchTagsEnabled(false);
+ } else {
+ props.setRepoInfo(repoInfoRequest.result);
+ setIsLoading(false);
+ props.setBranchTagsEnabled(true);
+ }
+ },
+ [props]
+ );
+ const handleTextInput = (gitLink, event) => {
+ setTextInput(gitLink);
+ props.setRepoInfo({
+ branches: {},
+ tags: {},
+ vcs_url: gitLink,
+ });
+ props.setBranchTagsEnabled(false);
+ };
+
+ useEffect(() => {
+ const validLink = /^.*\.git$/.test(textInput);
+
+ if (validLink && props.smartProxySelection.length !== 0) {
+ setValidated('success');
+ setButtonActive(true);
+ } else {
+ if (!validLink) {
+ setValidated('error');
+ setInvalidText(__('Not a valid Git-Url'));
+ } else {
+ setInvalidText(__('SmartProxy required'));
+ }
+ setButtonActive(false);
+ }
+ }, [textInput, props.smartProxySelection]);
+
+ return (
+
+
+
+ );
+};
+
+GitLinkInputComponent.propTypes = {
+ setRepoName: PropTypes.func,
+ setOriginalRepoName: PropTypes.func,
+ smartProxies: PropTypes.object,
+ smartProxySelection: PropTypes.array,
+ setAlertText: PropTypes.func,
+ setIsErrorState: PropTypes.func,
+ setRepoInfo: PropTypes.func,
+ repoInfo: PropTypes.object,
+ setBranchTagsEnabled: PropTypes.func,
+};
+
+GitLinkInputComponent.defaultProps = {
+ setRepoName: () => {},
+ setOriginalRepoName: () => {},
+ smartProxies: {},
+ smartProxySelection: [],
+ setAlertText: () => {},
+ setIsErrorState: () => {},
+ setRepoInfo: () => {},
+ repoInfo: {},
+ setBranchTagsEnabled: () => {},
+};
diff --git a/webpack/components/VcsCloneModalContent/components/ModalConfirmButton.js b/webpack/components/VcsCloneModalContent/components/ModalConfirmButton.js
new file mode 100644
index 000000000..f30a42d21
--- /dev/null
+++ b/webpack/components/VcsCloneModalContent/components/ModalConfirmButton.js
@@ -0,0 +1,75 @@
+import React, { useCallback } from 'react';
+import PropTypes from 'prop-types';
+import { translate as __ } from 'foremanReact/common/I18n';
+import { Button } from '@patternfly/react-core';
+import {
+ installRole,
+ showErrorToast,
+ showSuccessToast,
+} from '../VcsCloneModalContentHelpers';
+
+export const ModalConfirmButton = props => {
+ /**
+ * To be called when all the inputs are verified and the repo should be cloned.
+ * Called by: 'Confirm'-Button
+ * Sends a request to the server, which starts a new VcsClone-Task .
+ */
+ const handleConfirmButton = useCallback(async () => {
+ props.setIsModalButtonLoading(true);
+
+ const installRequest = await installRole(
+ props.updateExisting,
+ props.smartProxyId,
+ props.repoInfo.vcs_url,
+ props.repoName,
+ props.gitRef
+ );
+
+ if (!installRequest.ok) {
+ showErrorToast(installRequest.status);
+ } else {
+ showSuccessToast(installRequest.result.task.id, props.originalRepoName);
+ }
+ props.setIsModalButtonLoading(false);
+ }, [props]);
+
+ return (
+
+ {__('Confirm')}
+
+ );
+};
+
+ModalConfirmButton.propTypes = {
+ setIsModalButtonLoading: PropTypes.func,
+ updateExisting: PropTypes.bool,
+ smartProxyId: PropTypes.number,
+ repoInfo: PropTypes.object,
+ repoName: PropTypes.string,
+ gitRef: PropTypes.string,
+ originalRepoName: PropTypes.string,
+ isModalButtonLoading: PropTypes.bool,
+ isModalButtonActive: PropTypes.bool,
+};
+
+ModalConfirmButton.defaultProps = {
+ setIsModalButtonLoading: () => {},
+ updateExisting: false,
+ smartProxyId: 0,
+ repoInfo: {
+ branches: {},
+ tags: {},
+ vcs_url: null,
+ },
+ repoName: '',
+ gitRef: 'master',
+ originalRepoName: '',
+ isModalButtonLoading: false,
+ isModalButtonActive: false,
+};
diff --git a/webpack/components/VcsCloneModalContent/components/MultiSelectorMenu.js b/webpack/components/VcsCloneModalContent/components/MultiSelectorMenu.js
new file mode 100644
index 000000000..d1a004a5a
--- /dev/null
+++ b/webpack/components/VcsCloneModalContent/components/MultiSelectorMenu.js
@@ -0,0 +1,53 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { Menu, MenuContent, MenuList, MenuItem } from '@patternfly/react-core';
+
+export const MultiSelectorMenu = props => {
+ const createSelectItems = () => {
+ const items = [];
+ const inputItems = props.repoInfo?.[props.displayData];
+ if (inputItems !== undefined) {
+ // eslint-disable-next-line no-unused-vars
+ for (const item of Object.keys(inputItems)) {
+ items.push(
+
+ {item}
+
+ );
+ }
+ }
+ return items;
+ };
+
+ return (
+
props.setGitRef(item)}
+ selected={props.gitRef}
+ isScrollable
+ >
+
+
+ {createSelectItems()}
+
+
+
+ );
+};
+
+MultiSelectorMenu.propTypes = {
+ repoInfo: PropTypes.object,
+ displayData: PropTypes.string,
+ setGitRef: PropTypes.func,
+ gitRef: PropTypes.string,
+};
+
+MultiSelectorMenu.defaultProps = {
+ repoInfo: {},
+ displayData: 'branches',
+ setGitRef: () => {},
+ gitRef: '',
+};
diff --git a/webpack/components/VcsCloneModalContent/components/SmartProxySelector.js b/webpack/components/VcsCloneModalContent/components/SmartProxySelector.js
new file mode 100644
index 000000000..c2a846fbf
--- /dev/null
+++ b/webpack/components/VcsCloneModalContent/components/SmartProxySelector.js
@@ -0,0 +1,115 @@
+import React, { useState, useCallback } from 'react';
+import PropTypes from 'prop-types';
+import { translate as __ } from 'foremanReact/common/I18n';
+import {
+ Form,
+ FormGroup,
+ Select,
+ SelectVariant,
+ SelectOption,
+} from '@patternfly/react-core';
+
+export const SmartProxySelector = props => {
+ const [isSmartProxyDropdownOpen, setIsSmartProxyDropdownOpen] = useState(
+ false
+ );
+
+ /**
+ * To be called when a SmartProxy should be selected.
+ * Called by: 'SmartProxies'-field
+ * Updates the smartProxySelection-state with the new selection.
+ * Note: Currently only one SmartProxy may be selected. Still, an array
+ * is used to allow the selection of multiple SmartProxies in the future.
+ */
+ const handleSmartProxySelect = useCallback(
+ async (_event, value) => {
+ /**
+ * Method to query which roles are installed on a given SmartProxy.
+ * Called by: smartProxySelection-Effect
+ * Sends a request to the server, which responds with an array of roles that are installed on the provided proxy.
+ * @param proxyId SmartProxy from which the roles should be queried.
+ */
+ const getInstalledRolesAtProxy = async proxyId => {
+ const response = await fetch(
+ `/api/v2/smart_proxies/${proxyId}/ansible/roles`,
+ {
+ method: 'GET',
+ headers: {
+ Accept: 'application/json',
+ 'Content-Type': 'application/json',
+ },
+ }
+ );
+ if (response.ok) {
+ const responseJson = await response.json();
+ const installedRolesMap = new Map();
+ responseJson.forEach(key => installedRolesMap.set(key, null));
+ const temp = props.installedRoles;
+ temp[proxyId] = installedRolesMap;
+ props.setInstalledRoles(temp);
+ }
+ };
+
+ let updatedSmartProxySelection;
+ if (props.smartProxySelection.includes(value)) {
+ updatedSmartProxySelection = [];
+ } else {
+ updatedSmartProxySelection = [value];
+ await getInstalledRolesAtProxy(props.smartProxies[value]);
+ }
+
+ props.setSmartProxySelection(updatedSmartProxySelection);
+ },
+ [props]
+ );
+
+ /**
+ * Dynamically creates the child-elements of the 'SmartProxies'-Field.
+ * Called by: Render of 'SmartProxies' FormGroup.
+ * @returns {*[]} Array of
values.
+ */
+ function createSmartProxySelectItems() {
+ const smartProxyArray = [];
+ // eslint-disable-next-line no-unused-vars
+ for (const proxy of Object.keys(props.smartProxies)) {
+ smartProxyArray.push(