Replace hardcoded integration-lozenges to generating ones.

templates/zerver/integrations.html

@@ -45,295 +45,21 @@
     </div>
 
     <div class="integration-lozenges">
-      <div class="integration-lozenge integration-airbrake">
-         <a class="integration-link integration-airbrake" href="#airbrake">
-            <img class="integration-logo" src="/static/images/integrations/logos/airbrake.png" alt="Airbrake logo" />
-            <span class="integration-label">Airbrake</span>
-         </a>
-       </div>
-       <div class="integration-lozenge integration-asana">
-         <a class="integration-link integration-asana" href="#asana">
-            <img class="integration-logo" src="/static/images/integrations/logos/asana.png" alt="Asana logo" />
-            <span class="integration-label">Asana</span>
-         </a>
-       </div>
-       <div class="integration-lozenge integration-basecamp">
-         <a class="integration-link integration-basecamp" href="#basecamp">
-            <img class="integration-logo" src="/static/images/integrations/logos/basecamp.png" alt="Basecamp logo" />
-            <span class="integration-label">Basecamp</span>
-         </a>
-       </div>
-       <div class="integration-lozenge integration-beanstalk">
-         <a class="integration-link integration-beanstalk" href="#beanstalk">
-            <img class="integration-logo" src="/static/images/integrations/logos/beanstalk.png" alt="Beanstalk logo" />
-            <span class="integration-label">Beanstalk</span>
-         </a>
-       </div>
-       <div class="integration-lozenge integration-bitbucket2">
-         <a class="integration-link integration-bitbucket2" href="#bitbucket2">
-            <img class="integration-logo" src="/static/images/integrations/logos/bitbucket.png" alt="Bitbucket logo" />
-            <span class="integration-label">Bitbucket</span>
-         </a>
-       </div>
-       <div class="integration-lozenge integration-bitbucket">
-         <a class="integration-link integration-bitbucket" href="#bitbucket">
-            <img class="integration-logo" src="/static/images/integrations/logos/bitbucket.png" alt="Bitbucket logo" />
-            <span class="integration-label" style="padding-top: 0px; padding-bottom: 0px;">Bitbucket</span>
-            <span class="integration-label-secondary">(Enterprise)</span>
-         </a>
-       </div>
-       <div class="integration-lozenge integration-capistrano">
-         <a class="integration-link integration-capistrano" href="#capistrano">
-            <img class="integration-logo" src="/static/images/integrations/logos/capistrano.png" alt="Capistrano logo" />
-            <span class="integration-label">Capistrano</span>
-         </a>
-       </div><div class="integration-lozenge integration-circleci">
-         <a class="integration-link integration-circleci" href="#circleci">
-            <img class="integration-logo" src="/static/images/integrations/logos/circleci.png" alt="CircleCI logo" />
-            <span class="integration-label">CircleCI</span>
-         </a>
-       </div>
-       <div class="integration-lozenge integration-codebase">
-         <a class="integration-link integration-codebase" href="#codebase">
-            <img class="integration-logo" src="/static/images/integrations/logos/codebase.png" alt="Codebase logo" />
-            <span class="integration-label">Codebase</span>
-         </a>
-       </div>
-       <div class="integration-lozenge integration-codeship">
-         <a class="integration-link integration-codeship" href="#codeship">
-            <img class="integration-logo" src="/static/images/integrations/logos/codeship.png" alt="Codeship logo" />
-            <span class="integration-label">Codeship</span>
-         </a>
-       </div>
-       <div class="integration-lozenge integration-crashlytics">
-         <a class="integration-link integration-crashlytics" href="#crashlytics">
-            <img class="integration-logo" src="/static/images/integrations/logos/crashlytics.png" alt="Crashlytics logo" />
-            <span class="integration-label">Crashlytics</span>
-         </a>
-       </div>
-       <div class="integration-lozenge integration-deskcom">
-         <a class="integration-link integration-deskcom" href="#deskcom">
-            <img class="integration-logo" src="/static/images/integrations/logos/deskcom.png" alt="Desk.com logo" />
-            <span class="integration-label">Desk.com</span>
-         </a>
-       </div>
-{% if email_integration_enabled %}
-       <div class="integration-lozenge integration-email">
-         <a class="integration-link integration-email" href="#email">
-            <img class="integration-logo" src="/static/images/integrations/logos/email.png" alt="email" />
-            <span class="integration-label">Email</span>
-         </a>
-       </div>
-{% endif %}
-       <div class="integration-lozenge integration-freshdesk">
-         <a class="integration-link integration-freshdesk" href="#freshdesk">
-            <img class="integration-logo" src="/static/images/integrations/logos/freshdesk.png" alt="Freshdesk logo" />
-            <span class="integration-label">Freshdesk</span>
-         </a>
-       </div>
-       <div class="integration-lozenge integration-helloworld">
-         <a class="integration-link integration-helloworld" href="#helloworld">
-            <img class="integration-logo" src="/static/images/integrations/logos/helloworld.png" alt="Hello World logo" />
-            <span class="integration-label">Hello World</span>
-         </a>
-       </div>
-       <div class="integration-lozenge integration-git">
-         <a class="integration-link integration-git" href="#git">
-            <img class="integration-logo" src="/static/images/integrations/logos/git.png" alt="Git logo" />
-            <span class="integration-label">Git</span>
-         </a>
-       </div>
-       <div class="integration-lozenge integration-github">
-         <a class="integration-link integration-github" href="#github">
-            <img class="integration-logo" src="/static/images/integrations/logos/github.png" alt="Github logo" />
-            <span class="integration-label">GitHub</span>
-         </a>
-       </div>
-       <div class="integration-lozenge integration-hubot">
-         <a class="integration-link integration-hubot" href="#hubot">
-            <img class="integration-logo" src="/static/images/integrations/logos/hubot.png" alt="Hubot logo" />
-            <span class="integration-label">Hubot</span>
-         </a>
-       </div>
-       <div class="integration-lozenge integration-ifttt">
-         <a class="integration-link integration-ifttt" href="#ifttt">
-            <img class="integration-logo" src="/static/images/integrations/logos/ifttt.png" alt="IFTTT logo" />
-            <span class="integration-label">IFTTT</span>
-         </a>
-       </div>
-       <div class="integration-lozenge integration-jenkins">
-         <a class="integration-link integration-jenkins" href="#jenkins">
-            <img class="integration-logo" src="/static/images/integrations/logos/jenkins.png" alt="Jenkins logo" />
-            <span class="integration-label" style="padding-top: 0px; padding-bottom: 0px;">Jenkins</span>
-            <span class="integration-label-secondary">(or Hudson)</span>
-         </a>
-       </div>
-       <div class="integration-lozenge integration-jira">
-         <a class="integration-link integration-jira" href="#jira">
-            <img class="integration-logo" src="/static/images/integrations/logos/jira.png" alt="JIRA logo" />
-            <span class="integration-label" style="padding-top: 0px; padding-bottom: 0px;">JIRA</span>
-            <span class="integration-label-secondary">(hosted or v5.2+)</span>
-         </a>
-       </div>
-       <div class="integration-lozenge integration-jira-plugin">
-         <a class="integration-link integration-jira" href="#jira-plugin">
-            <img class="integration-logo" src="/static/images/integrations/logos/jira.png" alt="JIRA logo" />
-            <span class="integration-label" style="padding-top: 0px; padding-bottom: 0px;">JIRA</span>
-            <span class="integration-label-secondary">(locally installed)</span>
-         </a>
-       </div>
-       <div class="integration-lozenge integration-mercurial">
-         <a class="integration-link integration-mercurial" href="#mercurial">
-            <img class="integration-logo" src="/static/images/integrations/logos/mercurial.png" alt="Mercurial logo" />
-            <span class="integration-label">Mercurial (hg)</span>
-         </a>
-       </div>
-       <div class="integration-lozenge integration-nagios">
-         <a class="integration-link integration-nagios" href="#nagios">
-            <img class="integration-logo" src="/static/images/integrations/logos/nagios.png" alt="Nagios logo" />
-            <span class="integration-label">Nagios</span>
-         </a>
-       </div>
-       <div class="integration-lozenge integration-newrelic">
-         <a class="integration-link integration-newrelic" href="#newrelic">
-            <img class="integration-logo" src="/static/images/integrations/logos/newrelic.png" alt="New Relic logo" />
-            <span class="integration-label">New Relic</span>
-         </a>
-       </div>
-       <div class="integration-lozenge integration-pagerduty">
-         <a class="integration-link integration-pagerduty" href="#pagerduty">
-            <img class="integration-logo" src="/static/images/integrations/logos/pagerduty.png" alt="Pagerduty logo" />
-            <span class="integration-label">Pagerduty</span>
-         </a>
-       </div>
-       <div class="integration-lozenge integration-perforce">
-         <a class="integration-link integration-perforce" href="#perforce">
-            <img class="integration-logo" src="/static/images/integrations/logos/perforce.png" alt="Perforce logo" />
-            <span class="integration-label">Perforce</span>
-         </a>
-       </div>
-       <div class="integration-lozenge integration-phabricator">
-         <a class="integration-link integration-phabricator" href="#phabricator">
-            <img class="integration-logo" src="/static/images/integrations/logos/phabricator.png" alt="Phabricator logo" />
-            <span class="integration-label">Phabricator</span>
-         </a>
-       </div>
-       <div class="integration-lozenge integration-pingdom">
-         <a class="integration-link integration-pingdom" href="#pingdom">
-            <img class="integration-logo" src="/static/images/integrations/logos/pingdom.png" alt="Pingdom logo" />
-            <span class="integration-label">Pingdom</span>
-         </a>
-       </div>
-       <div class="integration-lozenge integration-pivotal">
-         <a class="integration-link integration-pivotal" href="#pivotal">
-            <img class="integration-logo" src="/static/images/integrations/logos/pivotal.png" alt="Pivotal logo" />
-            <span class="integration-label">Pivotal Tracker</span>
-         </a>
-       </div>
-       <div class="integration-lozenge integration-puppet">
-         <a class="integration-link integration-puppet" href="#puppet">
-            <img class="integration-logo" src="/static/images/integrations/logos/puppet.png" alt="Puppet logo" />
-            <span class="integration-label">Puppet</span>
-         </a>
-       </div>
-       <div class="integration-lozenge integration-redmine">
-         <a class="integration-link integration-redmine" href="#redmine">
-            <img class="integration-logo" src="/static/images/integrations/logos/redmine.png" alt="Redmine logo" />
-            <span class="integration-label">Redmine</span>
-         </a>
-       </div>
-       <div class="integration-lozenge integration-rss">
-         <a class="integration-link integration-rss" href="#rss">
-            <img class="integration-logo" src="/static/images/integrations/logos/rss.png" alt="RSS logo" />
-            <span class="integration-label">RSS</span>
-         </a>
-       </div>
-       <div class="integration-lozenge integration-semaphore">
-         <a class="integration-link integration-semaphore" href="#semaphore">
-            <img class="integration-logo" src="/static/images/integrations/logos/semaphore.png" alt="Semaphore logo" />
-            <span class="integration-label">Semaphore</span>
-         </a>
-       </div>
-       <div class="integration-lozenge integration-stash">
-         <a class="integration-link integration-stash" href="#stash">
-            <img class="integration-logo" src="/static/images/integrations/logos/stash.png" alt="Stash logo" />
-            <span class="integration-label">Stash</span>
-         </a>
-       </div>
-       <div class="integration-lozenge integration-subversion">
-         <a class="integration-link integration-subversion" href="#subversion">
-            <img class="integration-logo" src="/static/images/integrations/logos/subversion.png" alt="Subversion logo" />
-            <span class="integration-label">Subversion</span>
-         </a>
-       </div>
-       <div class="integration-lozenge integration-taiga">
-         <a class="integration-link integration-taiga" href="#taiga">
-            <img class="integration-logo" src="/static/images/integrations/logos/taiga.png" alt="Taiga logo" />
-            <span class="integration-label">Taiga</span>
-         </a>
-       </div>
-       <div class="integration-lozenge integration-teamcity">
-         <a class="integration-link integration-teamcity" href="#teamcity">
-            <img class="integration-logo" src="/static/images/integrations/logos/teamcity.png" alt="Teamcity logo" />
-            <span class="integration-label">Teamcity</span>
-         </a>
-       </div>
-       <div class="integration-lozenge integration-trac">
-         <a class="integration-link integration-trac" href="#trac">
-            <img class="integration-logo" src="/static/images/integrations/logos/trac.png" alt="Trac logo" />
-            <span class="integration-label">Trac</span>
-         </a>
-       </div>
-       <div class="integration-lozenge integration-transifex">
-         <a class="integration-link integration-transifex" href="#transifex">
-            <img class="integration-logo" src="/static/images/integrations/logos/transifex.png" alt="Transifex logo" />
-            <span class="integration-label">Transifex</span>
-         </a>
-       </div>
-       <div class="integration-lozenge integration-travis">
-         <a class="integration-link integration-travis" href="#travis">
-            <img class="integration-logo" src="/static/images/integrations/logos/travis.png" alt="Travis CI logo" />
-            <span class="integration-label">Travis CI</span>
-         </a>
-       </div>
-       <div class="integration-lozenge integration-trello">
-         <a class="integration-link integration-trello" href="#trello">
-            <img class="integration-logo" src="/static/images/integrations/logos/trello.png" alt="Trello logo" />
-            <span class="integration-label" style="padding-top: 0px; padding-bottom: 0px;">Trello</span>
-            <span class="integration-label-secondary">(webhook)</span>
-         </a>
-       </div>
-       <div class="integration-lozenge integration-trello-plugin">
-         <a class="integration-link integration-trello-plugin" href="#trello-plugin">
-            <img class="integration-logo" src="/static/images/integrations/logos/trello.png" alt="Trello logo" />
-            <span class="integration-label" style="padding-top: 0px; padding-bottom: 0px;">Trello</span>
-            <span class="integration-label-secondary">(legacy)</span>
-         </a>
-       </div>
-       <div class="integration-lozenge integration-twitter">
-         <a class="integration-link integration-twitter" href="#twitter">
-            <img class="integration-logo" src="/static/images/integrations/logos/twitter.png" alt="Twitter logo" />
-            <span class="integration-label">Twitter</span>
-         </a>
-       </div>
-       <div class="integration-lozenge integration-updown">
-         <a class="integration-link integration-updown" href="#updown">
-            <img class="integration-logo" src="/static/images/integrations/logos/updown.png" alt="Updown logo" />
-            <span class="integration-label">Updown</span>
-         </a>
-       </div>
-       <div class="integration-lozenge integration-yo-app">
-         <a class="integration-link integration-yo-app" href="#yo-app">
-            <img class="integration-logo" src="/static/images/integrations/logos/yo-app.png" alt="Yo App logo" />
-            <span class="integration-label">Yo App</span>
-         </a>
-       </div>
-       <div class="integration-lozenge integration-zendesk">
-         <a class="integration-link integration-zendesk" href="#zendesk">
-            <img class="integration-logo" src="/static/images/integrations/logos/zendesk.png" alt="Zendesk logo" />
-            <span class="integration-label">Zendesk</span>
-         </a>
-       </div>
+      {% for integration in integrations_dict.values() %}
+        {% if integration.is_enabled() %}
+          <div class="integration-lozenge integration-{{ integration.name }}">
+             <a class="integration-link integration-{{ integration.name }}" href="#{{ integration.name }}">
+                <img class="integration-logo" src="/{{ integration.logo }}" alt="{{ integration.display_name }} logo" />
+               {% if integration.secondary_line_text %}
+                 <span class="integration-label" style="padding-top: 0px; padding-bottom: 0px;">{{ integration.display_name }}</span>
+                 <span class="integration-label-secondary">{{ integration.secondary_line_text }}</span>
+               {% else %}
+                 <span class="integration-label">{{ integration.display_name}}</span>
+               {% endif %}
+             </a>
+          </div>
+        {% endif %}
+      {% endfor %}
     </div>
 
     <div class="portico-page-header extra" id="hubot-integrations"><a href="#"><i class="icon-vector-gears portico-page-header-icon"></i>Integrations available via Hubot</a></div>

