Page MenuHomePhabricator

Write a Cat-a-lot developer documentation page on howto use Beta commons for developing
Closed, ResolvedPublic

Description

Write a developer documentation on howto use Beta commons for developing. This should be similar than on-wiki and local development guide.

In the guide there should be

Step 1
Howto setup everything manually

  1. Howto copy relevant javascript files to Beta Commons as user javascript / css files
  2. Howto edit code so that it will use user namespace versions of the dependencies OR loads them from Wikimedia Commons
  3. Howto create test categories and howto copy files to them

Files

Step 2
Write a python pywikibot script for automating the process

  1. ie. Python script which will copy javascript / css files and modify them so that the gadget scripts will be working from user namespace.
  2. Script will create some user specific test categories and it will populate them with images
  3. If script has been re-run, it will ask if the gadget scripts would be updated to latest version from Wikimedia Commons )

Example script from local development guide:

Beta Commons Development Guide

Event Timeline

Hey @Zache! I have reviewed the provided documentation and gained a clear understanding of the task. I'll begin working on Step 1 and will keep you updated on my progress. If you have any recommendations or guidance, I would greatly appreciate it.

Hi, great and welcome!

Some notes for Step 1

  • In addition to just copying the javascript / CSS files you need to add loading script to your Special:Mypage/common.js and you need to update correct path for loading Gadget-libAPI.js to Special:Mypage/Gadget-Cat-a-lot.js.
  • It may also need updating SettingsManager and SettingsUi loading, but I hope that it would work without touching these as in beta commons there are older versions of files and it maybe can use these without changes.

Just say if there is problems or blockers i try to explain how to get forward.

Some notes for Step 2 also

The copy_cat-a-lot-files_to_local_wiki.py tries to login to locally installed MediaWiki. It also tries to edit pages where you do not have edit rights in beta commons. So it cannot be used directly. However, it still is a good example script.

What is not really mentioned anywhere in pywikibot documentation is what to do if you want to login to beta commons instead of real commons using pywikibot. It will work like this:

Create user-config.py with username line for beta Commons

usernames['commons']['beta'] = 'YOUR USERNAME'

Simple login script

import pywikibot

# Connect to Commons beta
site = pywikibot.Site('beta', 'commons')

# Test the connection
print(site)         

print("Login")
site.login()

Thanks for the warm welcome and for sharing these helpful details!

I'll start by adding the loading script and updating the path for Gadget-libAPI.js in Special:Mypage/Gadget-Cat-a-lot.js. I'll also check if the other dependencies need any changes — hopefully, they'll work as-is.

Regarding Step 2, thanks for the tips, they will definitely come in handy once I get to that step.

For now, I'll focus on Step 1 and will reach out if I get stuck. Appreciate your guidance!

Just FYI, I noticed that you were blocked in beta commons by automatic filtering (it seems that it was triggered by external links in the texts) I will ask somebody unblock you and give suitable rights so filter is less agressive.

Thank you for noticing and taking steps to resolve the issue. I really appreciate your help in getting things sorted. Please let me know if there's anything I need to do from my side.

