880d40d5ec
Since we're using ally.js for modals, when the modal is open, other elements are disabled. Since the form is submitted when the "Create" button is clicked and browsers do not submit disabled form fields, the form was not submitting environment names when creating a project. This workaround creates hidden inputs to track the environment names. Since they're hidden, they are not disabled by ally.js, so the fields are properly submitted. This should be the only form affected, since this is the only form submitted via a modal button.
82 lines
3.4 KiB
HTML
82 lines
3.4 KiB
HTML
{% extends "workspaces/base.html" %}
|
|
|
|
{% from "components/alert.html" import Alert %}
|
|
{% from "components/icon.html" import Icon %}
|
|
{% from "components/modal.html" import Modal %}
|
|
{% from "components/text_input.html" import TextInput %}
|
|
|
|
{% block workspace_content %}
|
|
|
|
{% set modalName = "newProjectConfirmation" %}
|
|
{% if request.args.get("newWorkspace") %}
|
|
{{ Alert('Workspace created!',
|
|
message="\
|
|
<p>You are now ready to create projects and environments within the JEDI Cloud.</p>
|
|
",
|
|
level='success'
|
|
) }}
|
|
{% endif %}
|
|
|
|
<new-project inline-template v-bind:initial-data='{{ form.data|tojson }}' modal-name='{{ modalName }}'>
|
|
<form method="POST" action="{{ url_for('workspaces.create_project', workspace_id=workspace.id) }}" v-on:submit="handleSubmit">
|
|
|
|
{% call Modal(name=modalName, dismissable=False) %}
|
|
<h1>Create project !{ name }</h1>
|
|
|
|
<p>
|
|
When you click <em>Create Project</em>, the environments
|
|
<span v-for="(environment, index) in environments">
|
|
<strong>!{environment.name}</strong><template v-if="index < (environments.length - 1)">, </template>
|
|
</span>
|
|
will be created as individual cloud resource groups under <strong>!{ name }</strong> project.
|
|
</p>
|
|
|
|
<div class='action-group'>
|
|
<button autofocus type='submit' class='action-group__action usa-button' tabindex='0'>Create Project</button>
|
|
<button type='button' v-on:click="handleCancelSubmit" class='icon-link action-group__action' tabindex='0'>Cancel</button>
|
|
</div>
|
|
{% endcall %}
|
|
|
|
{% include "fragments/edit_project_form.html" %}
|
|
|
|
<div> {# this extra div prevents this bug: https://www.pivotaltracker.com/story/show/160768940 #}
|
|
<div v-cloak v-for="title in errors" :key="title">
|
|
{{ Alert(message=None, level="error", vue_template=True) }}
|
|
</div>
|
|
</div>
|
|
|
|
<div class="block-list project-list-item">
|
|
<header class="block-list__header block-list__header--grow">
|
|
<h2 class="block-list__title">Project Environments</h2>
|
|
<p>
|
|
Each environment created within a project is an enclave of cloud resources that is logically separated from each other for increased security.
|
|
</p>
|
|
</header>
|
|
|
|
<ul>
|
|
<li v-for="(environment, i) in environments" class="block-list__item project-edit__env-list-item">
|
|
<div class="usa-input">
|
|
<label :for="'environment_names-' + i">Environment Name</label>
|
|
<input type="text" :id="'environment_names-' + i" v-model="environment.name" placeholder="e.g. Development, Staging, Production"/>
|
|
<input type="hidden" :name="'environment_names-' + i" v-model="environment.name"/>
|
|
</div>
|
|
<button v-on:click="removeEnvironment(i)" v-if="environments.length > 1" type="button" class='project-edit__env-list-item__remover'>
|
|
{{ Icon('trash') }}
|
|
<span>Remove</span>
|
|
</button>
|
|
</li>
|
|
</ul>
|
|
|
|
<div class="block-list__footer">
|
|
<button v-on:click="addEnvironment" class="icon-link" tabindex="0" type="button">Add another environment</button>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="action-group">
|
|
<button class="usa-button usa-button-primary" tabindex="0" type="submit">Create Project</button>
|
|
</div>
|
|
</form>
|
|
</new-project>
|
|
|
|
{% endblock %}
|