Reviving An Outdated Project

This week, I did some some maintenance work on Starchart. The project hasn't been worked on in a while so we're trying to update it's dependencies.

DevelopingSpace / starchart

A self-serve tool for managing custom domains and certificates

Starchart

Starchart makes it easy for the Seneca developer community to create and manage their own custom subdomains and SSL certificates, without cost or having to provide personal information.

For information about running Starchart, see our deployment guide. For development information, see our contributing guide. For further technical background, planning, and initial designs, please see the wiki.

Introduction

The internet is evolving, and what used to be hard has become simple. For example, hosting your own website used to require knowledge of server administration, operating systems, networking, etc. Today, many developers host their personal and project websites without ever touching a remote server, opting for (free) cloud services like GitHub Pages, Vercel, Netlify, or AWS.

The internet's security model is also evolving. For example, browser vendors have embraced HTTPS everywhere. This is good for security, as it enables certificate-based encryption between clients and servers. However, as with…

View on GitHub

The plan was to fix the CI workflow, which we found out was broken last week:

But before I could work out a fix, one of the previous developers, Eakam, solved the issue - turns out it was just because Playwright was outdated.

Bump playwright to 1.49.1 #772

Eakam1007 posted on Jan 18, 2025

Playwright install is failing in CI (E2E Tests). Bumping playwright version should fix that.

Ref:

View on GitHub

I felt like I should make up for it by finding more stuff to work on and thought updating more dependencies would be a great starting point.

Since the project hadn't been worked on for 2 years, there were a bunch of security vulnerabilities stemming from outdated packages. I was able to fix most of them with npm audit fix.

There were a couple more fixes that led to breaking changes in @remix-run/eslint-config and @remix-run/react, so I bumped those manually.

One of the updates (I bumped them at the same time so I can't say for sure but my bet is on /react) led to a type-check error because [@remix-run/react].useNavigation().formData may now be of the type undefined. I fixed it with optional chaining.

// Before
const isLoading =
  navigation.state === 'submitting' &&
  Number(navigation.formData.get('id')) === dnsRecord.id;

// After
const isLoading =
  navigation.state === 'submitting' &&
  Number(navigation.formData?.get('id')) === dnsRecord.id;

The other changes I made had to do with some lint errors that popped up (At this point I realized I had my ESLint extension turned off, but I'm sure these warnings came with the update, since it never happened in CI in the past).

1. Instances of importing the same module multiple times in one file:

// Before
import { getCertificateByUsername } from '~/models/certificate.server';
import { deleteCertificateById } from '~/models/certificate.server';
import { isAdmin } from '~/models/user.server';
import { getUserByUsername } from '~/models/user.server';

// After
import { getCertificateByUsername, deleteCertificateById } from '~/models/certificate.server';
import { isAdmin, getUserByUsername } from '~/models/user.server';

1. Using let when const is preferred:

// Before
let date = val.toLocaleDateString('en-US', {

// After
const date = val.toLocaleDateString('en-US', {

Surprised it didn't catch these before.

Also, when I turned on the ESLint extension I was a little taken aback because there were ~900 linter errors. Turned out it was because ESLint was linting the output generated by Playwright. So I added /playwright-report to .eslintignore.

And that was the sum of my maintenance work for this sprint. Ended up fixing 30 severe security issues, so not bad.

Update dependencies #775

uday-rana posted on Jan 18, 2025

Should fix a bunch of security vulnerabilities.

Changes

• [x] Bump dependencies
• [x] Add /playwright-report to .eslintignore
• [x] Fix typecheck and linter errors

View on GitHub

I also re-activated Dependabot which bumped vitest a couple minor versions. It'll be nice to not have to manually investigate and patch security vulnerabilities.

In other news, one of my pull requests to Mattermost was finally merged!

[GH-29548] Avoid SELECT * in `tokens_store.go` #29558

uday-rana posted on Dec 10, 2024

Summary

This PR:

• Switches SQL queries in token_store.go to use SQLBuilder
• Explicitly defines columns in SELECT queries to TokenStore.
• Factors out common queries into the constructor.

Ticket Link

Fixes #29548

Screenshots

Release Note

// Before
const isLoading =
  navigation.state === 'submitting' &&
  Number(navigation.formData.get('id')) === dnsRecord.id;

// After
const isLoading =
  navigation.state === 'submitting' &&
  Number(navigation.formData?.get('id')) === dnsRecord.id;

View on GitHub

It'd been approved a while ago but it took a few weeks to be merged into main.

In the meantime I've been working on my other PR. I was asked to make some changes and I'm waiting on a re-review.

[MM-53650] Add disable emoticon rendering setting to webapp #29414

uday-rana posted on Nov 28, 2024

Summary

This pull request adds a user setting to the webapp to toggle rendering emoticons (:D) as emojis (?).

The setting is added as a component in components/user_settings/display/render_emoticons_as_emoji/ which is imported in components/user_settings/display/user_settings_display.tsx.

I've added a renderOnOffLabel() function to user_settings_display.tsx, lifted from components/user_settings/advanced/user_settings_advanced.tsx to help render the new component.

The setting is stored as a user preference using the savePreferences() action.

I've added constants for the preference to utils/constants.tsx and webapp/channels/src/packages/mattermost-redux/src/constants/preferences.ts.

To actually use the setting, I've modified components/post_markdown to receive it's value as a prop, for which I've used getBool() and added a default value to the config. post_markdown passes this value down to Markdown on the options object, which then passes it down to utils/text_formatting.tsx, which finally passes the value to emoticons.tsx as a newly added parameter. emoticons.tsx checks whether the value is true and if it is, it transforms the emoticons into emojis.

I've updated affected tests and created unit tests for the new component. I've also updated the English translation file.

QA Test Steps

1. Navigate to User Settings.
2. Go to the Display category.
3. Find the section labelled "Auto-render emoticons as emoji" and click "Edit".
4. Toggle the setting and click "Save".
5. Emoticon rendering on messages sent by the current user and other users should be toggled client-side with the setting.

Ticket Link

Fixes (partially) https://github.com/mattermost/mattermost/issues/26504 Jira https://mattermost.atlassian.net/browse/MM-53650

Note the issue and ticket describe adding this feature to the mobile app as well, which this PR does not.

Screenshots

before	after

Release Note

// Before
const isLoading =
  navigation.state === 'submitting' &&
  Number(navigation.formData.get('id')) === dnsRecord.id;

// After
const isLoading =
  navigation.state === 'submitting' &&
  Number(navigation.formData?.get('id')) === dnsRecord.id;

View on GitHub

Working on this PR was interesting because when I first submitted it I didn't even entirely understand my changes. Going back into it after a long while away and with the feedback from the reviews helped me look at it from a fresh perspective and understand it better.

The Mattermost app gets user setting state from both "preferences" and from a "config". I added my setting to both, mimicking one of the existing settings I was advised to reference, but it turned out the "config" is for server-level settings, while this new setting was intended to be a client-side option. The reviews helped me understand where I went wrong, and it actually ended up being a smaller change than I thought necessary.

Overall I'd say it was a fairly productive week.

The above is the detailed content of Reviving An Outdated Project. For more information, please follow other related articles on the PHP Chinese website!