Saw this task in passing as well — I have unblocked @adiba_anjum and given them the confirmed right (the filter which did the block will still catch them until they've made more than 5 total edits though, so be aware)

I've completed the first step of setting up the files and adding the necessary scripts. While it still needs some tweaking to be perfect, the core setup is done.
I'm currently working on the documentation in a Google Docs file. Could you advise me on where and how I should create the documentation?

You can create a subpage to Wikimedia Commons. Help:Gadget-Cat-a-lot/Beta Commons Development sounds good page name.

You can create page like this:

  1. Enable visual editor from Wikimedia Commons settings ( preferences -> -> Editing -> Editor -> Enable the visual editor ) This will make editing little bit easier.
  2. Open link Help:Gadget-Cat-a-lot/Beta Commons Development
    1. Page doesnt exists yet so there is text This page does not currently exist. You can search for this page title in other pages or create this page.
    2. Click create page link
    3. Save some placeholder text to the page ( no matter what, we just want that there is something )
    4. When there is page then click "edit" and you can start editing

Editor modes

  • Edit = Visual editor (WYSIWYG)
  • Edit source = older wikicode editor (plaintext)
  • When editing you can switch between visual editing and source editing using pencil-icon in the top-right corner of the editor window

Okay! Thanks a lot for giving such detailed instructions. I'll get to implementating it.

Hi @Zache

I've completed Step 1 and created the relevant documentation page on Wikimedia Commons: Help:Gadget-Cat-a-lot/Beta Commons Development

I've also started working on Step 2. Please let me know if you have any feedback or suggestions.

I suppose that you got this error when you tried to edit cats and Gadget-libAPI.js was loaded using importScript() and that is the reason for the failback in the guide?

index.php?title=User:zache-test/Gadget-Cat-a-lot.js&action=raw&ctype=text/javascript:1123 Uncaught TypeError: Cannot read properties of undefined (reading 'api')
    at Object.doSomething (index.php?title=User:zache-test/Gadget-Cat-a-lot.js&action=raw&ctype=text/javascript:1123:19)
    at HTMLAnchorElement.<anonymous> (index.php?title=User:zache-test/Gadget-Cat-a-lot.js&action=raw&ctype=text/javascript:1291:12)
    at HTMLAnchorElement.dispatch (jquery.js:5145:27)
    at elemData.handle (jquery.js:4949:28)

You can workaround it by loading both Gadget-libAPI.js and Gadget-Cat-a-lot.js using mw.loader.load() so the both are in same namespace ( diff1, diff2 )

It would be good idea to check what cat-a-lot.css loading actually does in MediaWiki:Gadget-Cat-a-lot.js#L-215 , but i think that your CSS-loading works. It would be good idea to check that CSS rules arent loaded twice and there would be race condition.

Notes about things which are broken in beta commons.

  • Settings don't work. There seems to be an issue in the code that conflicts with code being copied to beta commons. I didnt investigate it further, but I tested the gadget version as well and found it was also broken. This confirms the issue isn't related to running code from the user namespace.
  • there is AJAX call which is hardcoded to commons.wikimedia.org (uses variable commonsURL )

Also, one thing that could be mentioned in the tutorial is that Beta Commons' external link edit filter is aggressive and blocks users easily. Users can pass it after 5 edits, so they can start by creating categories or uploading sample files to reach those 5 edits.

Thank you for your detailed feedback and suggestions. I've made the following changes according to my understanding — please confirm if I'm on the right track:

  • I didn’t encounter the error during my testing, and the Cat-a-lot gadget seemed to function correctly. However, I included the fallback as a precaution. Now, I have updated Gadget-libAPI.js in Gadget-Cat-a-lot.js to use mw.loader.load() for improved reliability. In common.js, I now load Gadget-Cat-a-lot.js using mw.loader.load() to ensure both run in the same namespace.
  • Since MediaWiki:Gadget-Cat-a-lot.js (Line 215) already handles CSS loading, I removed importStylesheet() from my end. This ensures CSS isn’t loaded twice, avoiding potential race conditions.
  • Known Issues: I’ve noted the issues with the Settings feature and the hardcoded AJAX URL. I wanted to confirm — would you like me to attempt fixing these issues as part of my current task, or should I focus on documenting them for now? I'm happy to take either approach. Also, I'll Include guidance on bypassing Beta Commons' external link filter by completing 5 edits.

Hi @Zache ,

I’ve completed Step 2 of the microtask. The Python automation script is now ready and available at Help:Gadget-Cat-a-lot/Beta Commons Development/cat-a-lot-automation-script.py
To avoid triggering the automatic filter, I ensured that the script creates test categories and uploads images before copying the JS/CSS files.

The script meets the outlined requirements by:

  • Copying JavaScript/CSS files and modifying dependencies.
  • Creating user-specific test categories.
  • Uploading sample images from wikimedia commons to beta commons.
  • Including error handling, retry logic, and user prompts for overwriting files.

Please let me know if you’d like me to refine anything or if there are additional steps I should take.

Just FYI, I will test Step 2 at later today, but until evening I have other work to do. I just notified that I havent forgotten this.

Thanks for the update! I assumed you’d provide feedback after testing, so no worries—take your time. That’s why I started working on other tasks in the meantime. Looking forward to your feedback once you’ve had a chance to review it.

Hi, Some notes.

1.) I edited the loading script in Step 1 so it will hard fail if there is loading error (diff) because i think it is better that user will see if it fails. However, I added a alternative url as inline comment.

2.) Just some layout fixes to login test code (diff)

Pywikibot installation and configuration

Running Python can be done using virtualenv so that it will not require changes to user-wide settings. I.e.

python3 -m venv venv
source venv/bin/activate
pip install pywikibot

And as you have installed pywikibot using pip, pwb exists in venv/bin/pwb. So, cloning pywikibot is not needed and pwb can be run like this:

pwb generate_user_files

However, there could be correct answers in the documentation for what to answer in generate_user_files questions for the people who haven't used pywikibot before.

**cat-a-lot-automation-script.py*

check_permissions()
There are separate rights for editing and uploading, so being able to edit doesn't necessarily mean a user has upload permissions. There's no need to change the functionality, as upload errors will be caught later. However, the comment could clarified to say that the function checks if the user has edit permissions.