zerver/views/integrations.py

@@ -0,0 +1,13 @@
+from collections import OrderedDict
+from django.views.generic import TemplateView
+
+from zerver.lib.integrations import INTEGRATIONS
+
+class IntegrationView(TemplateView):
+    template_name = 'zerver/integrations.html'
+
+    def get_context_data(self, **kwargs):
+        context = super(IntegrationView, self).get_context_data(**kwargs)
+        alphabetical_sorted_integration = OrderedDict(sorted(INTEGRATIONS.items()))
+        context['integrations_dict'] = alphabetical_sorted_integration
+        return context

zproject/urls.py

@@ -7,6 +7,7 @@ import os.path
 import zerver.forms
 from zproject import dev_urls
 from zproject.legacy_urls import legacy_urls
+from zerver.views.integrations import IntegrationView
 from zerver.lib.integrations import WEBHOOK_INTEGRATIONS
 
 # NB: There are several other pieces of code which route requests by URL:
@@ -94,7 +95,7 @@ i18n_urls = [
     # API and integrations documentation
     url(r'^api/$', TemplateView.as_view(template_name='zerver/api.html')),
     url(r'^api/endpoints/$', 'zerver.views.api_endpoint_docs'),
-    url(r'^integrations/$', TemplateView.as_view(template_name='zerver/integrations.html')),
+    url(r'^integrations/$', IntegrationView.as_view()),
     url(r'^apps/$', TemplateView.as_view(template_name='zerver/apps.html')),
 
     url(r'^robots\.txt$', RedirectView.as_view(url='/static/robots.txt')),