Fix organization create form slugging (#628)

- Point form to tab url
- Use the same slugging logic from our application to render a slug

This does not add tests, we could use those though.

- Requires readthedocs/readthedocs.org#12306

Author: agjohnson

.pre-commit-config.yaml

@@ -1,6 +1,6 @@
 repos:
-  - repo: https://github.com/pre-commit/mirrors-prettier
-    rev: "v3.0.3"
+  - repo: https://github.com/rbubley/mirrors-prettier
+    rev: "v3.5.3"
     hooks:
       - id: prettier
         args: ["--write", "."]

readthedocsext/theme/static/readthedocsext/theme/js/site.js

@@ -16,7 +16,8 @@
         <h2 class="ui medium heading">{% trans "Join or create an organization" %}</h2>
 
         <div class="ui segment">
-          <div class="ui link list" data-bind="semanticui: { tabmenu: {} }">
+          <div class="ui link list"
+               data-bind="semanticui: { tabs: {history: true, autoTabActivation: true} }">
             <a class="item" data-tab="empty">
               {% comment %}
                 Show nothing when the user arrives at this page.
@@ -86,7 +87,7 @@ <h2 class="ui medium heading">{% trans "Join or create an organization" %}</h2>
         <div class="ui tab"
              data-tab="new"
              data-bind="using: new OrganizationCreateView()">
-          <form class="ui form" action="" method="post">
+          <form class="ui form" action="#/new" method="post">
             {% csrf_token %}
             {% alter_field form.name data_bind="valueInit: name, textInput: name" %}
             {% alter_field form.slug data_bind="valueInit:slug, text: slug, textInput: slug" %}

readthedocsext/theme/templates/organizations/organization_form.html

@@ -72,6 +72,11 @@ export class OrganizationCreateView {
         // https://github.com/django/django/blob/1e9db35/django/utils/text.py#L469-L470
         .replace(/[^\w\s-_]+/g, "-")
         .replace(/[-\s]+/g, "-")
+        // And then also replicate our dns_safe slugging from
+        // :py:method:`readthedocs.core.utils.sluggify`
+        .replace(/[\-\_]+/g, "-")
+        .replace(/^\-+/, "")
+        .replace(/\-+$/, "")
     );
   }
 }