copy_images_from_category()
If images already exists in Beta Commons then it just continues to next images and it will not add images to user specific test categories ( ie: # Add the uploaded image to both test categories ). Result is that user will have empty test categories and expected result would be that test categories would be populated.

copy_files()
When the function is overwriting existing files, it could check if old and new versions are identical. If they are, then it could just say 'Skipping: Page exists and is identical with source page.'

If the script updates the files, it could show a diff for the changes as part of the confirmation. You can get a diff like this:

pywikibot.showDiff(source_page.text, target_page.text,2)

It would be nice if 'y' and 'n' would be enough for confirmation and writing full 'yes' and 'no' would not be required.

If javascript or CSS files were changed and Special:Mypage/common.js exits script could ask if the Special:Mypage/common.js should be cleared and empty it if user answers yes.

At the end
Script could ask if the user wants to update their home page (i.e., Special:Mypage) with links to the pages/categories created, similar to what Help:Gadget-Cat-a-lot/Local Development/copy cat-a-lot-files to local wiki.py does in function update_main_page().If the page exists, it could show a diff and ask for confirmation, and if not, then it would just create a new page after confirmation.

Also in the end. If Special:Mypage/common.js doesn't exist or it was cleared, script could say that to get Cat-a-lot working, a loading script should be added to Special:Mypage/common.js and show an example script, but leave adding to the user so that the user needs to do it manually. (just for confirming that user knows what is doing)

Hi @Zache,

Thanks for the detailed feedback! I’m sending these points to confirm with you if I’ve understood everything correctly or not and also to outline the approach I’ll be taking:

  1. Step 1 Loading Script: I’ll ensure the documentation reflects the change to a hard failure on loading errors while keeping the alternative URL as a fallback.
  1. Pywikibot Installation: I’ll update the documentation to include the virtual environment (venv) setup and provide guidance on answering generate_user_files questions for first-time users.
  1. Script Updates:
    • check_permissions(): I’ll clarify that this checks only for edit permissions, not upload rights.
    • copy_images_from_category(): I’ll modify this function to ensure existing images in Beta Commons are also added to user-specific test categories.
    • copy_files(): I’ll add a check to compare old and new versions before overwriting and display a diff using pywikibot.showDiff(). I’ll also allow 'y' and 'n' for confirmations.
    • Clearing Special:Mypage/common.js: Instead of fully clearing it, I’ll modify only the Cat-a-lot-related lines while preserving any other scripts. The script will show a diff and ask for confirmation before making changes.
  1. Final Enhancements:
    • I’ll add an option to update Special:Mypage with links to created pages/categories, similar to the local development script.
    • If Special:Mypage/common.js doesn’t exist or was cleared, the script will inform the user to manually add the loading script instead of automatically doing it.

Let me know if this I've understood something incorrectly and I'll get to implementating it.

Hi, confirming that you have understood correctly

Thanks for the confirmation! I'll continue working on it.

I’ve made the requested changes to the Cat-a-lot automation script and documentation based on your feedback. Here’s a summary of the updates:

  1. Script Enhancements:
    • Added functionality to ensure existing images in Beta Commons are added to user-specific test categories.
    • Improved copy_files() to show diffs and allow y/n confirmations for overwriting files.
    • Updated update_common_js() to preserve existing scripts while modifying only Cat-a-lot-related lines.
    • Added prompts to update Special:Mypage with links to created pages and categories.
    • Included a message to inform users to manually add the loading script if common.js is missing or cleared.
  2. Documentation Updates:
    • Added detailed instructions for Pywikibot installation using a virtual environment (venv).
    • Clarified the check_permissions() function to specify it checks only edit permissions.
    • Included troubleshooting tips and helpful links for better user guidance.

I’ve tested the updated script, and it’s working as expected. The documentation has also been revised to reflect all changes and provide clearer instructions for users.

Please let me know if there’s anything else I should address or if you have further feedback. Thank you for your guidance!

References:
Script
Documentation

@adiba_anjum : I made some finetuning (diff1, diff2 ). I think that it is pretty good guide and helpful for people who are setting up the Beta Commons env for Cat-a-lot development. I think that this ticket can be closed as ready. Good work!

I think I will make a subtask for debugging why the Gadget-SettingsManager.js and Gadget-SettingsUI.js don't work. If you'd like to do it, you can, but another idea was to create more entry microtask tickets for people, and this task is suitable for that.

Thank you, @Zache! I'm really glad to have contributed and made a positive impact on the Cat-a-lot community.

I had already started looking into the Settings issue with Gadget-SettingsManager.js and Gadget-SettingsUI.js. If you create a subtask for it, I’d be happy to continue working on it. However, I also understand if it’s better suited as an entry microtask—if someone else picks it up, I’d be happy to assist from the sidelines if needed.

Also, I just wanted to say that I was able to work well on this task only because of your detailed and constant guidance. Your support truly made a difference in helping me navigate the setup and automation process—so thank you for that!

Zache awarded a token.