From 99ae6c001d68eb396a2875261c9d8332fde5e703 Mon Sep 17 00:00:00 2001 From: Shobhit Date: Mon, 11 Apr 2022 13:15:33 +0530 Subject: [PATCH 01/10] New UI import + basic implementation --- ...githubpullrequest_pr_closed_at_and_more.py | 28 + app/templates/base.html | 44 ++ app/templates/index.html | 510 ++++++++++++++++ app/views.py | 25 +- cdoc/settings.py | 1 + cdoc/urls.py | 5 + staticfiles/css/base.css | 574 ++++++++++++++++++ staticfiles/images/fifthtry-logo.png | Bin 0 -> 1748 bytes staticfiles/images/square-braket.svg | 4 + 9 files changed, 1188 insertions(+), 3 deletions(-) create mode 100644 app/migrations/0012_alter_githubpullrequest_pr_closed_at_and_more.py create mode 100644 app/templates/base.html create mode 100644 app/templates/index.html create mode 100644 staticfiles/css/base.css create mode 100644 staticfiles/images/fifthtry-logo.png create mode 100644 staticfiles/images/square-braket.svg diff --git a/app/migrations/0012_alter_githubpullrequest_pr_closed_at_and_more.py b/app/migrations/0012_alter_githubpullrequest_pr_closed_at_and_more.py new file mode 100644 index 0000000..d7d58c1 --- /dev/null +++ b/app/migrations/0012_alter_githubpullrequest_pr_closed_at_and_more.py @@ -0,0 +1,28 @@ +# Generated by Django 4.0.3 on 2022-04-10 11:13 + +from django.db import migrations, models + + +class Migration(migrations.Migration): + + dependencies = [ + ('app', '0011_githubpullrequest_pr_owner_username'), + ] + + operations = [ + migrations.AlterField( + model_name='githubpullrequest', + name='pr_closed_at', + field=models.DateTimeField(blank=True, null=True), + ), + migrations.AlterField( + model_name='githubpullrequest', + name='pr_head_modified_on', + field=models.DateTimeField(blank=True, null=True), + ), + migrations.AlterField( + model_name='githubpullrequest', + name='pr_merged_at', + field=models.DateTimeField(blank=True, null=True), + ), + ] diff --git a/app/templates/base.html b/app/templates/base.html new file mode 100644 index 0000000..bb82491 --- /dev/null +++ b/app/templates/base.html @@ -0,0 +1,44 @@ + + + +{% load static %} + + + + CDoc - cDoc Open Source Continuous Documentation Github https://github.com/FifthTry/cdoc + + + + + + + + + + + +
+ + +
+ {% block content %} {% endblock content %} + + + +{% block postcontent %}{% endblock postcontent %} + + \ No newline at end of file diff --git a/app/templates/index.html b/app/templates/index.html new file mode 100644 index 0000000..4cc5ce4 --- /dev/null +++ b/app/templates/index.html @@ -0,0 +1,510 @@ +{% extends 'base.html' %} +{% block content %} + +
+
+ + + + + + + +
+ + {% for monitored_pr in open_prs %} + + {% endfor %} + +
+ + + + + + + + + + + + + + + + + + + + + + +
+
+{% endblock %} + +{% block postcontent %} + + +{% endblock postcontent %} \ No newline at end of file diff --git a/app/views.py b/app/views.py index aa20dc5..a4ad879 100644 --- a/app/views.py +++ b/app/views.py @@ -4,7 +4,7 @@ import logging import uuid from urllib.parse import parse_qs - +from typing import Any, Dict import github import lib from . import lib as app_lib @@ -18,8 +18,9 @@ from django.utils.decorators import method_decorator from django.views import View from django.views.decorators.csrf import csrf_exempt +from django.contrib.auth.decorators import login_required from django.contrib.auth import models as auth_models -from django.views.generic import FormView +from django.views.generic import FormView, TemplateView from . import models as app_models from . import forms as app_forms @@ -245,8 +246,26 @@ def get(self, request): assert False, request +class AllPRView(TemplateView): + template_name = "index.html" + + def get_context_data(self, **kwargs: Any) -> Dict[str, Any]: + context = super().get_context_data(**kwargs) + matches = self.request.resolver_match.kwargs + context["repo_mapping"] = app_models.GithubRepoMap.objects.get( + code_repo__repo_full_name__iexact="{}/{}".format( + matches["account_name"], matches["repo_name"] + ) + ) + context["open_prs"] = app_models.MonitoredPullRequest.objects.filter( + code_pull_request__repository=context["repo_mapping"].code_repo + ) + return context + + +# @method_decorator(login_required(login_url="asdasd"), name="dispatch") class PRView(FormView): - template_name = "app/pr_approval.html" + template_name = "index.html" form_class = app_forms.GithubPRApprovalForm success_url = "." diff --git a/cdoc/settings.py b/cdoc/settings.py index 3123378..1595343 100644 --- a/cdoc/settings.py +++ b/cdoc/settings.py @@ -49,6 +49,7 @@ "django.contrib.contenttypes", "django.contrib.sessions", "django.contrib.messages", + "whitenoise.runserver_nostatic", "django.contrib.staticfiles", "django_extensions", "app", diff --git a/cdoc/urls.py b/cdoc/urls.py index 33cb485..e793ec6 100644 --- a/cdoc/urls.py +++ b/cdoc/urls.py @@ -22,6 +22,11 @@ "//pull//", app_views.PRView.as_view(), ), + path( + "//pulls/", + app_views.AllPRView.as_view(), + ), + # path("app/", include("app.urls")), path("admin/", admin.site.urls), ] diff --git a/staticfiles/css/base.css b/staticfiles/css/base.css new file mode 100644 index 0000000..e083ecc --- /dev/null +++ b/staticfiles/css/base.css @@ -0,0 +1,574 @@ +*{ + padding: 0; + margin: 0; +} +a{ + text-decoration: none; +} +a:hover{ + text-decoration: underline; +} + +input:focus, textarea:focus{ + outline: none !important; +} + +body { + width: 100%; + margin: 0 auto; + font: .9em/1.2 'IBM Plex Sans', sans-serif; + background-color: #18181B; +} + +.parent-container{ + max-width: 1200px; + width: 1200px; + margin: 0 auto; +} +.container { + display: grid; + grid-template-columns: repeat(12, minmax(0,1fr)); + grid-column-gap: 32px; + position: relative; +} + + +aside { + border-right: 1px solid #999; +} + +header { + display: grid; + grid-template-columns: repeat(12, minmax(0,1fr)); + grid-gap: 32px; + justify-items: end; + padding: 24px 32px 24px 32px; + background-color: rgba(45, 212, 143, 0.05); +} +header > div.logo{ + grid-column: 1 / span 2; + justify-self: start; +} + +header > div.menu{ + grid-column-start: 6; + grid-column-end: 13; + justify-self: end; +} + +header > div.menu .menu-item{ + margin-right: 32px; +} + +header > div.menu .menu-item .iconify { + font-size: 24px; + color: #FFFFFF; +} +header > div.menu .menu-item:last-child{ + margin-right: 0; +} +.breadcrumb{ + grid-column: 2 / span 12; + margin-top: 34px; + margin-bottom: 34px; + display: flex; +} + +.breadcrumb a{ + vertical-align: middle; + line-height: 36px; + font-size: 24px; +} + +.breadcrumb .iconify{ + font-size: 16px; + margin-right: 5px; +} + +.breadcrumb > .repo{ + margin-left: 5px; + margin-right: 10px; + background: url(../images/square-braket.svg) no-repeat; + background-size: 16px 23px; + background-position: left 8.5px; + padding-left: 24px; + position: relative; +} +.breadcrumb > .repo .iconify{ + position: absolute; + left: -2px; + top: 12.5px; + font-size: 15px; + color: #4fb2df; +} + +.breadcrumb > .repo > .repo-item{ + line-height: 20px; + font-size: 14px; + font-weight: 700; + display: block; +} +.breadcrumb > .repo > .repo-item:first-child{ + margin-bottom: 4px; + line-height: 16px; +} + + +.search{ + grid-column: span 10; + grid-column-start: 2; + grid-column-end: 10; + margin-bottom: 17px; +} + +.search > input{ + padding: 14px 28px; + border: 1px solid #919192; + color: #A8A29E; + font-size: 20px; + line-height: 24px; + background-color: transparent; + width: 100%; + border-radius: 8px; + box-sizing: border-box; +} +.search > input:focus{ + border: 1px solid #919192; +} + + +.doc-history{ + grid-column: span 12; + grid-column-start: 2; + grid-column-end: 12; + margin-bottom: 17px; + border: 1px solid #434547; + box-sizing: border-box; + border-radius: 8px; + margin: 0; +} +.doc-history .doc-history-row { + padding: 0px 30px; + border-bottom: 1px solid #434547; + display: grid; + grid-template-columns: repeat(12, minmax(0,1fr)); + grid-gap: 32px; +} +.dialog-history-row { + display: grid; + grid-template-columns: repeat(12, minmax(0,1fr)); + grid-gap: 32px; +} + +.doc-history .doc-history-row:last-child{ + border-bottom: 0px solid #434547; +} +.doc-history-row > .row-left, +.dialog-history-row > .row-left{ + grid-column-start: 1; + grid-column-end: 8; + justify-self: start; + padding: 20px 0; +} +.dialog-history-row > .row-left, +.dialog-history-row > .row-right{ + padding: 0px 0 !important; +} +.cell-group { + background: url(../images/square-braket.svg) no-repeat; + background-size: 16px 23px; + background-position: left 9.5px; + padding-left: 18px; + position: relative; +} +.cell-group.no-bracket{ + padding-left: 0px; + background: none; + min-height: auto !important; +} + +.cell-group > .iconify{ + position: absolute; + left: -1px; + top: 14px; +} +.cell-group a{ + display: block; + font-size: 16px; + line-height: 20px; +} + +.cell-group a.item-top{ + font-size: 14px; + line-height: 16px; +} + +.cell-group a:last-child{ + line-height: 20px; +} + +.cell-group .cell-item .iconify{ + margin-right: 5px; + font-size: 16px; + vertical-align: middle; +} +.cell-group.no-bracket .cell-item .iconify{ + margin-right: 16px; + font-size: 16px; + vertical-align: middle; + line-height: 20; +} +.cell-group.large a{ + display: block; + font-size: 20px; + line-height: 24px; +} + +.cell-group.large a.item-top{ + font-size: 20px; + line-height: 24px; +} + +.cell-group.large a:last-child{ + line-height: 24px; +} + +.cell-group.large .cell-item .iconify{ + margin-right: 5px; + font-size: 16px; + line-height: 24px; + vertical-align: middle; +} + +.doc-history-row > .row-right, +.dialog-history-row > .row-right{ + grid-column-start: 8; + grid-column-end: 13; + justify-self: end; + text-align: right; + padding: 20px 0; +} + + + + +.doc-history-row > .row-right .approved{ + font-size: 20px; + line-height: 24px; +} + +.doc-history-row > .row-right .approved .iconify{ + margin-right: 5px; + font-size: 16px; + vertical-align: middle; +} + + +.doc-history-row > .row-right .user{ + font-size: 16px; + line-height: 20px; +} + +.doc-history-row > .row-right .username{ + font-weight: 700; +} + + +/* modal */ + + +.modal{ + position: fixed; + top: 0; + left: 0; + right: 0; + bottom: 0; + z-index: 10; + display: none; +} +.modal .modal-parent{ + max-width: 1200px; + width: 1200px; + margin: 0 auto; +} +.modal .modal-container{ + display: grid; + grid-template-columns: repeat(12, minmax(0,1fr)); + grid-column-gap: 32px; + +} +.modal.opened,.modal.opened:before{ + display: block; +} +.modal:before{ + content: ""; + display: none; + background: rgba(24, 24, 27, 0.7); + position: fixed; + top: 0; + left: 0; + right: 0; + bottom: 0; + z-index: 10; +} + +.modal .modal-dialog{ + position: absolute; + top: 50%; + left: 50%; + transform: translate(-50%, -50%); + border-radius: 8px; + min-width: 614px; + min-height: 100px; + grid-column-start: 1; + grid-column-end: 8; + justify-self: start; + z-index: 100; + padding: 12px 0; +} +.modal .modal-dialog.large-dialog{ + min-width: 961px; +} +.modal.warning .modal-dialog{ + background: #141414; + border: 1px solid #966220; + box-sizing: border-box; + box-shadow: 3px 4px 4px #966220; + text-align: center; +} +.modal.warning .modal-dialog:before{ + content: ""; + width: 100%; + background: #966220; + border-radius: 8px; + height: 12px; + position: absolute; + left: 0; + top: -4px; +} +.modal.regular .modal-dialog{ + background: #141414; + border: 1px solid #2DD4BF; + box-sizing: border-box; + box-shadow: 3px 4px 4px rgba(165, 243, 252, 0.2); + border-radius: 8px; +} + +.modal.regular .modal-dialog .modal-title{ + margin-left: 35px; +} +.modal .modal-dialog .modal-title{ + font-size: 32px; + line-height: 44px; +} + +.modal .modal-dialog .modal-title .close{ + position: absolute; + right: 14px; + top: 17px; + font-size: 24px; + line-height: 24px; + cursor: pointer; +} +.modal .modal-dialog .modal-title .close:hover{ + color: #FFFFFF; +} + +.modal .modal-dialog .modal-title .goback{ + position: absolute; + left: 14px; + top: 17px; + font-size: 24px; + line-height: 24px; + cursor: pointer; +} +.modal .modal-dialog .modal-title .goback:hover{ + color: #FFFFFF; +} +.modal .modal-body { + padding: 30px 0 33px 0; +} + +.modal .modal-body .modal-item{ + display: inline-block; + text-align:left; +} + +.modal .modal-body { + margin: auto 70px; +} + +.modal.regular .modal-body { + margin: auto 35px !important; +} +.modal .body-row{ + font-weight: 400; + font-size: 16px; + line-height: 24px; +} + +.modal .body-row strong{ + font-weight: 700; +} + +.modal .modal-body .modal-msg{ + margin: 41px auto 0 auto; +} + +.modal .body-row.bordered-list{ + padding: 20px 0; + border-bottom: 1px solid #434547; + min-height: 32px; +} + +.modal .body-row.bordered-list > .connect{ + display: none; +} + +.modal .body-row.bordered-list:hover .connect{ + display: block; +} + + +.modal .group-list > .body-row:last-child{ + border-bottom: 0px solid #434547; +} + +.modal .modal-body .userinput{ + margin: 19px auto 0 auto; + width: auto; +} +.modal .modal-body .userinput input{ + width: 99.8%; + padding: 14px 0 12px 0; + font-size: 20px; + line-height: 24px; + text-align: center; + background: transparent; + border: 1px solid #919192; + box-sizing: border-box; + border-radius: 8px; + color: #A8A29E; +} + +.modal .modal-body .cta-row{ + margin-top: 25px; +} + +.modal .modal-body .caption{ + margin-top: 34px; + font-size: 14px; + line-height: 16px; +} + +/* colors */ +.main-text{ + color: #A8A29E; +} +.main-text-strong{ + color: #FFFFFF; +} +.main-error-text{ + color: #C62A21; +} +.main-warning-base{ + color: #FBEFBA; +} +.main-cta-secondary-base{ + color: #4FB2DF; +} +.main-cta-primary-base{ + color: #2DD4BF; +} +.main-success-text{ + color: #72D23C; +} +.main-cta-primary-base{ + color: #2DD4BF +} + + + +/* actionables */ +.cta{ + padding: 8px 16px; + border-radius: 8px; + font-size: 16px; + line-height: 16px; + font-weight: 700; + display: inline-block; +} + +.cta-primary{ + background-color: #2DD4BF; + color: #434547; +} +.cta-primary:hover{ + background-color: #2c9f90; + text-decoration: none; +} + + +.cta-warning{ + background-color: #966220; + color: #FBEFBA; +} +.cta-warning:hover{ + background-color: #8b5b1d; + text-decoration: none; +} + + +/* typo */ +.mt31{ + margin-top: 31px !important; +} +.mt11{ + margin-top: 11px !important; +} + +.mt12{ + margin-top: 12px !important; +} + +.pt0{ + padding-top: 0px !important; +} +.pb22{ + padding-bottom: 22px !important; +} +.pb0{ + padding-bottom: 0px !important; +} +.mhz40{ + margin-left: 40px !important; + margin-right: 40px !important; +} +.pt12{ + padding-top: 12px !important; +} +.mt27{ + margin-top: 27px !important; +} +.mt70{ + margin-top: 70px !important; +} +.tc{ + text-align: center !important; +} +.lh16{ + line-height: 16px !important; +} +.text-to-bottom{ + display: inline-block; + border-bottom: 1px solid #966220; + padding-bottom: 6px; + +} + +.visible{ + display: block; +} +.hidden{ + display: none; +} \ No newline at end of file diff --git a/staticfiles/images/fifthtry-logo.png b/staticfiles/images/fifthtry-logo.png new file mode 100644 index 0000000000000000000000000000000000000000..80c185fd75f69906fb5904cd7da3958863808dab GIT binary patch literal 1748 zcmV;_1}piAP)uN;$upn<^)(LD4YOug2D+bP5?Op;skLnP>B;*HSqcol`Wvc?%IUJ|y+2EVV-^z(V< zOWG@ANbR&l6DHyOdkLIisfoIb_BXqCWwkTZc>{Les}j7j#U3L??4AVbn*^`M?3Fyz zIA0QGYYldUn0ZEmrxrMYG@U!96WpTo!WWEIGQ036+G)1^+z+oPd+^(7{2slAIg?iY2ST%q;2%P~GUOH0aM=&R}ITYr| zkvL8Z-a`YlzQRVhv%D~p;&i(~Ka+OYCHDoW9pSNY0+=3ZsIAZXQnqoZaw$WohFx-B zM5{)_86MUe$z)-yX>|{ZhYQ+jCKK=u%O9%!0;*xN`#eX2Lj45kLhyE~XYuo+#nG+* zU=TB5N(<8uGOq_h!ew$NV0^XZ1h7QtLcgfmq6B4=NiZQy7bAjd7_|(awGK6)UDDL_ z$l0`Xz~2SU1u2J{)$wq&3u>`R;G-?a)yGSGz&-52FEAiGPxbf?QxFp02N%a`A)TFO zlfzb=zH7)9E*a+wDiHC#f^ZGyfO;w4(DVVzo}s^<2_#TrN@_F`ehP|2l!#bo7^d%q!J^O37lf~(j9F&Ng84zvA@Xq zbH6b87Zrj03ATwC-dXyyNU*Hv0*gxK__~DN)Q)nK(xk5mwt;rkBpqSIPf0e?R<*8F zK1n2z(o_zVtxPmo!;B+l{zOXgS{FKLn$HS3w4Kp2PenSXjP5}*@T?>^cdubVT%(=GP_u)kfdU57(jcE# z3?F5tvLaC=vL2ySi#+)`xkgF*1kJLQ+8t~!*z^-9nvgQhS{AB4Uf6V9B&J^!WKN`k zZoL9Go}_`q=r<>ok;KIoYG=iQ7AmE;#4e~oS{4Ml(1W_@g6D^bS6GU|W@H=b(gI$Zz>|N8Wdg??N?{^ze-T1|X&?tYt%-sD q7mt + + + From a49185e0494dda30c0b7ed0c1421b17b42a2d472 Mon Sep 17 00:00:00 2001 From: Shobhit Date: Mon, 11 Apr 2022 17:09:42 +0530 Subject: [PATCH 02/10] WIP: Populating the correct params + updating variables using javascript --- app/models.py | 1 - app/templates/base.html | 2 +- app/templates/index.html | 155 +++++++++++++-------------------------- app/views.py | 3 + 4 files changed, 54 insertions(+), 107 deletions(-) diff --git a/app/models.py b/app/models.py index b9d8c04..358ce45 100644 --- a/app/models.py +++ b/app/models.py @@ -278,7 +278,6 @@ def save(self, *args, **kwargs): def get_display_name(self): return f"{self.code_pull_request.repository.repo_full_name}/#{self.code_pull_request.pr_number}: {self.code_pull_request.pr_title}" - pass class GithubCheckRun(models.Model): diff --git a/app/templates/base.html b/app/templates/base.html index bb82491..6a16243 100644 --- a/app/templates/base.html +++ b/app/templates/base.html @@ -5,7 +5,7 @@ - CDoc - cDoc Open Source Continuous Documentation Github https://github.com/FifthTry/cdoc + {% block title %}Cdoc - Continuous Documentation{% endblock %} diff --git a/app/templates/index.html b/app/templates/index.html index 4cc5ce4..b0d91cf 100644 --- a/app/templates/index.html +++ b/app/templates/index.html @@ -26,31 +26,33 @@
{% for monitored_pr in open_prs %} + {% with code_pr_number=monitored_pr.code_pull_request.pr_number|stringformat:"s" documentation_pr_number=monitored_pr.documentation_pull_request.pr_number|stringformat:"s" %} + {% with code_pr_name="#"|add:code_pr_number|add:" "|add:monitored_pr.code_pull_request.pr_title %}
{% if monitored_pr.pull_request_status == "NOT_CONNECTED" %} - {% elif monitored_pr.pull_request_status == "APPROVED" %} + {% else %} + + {% with documentation_pr_name="#"|add:documentation_pr_number|add:" "|add:monitored_pr.documentation_pull_request.pr_title %} + {% if monitored_pr.pull_request_status == "APPROVED" %}
- Approve -
- {% endif %} + {% endwith %} + {% endif %}
+ {% endwith %} + {% endwith %} {% endfor %}
-