Add code-style checks to Github CI Actions (#3564)

Easier way to check and fix formatting issues if don't want to go
precommit hooks route

.github/workflows/hypha-ci.yml

@@ -71,9 +71,13 @@ jobs:
         with:
           python-version: ${{ env.PYTHON_VERSION }}
       - name: Install python dependencies
-        run: pip install `grep "ruff" requirements-dev.txt`
-      - name: Run python linting
+        run: pip install `grep -E "ruff|djhtml|black" requirements-dev.txt`
+      - name: Run ruff
         run: ruff --format github .
+      - name: Run black
+        run: black . --check
+      - name: Run djhtml
+        run: djhtml hypha/ --check
 
   test-be:
     runs-on: ubuntu-latest

Makefile

@@ -35,6 +35,7 @@ fmt:
 	python -m ruff --fix .
 	python -m black .
 	npx prettier . --write
+	djhtml hypha/
 
 .PHONY: cov-html
 cov-html:
@@ -52,9 +53,10 @@ lint:
 	@echo "Checking python code style with ruff"
 	ruff .
 	black . --check
+	@echo "Checking html file indendation."
+	djhtml hypha/ --check
 	@echo "Checking js and css code style."
 	npm run lint
-	npx prettier . --check
 
 
 .PHONY: lint-fix

hypha/apply/templates/forms/includes/multi_input_field.html

@@ -1,12 +1,17 @@
 {% load heroicons %}
-<div class="form__item{% if field.help_text %} form__group--wrap{% endif %}{% if field.errors %} form__error{% endif %}{% if not field.initial %} multi-input-field-hidden{% endif %}{% if is_application and field.field.group_number > 1 %} field-group field-group-{{ field.field.group_number }}{% endif %}"{% if is_application and field.field.group_number > 1 %} data-hidden="{% if not show_all_group_fields %}true{% else %}false{% endif %}"{% endif %}" data-multi-field-for="{{ field.field.multi_input_id }}">
+<div
+    class="form__item{% if field.help_text %} form__group--wrap{% endif %}{% if field.errors %} form__error{% endif %}{% if not field.initial %} multi-input-field-hidden{% endif %}{% if is_application and field.field.group_number > 1 %} field-group field-group-{{ field.field.group_number }}{% endif %}"
+    {% if is_application and field.field.group_number > 1 %} data-hidden="{% if not show_all_group_fields %}true{% else %}false{% endif %}"{% endif %}
+    data-multi-field-for="{{ field.field.multi_input_id }}"
+>
     {{ field }}
 
     {% if field.errors %}<h6 class="form__error-text">{{ field.errors.as_text|linebreaksbr }}</h6>{% endif %}
 </div>
 
 {% if field.field.multi_input_add_button %}
-    <button class="link link--button link--button--narrow multi-input-add-btn mt-2{% if is_application and field.field.group_number > 1 %} field-group field-group-{{ field.field.group_number }}{% endif %}"
+    <button
+        class="link link--button link--button--narrow multi-input-add-btn mt-2{% if is_application and field.field.group_number > 1 %} field-group field-group-{{ field.field.group_number }}{% endif %}"
         type="button" data-multi-field-id="{{ field.field.multi_input_id }}"
         data-multi-visibility-index="{{ field.field.visibility_index }}"
         data-multi-max-index="{{ field.field.max_index }}"

package.json

@@ -73,6 +73,7 @@
     "dev:build:tailwind": "tailwindcss -i ./hypha/static_src/src/tailwind/main.css -o ./hypha/static_compiled/css/tailwind-output.css",
     "dev:build:images": "npm run build:images",
     "dev:build:fonts": "npm run build:fonts",
+    "lint:prettier": "prettier . --check",
     "lint:sass": "stylelint \"hypha/static_src/src/sass/**/*.scss\"",
     "lint:js": "eslint \"hypha/static_src/src/javascript/**/*.js\"",
     "collectstatic": "python manage.py collectstatic --no-post-process --noinput --verbosity 0 --settings=hypha.settings.dev",