Form improvements for combination repository field

readthedocsext/theme/templates/projects/includes/crispy/repository.html

@@ -0,0 +1,62 @@
+{% load alter_field from ext_theme_tags %}
+{% load as_crispy_field from crispy_forms_tags %}
+{% load blocktrans trans from i18n %}
+
+{% comment rst %}
+  Project repository combination field
+  ====================================
+{% endcomment %}
+
+{% with field_repo=multifield.bound_fields.0 field_remote_repository=multifield.bound_fields.1 %}
+  <div class="ui required field">
+    <label for="{{ multifield.id_for_label }}"
+           class="ui {{ multifield.label_class }}">
+      {{ multifield.label_html|safe }}
+    </label>
+
+    <script type="application/json" data-bind="jsonInit: config">
+      {
+        "repo_has_errors": {{ field_repo.errors|yesno:"true,false" }},
+        "remote_repository_has_errors": {{ field_remote_repository.errors|yesno:"true,false" }},
+        "can_connect_repository": true
+      }
+    </script>
+
+    <div class="ui segment">
+      <div class="ui basic fitted blurring segment">
+
+        <div class="ui {% if false %}active{% endif %} inverted dimmer">
+          <div class="ui message">
+            <i class="fas fa-circle-info icon"></i>
+            Connect a service provider to connect a repository to this project
+          </div>
+        </div>
+
+        {% alter_field field_remote_repository data_bind="semanticui: { dropdown: remote_repository() }, css: { disabled: use_manual_configuration() }" %}
+        {{ field_remote_repository|as_crispy_field }}
+
+        <div class="field">
+          <div class="ui checkbox">
+            <input type="checkbox"
+                   data-bind="checked: use_manual_configuration"
+                   tabindex="0" />
+            <label>Use manual configuration for repository URL</label>
+          </div>
+        </div>
+
+      </div>
+
+      <div class="ko hidden"
+           data-bind="css: { hidden: !use_manual_configuration() }">
+        <div class="ui small message">
+          We recommend using a connected repository for most projects,
+          only advanced users should manually configure the repository URL.
+        </div>
+
+        {% alter_field field_repo data_bind="valueInit: repo, value: repo, attr: { disabled: !use_manual_configuration() }" %}
+        {{ field_repo|as_crispy_field }}
+      </div>
+
+    </div>
+  </div>
+{% endwith %}

readthedocsext/theme/templates/projects/settings_basics_form.html

@@ -14,9 +14,12 @@
 {% endblock project_edit_active %}
 
 {% block project_edit_content %}
-  <form class="ui form" method="post" action=".">
+  <form class="ui form"
+        method="post"
+        action="."
+        data-bind="using: new ProjectSettingsView()">
     {% csrf_token %}
-    {{ form|crispy }}
+    {% crispy form %}
     <input class="ui primary button" type="submit" value="{% trans "Save" %}" />
   </form>
 

readthedocsext/theme/templates/semantic-ui/fields/base.html

@@ -7,6 +7,7 @@
   {% whitespaceless as all_field_classes %}
     {% if not field|is_checkbox %}
       {% if field.field.required %}required{% endif %}
+      {% if field.field.disabled %}disabled{% endif %}
       {% if field.errors %}error{% endif %}
       {% if 'form-horizontal' in form_class %}inline{% endif %}
       field
@@ -36,6 +37,7 @@
   {% endblock field-label %}
 
   {% block field-input %}
+    {# TODO move this to a property on the form instead? #}
     {% if field|is_rich_select %}
       {% include "semantic-ui/layout/rich_select.html" %}
       {% include "semantic-ui/layout/field_errors_block.html" %}

readthedocsext/theme/templates/semantic-ui/layout/rich_select.html

@@ -1,5 +1,6 @@
 {% load crispy_field from crispy_forms_field %}
 {% load blocktrans trans from i18n %}
+{% load whitespaceless from ext_theme_tags %}
 
 {% comment rst %}
   Rich select field template
@@ -26,8 +27,18 @@
 
 {% endcomment %}
 
+{% whitespaceless as form_data_bind %}
+  {% if "data-bind" not in field.field.widget.attrs.keys %}
+    semanticui: { dropdown: {}}
+  {% else %}
+    {% for key, value in field.field.widget.attrs.items %}
+      {% if key == "data-bind" %}{{ value }}{% endif %}
+    {% endfor %}
+  {% endif %}
+{% endwhitespaceless %}
+
 <div class="ui long fluid selection category search dropdown{% if field.attrs.multiple %} multiple{% endif %}"
-     data-bind="semanticui: { dropdown: {}}">
+     data-bind="{{ form_data_bind }}">
   {{ field.as_hidden }}
   <i class="dropdown icon"></i>
   <div class="default text">{{ field.attrs.placeholder }}</div>
@@ -42,7 +53,7 @@
         the dropdown will still have a rich display.
       {% endcomment %}
       <div class="{% if choice.disabled %}disabled{% endif %} vertical item"
-           data-value="{{ choice.value }}"
+           data-value="{{ choice.value|default_if_none:"" }}"
            data-text="{{ choice.text }}">
         {% if choice.image_url %}
           <img class="ui mini avatar image"

src/js/project/admin.js

@@ -3,6 +3,58 @@ import ko from "knockout";
 
 import { Registry } from "../application/registry";
 
+/**
+ * Project basic settings view
+ */
+export class ProjectSettingsView {
+  static view_name = "ProjectSettingsView";
+
+  constructor() {
+    this.config = ko.observable({});
+    this.config.subscribe((config) => {
+      this.repo_has_errors(config.repo_has_errors);
+      if (!config.can_connect_repository) {
+        this.use_manual_configuration(true);
+      }
+    });
+
+    this.dimmer_config = ko.observable((dimmer) => {
+      dimmer("show");
+    });
+
+    this.use_manual_configuration = ko.observable(false);
+    this.use_manual_configuration.subscribe((use_manual_configuration) => {
+      if (use_manual_configuration) {
+        this.remote_repository((dropdown) => {
+          dropdown("set selected", "", true);
+        });
+      } else {
+        this.remote_repository((dropdown) => {
+          // Restore value that was there on page load, ``preventChangeTrigger=true``
+          // to avoid refiring off the field value change event
+          dropdown("restore defaults", true);
+        });
+      }
+    });
+
+    this.repo = ko.observable();
+    this.repo_has_errors = ko.observable(false);
+    this.repo_has_errors.subscribe((repo_has_errors) => {
+      this.use_manual_configuration(true);
+    });
+    this.remote_repository = ko.observable({
+      onChange: (value, text) => {
+        if (value == "") {
+          this.use_manual_configuration(true);
+        } else {
+          this.use_manual_configuration(false);
+        }
+      },
+    });
+  }
+}
+Registry.add_view(ProjectSettingsView);
+
 /**
  * Project automation rule form view
  *