Toolhub/Progress reports/2021-01-08

Report on activities in the Toolhub project for the week ending 2021-01-08.

Translatewiki.org integration complete for UI messages[edit]

Tracked in Phabricator:
Task T269469 resolved

User interface and API messages for Toolhub are now available for translation on translatewiki.net. New translations are being merged into the gerrit repo by l10n-bot on Monday and Thursday. Many thanks to Abijeet Patro for his help in getting the project setup on the TWN side.

There will be additional TWN related work in the future related to translating dynamic content.

Lots of localization improvements[edit]

The integration with TWN prompted a round of examining our localization setup. As a result we now have a much improved locale selector component, a frontend message parser that uses syntax which is more familiar to MediaWiki translators, localization for date formatting, a 'qqx' pseudo locale which works very similarly to MediaWiki's ?uselang=qqx, and a linter to check for UI strings that have not be localized.

651288 - Use CLDR pluralization rules (Replaced by 652622)
651556 - Configure fallback locales for vue-i18n
651645 - Fix CSRF token value when calling /api/user/locale/
651646 - Pick up locale changes from uselang query parameter
651647 - Create a qqx locale
651671 - Flip the crawler run stats on the home page for an rtl language selection
651882 - Use <dl/> to layout for "label: value" pairs that should mirror
651912 - Fix the message "The language in which this toolinfo..." by Amire80
652218 - Add @intlify/eslint-plugin-vue-i18n linter
652267 - Add qqq documentation for placeholders used in messages and plurals
652622 - Use banana-i18n's parser with vue-i18n
653573 - Replace language-name-map with @wikimedia/language-data
653575 - Consolidate locale change logic in a Vuex module
653686 - Make user preferred content languages easier to find
653687 - Allow searching locale list
654420 - Move audit log row's content in dl & dd elements
654570 - Setup i18n for moment library

User interface updates[edit]

Srishti did quite a bit of work to make the look and feel of frontend views more consistent. She also updated the layout of the tool detail view and made the form for submitting a new URL to crawl disable iteself if the user is not authenticated.

Bryan got help from Srishti in converting the tool summary card layout to a flexbox layout which is more visually consistent across a range of viewport sizes.

First js unit tests added[edit]

The changes in 653575 also include our first set of unit tests for frontend logic. We are using these libraries to build and run the tests:

This combination has worked well thus far to make readable unit tests:

'use strict';
import chai from 'chai';
import sinon from 'sinon';

chai.use( require( 'sinon-chai' ) );
const expect = chai.expect;
/* eslint-disable no-unused-expressions */

import {
	initalLocale,
	actions
} from './locale';

describe( 'store/locale', () => {
	describe( 'actions', () => {
		const stubVm = {
			$i18n: { locale: null },
			$route: { query: sinon.stub() },
			$router: { push: sinon.stub() },
			$vuetify: { rtl: null }
		};

		beforeEach( () => {
			sinon.reset();
		} );

		it( 'initializeLocale', () => {
			const commit = sinon.spy();
			const dispatch = sinon.spy();
			const state = {};

			actions.initializeLocale(
				{ commit, dispatch, state },
				{ vm: stubVm }
			);

			expect( commit ).to.not.have.been.called;
			expect( dispatch ).to.have.been.calledOnce;
			expect( dispatch ).to.have.been.calledWithExactly(
				'setLocale',
				{ vm: stubVm, initial: true, locale: initalLocale }
			);
		} );
	} );
} );

January-March 2021 project goals[edit]

The Wikimedia Foundation uses a system of objectives and key results to track internal project goals and their progress. For the January-March 2021 period (FY20/21 Q3), the following OKRs will be used to track progress on the Toolhub project:

(O) Implement milestone 3 + 4 functionality and supporting features (tool registration and search)

(O) Toolhub API OAuth (previously removed from Q2 goals): (KR) Django backend OAuth authorization server; (KR) API endpoints for OAuth client registration; (KR) API authentication via OAuth with Toolhub as authorization server; (KR) User interface to register, authorize, view, and revoke Toolhub OAuth grants
(O) Direct tool registration: (KR) Toolinfo write API; (KR) UI for creating a toolinfo record; (KR) UI for updating a toolinfo record; (KR) Backend diff tracking for toolinfo record changes; (KR) API for history and diff of toolinfo records; (KR) UI for history and diff of toolinfo record revisions
(O) Faceted search: (KR) Mirror toolinfo records into Elasticsearch; (KR) API for faceted search; (KR) UI for faceted search

See our roadmap for additional major goals which we may pull into our Q3 work if we complete these specific goals before the end of March.

Wrap up[edit]

This week marks the start of a new quarter of work at the Wikimedia Foundation. Looking back at the work that we have accomplished in Q2 (October-December 2020), we have come a very long way! At the start of October 2020 we had a plan for how work would proceed, but the application itself was a placeholder Django backend with no user interface. Today we have a functional frontend and backend with several major features implemented. We have also migrated the project from a personal repo on GitHub to Wikimedia's Gerrit server and integrated it with the Wikimedia continuous integration infrastructure. We even have a live demo server which will allow us to get feedback on our progress from a wider group of people.

Both Srishti and Bryan have learned a lot about Vue development. Bryan also accidentally learned quite a bit about the internals of Blubber while implementing 2 feature patches to extend it to better support a project like Toolhub. Srishti and Bryan are both happy with the choices of Django, Vue, and Vuetify that they made in the planning phase of the project, and feel confident that building the more complex features planned for Q3 (January-March 2021) will proceed smoothly.