Remember last reuse tab selection

Change-Id: Ic9b5d0ecc49b6361bfaa0e83b7340648ea2e6a72
Mingle: https://wikimedia.mingle.thoughtworks.com/projects/multimedia/cards/660

resources/mmv/ui/mmv.ui.metadataPanel.js

@@ -246,7 +246,7 @@
 		this.initializeCategories();
 		this.initializeRepoLink();
 
-		this.fileReuse = new mw.mmv.ui.reuse.Dialog( this.$container, this.buttons.buttons.$reuse );
+		this.fileReuse = new mw.mmv.ui.reuse.Dialog( this.$container, this.buttons.buttons.$reuse, this.config );
 
 		this.fileUsage = new mw.mmv.ui.FileUsage(
 			$( '<div>' ).appendTo( this.$imageMetadataRight )

resources/mmv/ui/mmv.ui.reuse.dialog.js

@@ -25,10 +25,14 @@
 	 * @extends mw.mmv.ui.Element
 	 * @param {jQuery} $container the element to which the dialog will be appended
 	 * @param {jQuery} $openButton the button which opens the dialog. Only used for positioning.
+	 * @param {mw.mmv.Config} config
 	 */
-	function Dialog( $container, $openButton ) {
+	function Dialog( $container, $openButton, config ) {
 		mw.mmv.ui.Element.call( this, $container );
 
+		/** @property {mw.mmv.Config} config - */
+		this.config = config;
+
 		this.$openButton = $openButton;
 
 		this.$reuseDialog = $( '<div>' )
@@ -44,16 +48,25 @@
 		this.isOpen = false;
 
 		/**
-		 * @property {Object.<string, mw.mmv.ui.Element>} List of tab ui objects.
+		 * @property {Object.<string, mw.mmv.ui.Element>} tabs List of tab ui objects.
 		 */
 		this.tabs = null;
+
+		/**
+		 * @property {Object.<string, OO.ui.MenuItemWidget>} ooTabs List of tab OOJS UI objects.
+		 */
+		this.ooTabs = null;
 	}
 	oo.inheritClass( Dialog, mw.mmv.ui.Element );
 	DP = Dialog.prototype;
 
 	// FIXME this should happen outside the dialog and the tabs, but we need to improve
 	DP.initTabs = function () {
-		var shareTab, embedTab, downloadTab;
+		function makeTab( type ) {
+			return new oo.ui.MenuItemWidget( type, {
+				label: mw.message( 'multimediaviewer-' + type + '-tab' ).text()
+			} );
+		}
 
 		this.reuseTabs = new oo.ui.MenuWidget( {
 			classes: [ 'mw-mmv-reuse-tabs' ]
@@ -69,22 +82,20 @@
 			embed: new mw.mmv.ui.reuse.Embed( this.$reuseDialog )
 		};
 
-		shareTab = new oo.ui.MenuItemWidget(
+		this.ooTabs = {
-			'share', { label: mw.message( 'multimediaviewer-share-tab' ).text() } );
+			share: makeTab( 'share' ),
-		downloadTab = new oo.ui.MenuItemWidget(
+			download: makeTab( 'download' ),
-			'download', { label: mw.message( 'multimediaviewer-download-tab' ).text() } );
+			embed: makeTab( 'embed' )
-		embedTab = new oo.ui.MenuItemWidget(
+		};
-			'embed', { label: mw.message( 'multimediaviewer-embed-tab' ).text() } );
 
 		this.reuseTabs.addItems( [
-			downloadTab,
+			this.ooTabs.download,
-			shareTab,
+			this.ooTabs.share,
-			embedTab
+			this.ooTabs.embed
 		] );
 
-		// Default to 'share' tab
+		this.selectedTab = this.getLastUsedTab() || 'download';
-		this.selectedTab = 'download';
+		this.reuseTabs.selectItem( this.ooTabs[this.selectedTab] );
-		this.reuseTabs.selectItem( downloadTab );
 
 		if ( this.dependenciesNeedToBeAttached ) {
 			this.attachDependencies();
@@ -149,6 +160,15 @@
 				this.tabs[tab].hide();
 			}
 		}
+
+		this.config.setInLocalStorage( 'mmv-lastUsedTab', this.selectedTab );
+	};
+
+	/**
+	 *
+	 */
+	DP.getLastUsedTab = function () {
+		return this.config.getFromLocalStorage( 'mmv-lastUsedTab' );
 	};
 
 	/**

resources/mmv/ui/mmv.ui.reuse.download.js

@@ -33,7 +33,7 @@
 		/** @property {mw.mmv.ui.reuse.Utils} utils - */
 		this.utils = new mw.mmv.ui.reuse.Utils();
 
-		this.$pane.addClass( 'mw-mlb-download-pane active' );
+		this.$pane.addClass( 'mw-mlb-download-pane' );
 		this.$pane.appendTo( this.$container );
 
 		this.createDownloadButton( this.$pane );

tests/qunit/mmv/ui/mmv.ui.reuse.dialog.test.js

@@ -16,22 +16,23 @@
  */
 
 ( function ( mw, $ ) {
-	function makeReuseDialog() {
+	function makeReuseDialog( sandbox ) {
-		var $fixture = $( '#qunit-fixture' );
+		var $fixture = $( '#qunit-fixture'),
-		return new mw.mmv.ui.reuse.Dialog( $fixture, $( '<div>' ).appendTo( $fixture ) );
+			config = { getFromLocalStorage: sandbox.stub(), setInLocalStorage: sandbox.stub() };
+		return new mw.mmv.ui.reuse.Dialog( $fixture, $( '<div>' ).appendTo( $fixture ), config );
 	}
 
 	QUnit.module( 'mmv.ui.reuse.Dialog', QUnit.newMwEnvironment() );
 
 	QUnit.test( 'Sanity test, object creation and UI construction', 2, function ( assert ) {
-		var reuseDialog = makeReuseDialog();
+		var reuseDialog = makeReuseDialog( this.sandbox );
 
 		assert.ok( reuseDialog, 'Reuse UI element is created.' );
 		assert.strictEqual( reuseDialog.$reuseDialog.length, 1, 'Reuse dialog div created.' );
 	} );
 
 	QUnit.test( 'handleOpenCloseClick():', 2, function ( assert ) {
-		var reuseDialog = makeReuseDialog();
+		var reuseDialog = makeReuseDialog( this.sandbox );
 
 		reuseDialog.openDialog = function () {
 			assert.ok( true, 'openDialog called.' );
@@ -55,34 +56,39 @@
 		reuseDialog.handleOpenCloseClick();
 	} );
 
-	QUnit.test( 'handleTabSelection():', 4, function ( assert ) {
+	QUnit.test( 'handleTabSelection():', 5, function ( assert ) {
-		var reuseDialog = makeReuseDialog();
+		var reuseDialog = makeReuseDialog( this.sandbox );
 
 		reuseDialog.initTabs();
 
-		reuseDialog.tabs.share.show = function () {
-			assert.ok( true, 'Share tab shown.' );
-		};
-		reuseDialog.tabs.embed.hide = function () {
-			assert.ok( true, 'Embed tab hidden.' );
-		};
-
 		// Share pane is selected
 		reuseDialog.handleTabSelection( { getData: function () { return 'share'; } } );
-
+		assert.ok( reuseDialog.tabs.share.$pane.hasClass( 'active' ), 'Share tab shown.' );
-		reuseDialog.tabs.share.hide = function () {
+		assert.ok( !reuseDialog.tabs.embed.$pane.hasClass( 'active' ), 'Embed tab hidden.' );
-			assert.ok( true, 'Share tab hidden.' );
+		assert.ok( reuseDialog.config.setInLocalStorage.calledWith( 'mmv-lastUsedTab', 'share' ),
-		};
+			'Tab state saved in local storage.' );
-		reuseDialog.tabs.embed.show = function () {
-			assert.ok( true, 'Embed tab shown.' );
-		};
 
 		// Embed pane is selected
 		reuseDialog.handleTabSelection( { getData: function () { return 'embed'; } } );
+		assert.ok( !reuseDialog.tabs.share.$pane.hasClass( 'active' ), 'Share tab hidden.' );
+		assert.ok( reuseDialog.tabs.embed.$pane.hasClass( 'active' ), 'Embed tab shown.' );
+	} );
+
+	QUnit.test( 'default tab:', 2, function ( assert ) {
+		var reuseDialog;
+
+		reuseDialog = makeReuseDialog( this.sandbox );
+		reuseDialog.initTabs();
+		assert.strictEqual( reuseDialog.selectedTab, 'download', 'Download tab is default' );
+
+		reuseDialog = makeReuseDialog( this.sandbox );
+		reuseDialog.config.getFromLocalStorage.withArgs( 'mmv-lastUsedTab' ).returns( 'share' );
+		reuseDialog.initTabs();
+		assert.strictEqual( reuseDialog.selectedTab, 'share', 'Default can be overridden' );
 	} );
 
 	QUnit.test( 'attach()/unattach():', 2, function ( assert ) {
-		var reuseDialog = makeReuseDialog();
+		var reuseDialog = makeReuseDialog( this.sandbox );
 
 		reuseDialog.initTabs();
 
@@ -126,7 +132,7 @@
 	} );
 
 	QUnit.test( 'start/stopListeningToOutsideClick():', 11, function ( assert ) {
-		var reuseDialog = makeReuseDialog(),
+		var reuseDialog = makeReuseDialog( this.sandbox ),
 			realCloseDialog = reuseDialog.closeDialog;
 
 		reuseDialog.initTabs();
@@ -172,7 +178,7 @@
 	} );
 
 	QUnit.test( 'set()/empty() sanity check:', 1, function ( assert ) {
-		var reuseDialog = makeReuseDialog(),
+		var reuseDialog = makeReuseDialog( this.sandbox ),
 		title = mw.Title.newFromText( 'File:Foobar.jpg' ),
 		src = 'https://upload.wikimedia.org/wikipedia/commons/3/3a/Foobar.jpg',
 		url = 'https://commons.wikimedia.org/wiki/File:Foobar.jpg',
@@ -192,7 +198,7 @@
 	} );
 
 	QUnit.test( 'openDialog()/closeDialog():', 3, function ( assert ) {
-		var reuseDialog = makeReuseDialog(),
+		var reuseDialog = makeReuseDialog( this.sandbox ),
 		title = mw.Title.newFromText( 'File:Foobar.jpg' ),
 		src = 'https://upload.wikimedia.org/wikipedia/commons/3/3a/Foobar.jpg',
 		url = 'https://commons.wikimedia.org/wiki/File:Foobar.jpg',