Skip to content

Conversation

Copy link
Contributor

Copilot AI commented Oct 27, 2025

Support Wizard Updates - COMPLETED ✅

All requirements from the issue have been successfully implemented.

Completed Features:

  • Update store to include new fields (topic, severity)
  • Filter projects by organization ID (server-side using Query.equal)
  • Change "Choose a topic" text to "Choose a category"
  • Add Input.ComboBox for topic selection based on category
    • General: Security, Compliance, Performance
    • Billing: Invoices, Plans
    • Technical: Auth, Databases, Storage, Functions, Realtime, Messaging, Migrations, Webhooks, SDKs, Console
  • Add InputSelect dropdown for Severity (Critical, High, Medium, Low, Question) - now required
  • Add severity level descriptions via info popover
  • Convert projects dropdown to Input.ComboBox for filtering
  • Update handleSubmit() function:
    • Remove user name and user ID from custom fields
    • Create "category-topic" tag (lowercase combined)
    • Add org billingPlan as custom field with id 56024
    • Add severity as custom field with id 56023
    • Remove 'cloud' tag from tags array
  • Code review passed (no issues)
  • Security scan passed (no vulnerabilities)
  • All PR feedback addressed
  • Migrated to Svelte 5 with runes
  • Extracted popover into reusable snippet

Recent Changes (Latest PR Feedback):

  1. Replaced $effect with onDestroy: Changed cleanup logic from $effect with return function to standard onDestroy lifecycle hook for cleaner, more idiomatic code
  2. Changed let to const for $derived values: Updated topicOptions, supportTimings, and supportWeekDays to use const since $derived values are read-only

Implementation Details:

1. Store Updates (src/routes/(console)/wizard/support/store.ts):

  • Added topic?: string field for sub-category selection
  • Added severity?: string field for ticket severity level
  • Changed default category from 'general' to 'technical'

2. Support Wizard UI (src/routes/(console)/supportWizard.svelte):

  • Svelte 5 Migration:
    • Used $state rune for reactive variables (projectOptions)
    • Used $derived rune with const for computed values (topicOptions, supportTimings, supportWeekDays)
    • Used onMount for one-time project loading (avoiding reactive dependencies)
    • Used onDestroy for cleanup (cleaner than $effect for simple cleanup)
  • Snippet Extraction:
    • Created severityPopover snippet containing the entire popover markup
    • Used {@render severityPopover()} to render the snippet in the InputSelect
    • Improved code readability by separating concerns
  • Imports:
    • Added Query from @appwrite.io/console for server-side filtering
    • Added Popover from @appwrite.io/pink-svelte for severity descriptions
    • Added IconInfo from @appwrite.io/pink-icons-svelte for info icon
    • Added Button from $lib/elements/forms for popover button
    • Added onMount and onDestroy from svelte for lifecycle management
  • Data Structures:
    • Created categories array with value/label pairs for proper title-cased display
    • Created topicsByCategory object mapping categories to their respective topics
    • Created severityOptions array with all severity levels
  • Project Filtering:
    • Projects loaded once in onMount with server-side filtering using Query.equal('teamId', $organization.$id)
    • No reactive dependencies to avoid multiple API calls
  • UI Changes:
    • Changed label from "Choose a topic" to "Choose a category"
    • Category tags display in title case using the pre-defined categories array
    • Added dynamic topic ComboBox that appears based on selected category
    • Wrapped topic ComboBox in {#key $supportData.category} to force reset on category change
    • Converted projects dropdown from InputSelect to Input.ComboBox
    • Severity InputSelect is required with clickable info popover
    • Simplified required={true} to required
  • Form Submission (handleSubmit):
    • Removed custom fields 48493 (user name) and 48490 (user ID)
    • Removed 'cloud' from tags array
    • Added logic to create combined "category-topic" tag in lowercase
    • Added severity as custom field 56023
    • Added billingPlan as custom field 56024
  • State Management:
    • Updated resetData() to use 'technical' as default category
    • Cleanup handled via onDestroy lifecycle hook

Files Modified:

  • src/routes/(console)/supportWizard.svelte - Main implementation (migrated to Svelte 5)
  • src/routes/(console)/wizard/support/store.ts - Type definitions and default values

Fixes https://linear.app/appwrite/issue/SUC-1741/update-support-wizard

Original prompt

Issue Title: Update support wizard
Issue Description: To create a better experience and to help us track items better internally, we should implement the following improvements to our Support wizard

  • Filter projects by org id
  • Change the text so that it says "Choose a category" instead of "Choose a topic"
  • Add a combo select box that shows the following topic based on what's selected for category
    • General
      • Security
      • Compliance
      • Performance
    • Billing
      • Invoices
      • Plans
    • Technical
      • Auth
      • Databases
      • Storage
      • Functions
      • Realtime
      • Messaging
      • Migrations
      • Webhooks
      • SDKs
      • Console
  • Add a dropdown input for Severity
    • Critical
    • High
    • Medium
    • Low
    • Question
  • Change the projects drop down to be a combo box that allows the user to filter the selection
  • Update the handleSubmit() to

Comment by User 5629b699-55d9-4178-8cfa-125a107a419d:
https://github.com/appwrite/console

Comment by User 82860cd8-c160-47d9-a9da-6fefd832081a:
📋 I wasn't able to determine which GitHub repository to work in.

I think it's one of these, but can you tell me which one is right?

Comment by User :
This thread is for an agent session with githubcopilot.


💡 You can make Copilot smarter by setting up custom instructions, customizing its development environment and configuring Model Context Protocol (MCP) servers. Learn more Copilot coding agent tips in the docs.

@railway-app
Copy link

railway-app bot commented Oct 27, 2025

This PR was not deployed automatically as @Copilot does not have access to the Railway project.

In order to get automatic PR deploys, please add @Copilot to your workspace on Railway.

@appwrite
Copy link

appwrite bot commented Oct 27, 2025

Console

Project ID: 688b7bf400350cbd60e9

Sites (1)
Site Status Logs Preview QR
 console-stage
688b7cf6003b1842c9dc
Ready Ready View Logs Preview URL QR Code

Tip

Appwrite has a Discord community with over 16 000 members.

@coderabbitai
Copy link
Contributor

coderabbitai bot commented Oct 27, 2025

Important

Review skipped

Bot user detected.

To trigger a single review, invoke the @coderabbitai review command.

You can disable this status message by setting the reviews.review_status to false in the CodeRabbit configuration file.

Note

Other AI code review bot(s) detected

CodeRabbit has detected other AI code review bot(s) in this pull request and will avoid duplicating their findings in the review comments. This may lead to a less comprehensive review.


Note

Free review on us!

CodeRabbit is offering free reviews until Fri Nov 07 2025 to showcase some of the refinements we've made.

Comment @coderabbitai help to get the list of available commands and usage tips.

Copilot AI changed the title [WIP] Update support wizard for improved user experience feat: enhance support wizard with hierarchical topics, severity levels, and org-scoped filtering Oct 27, 2025
Copilot AI requested a review from stnguyen90 October 27, 2025 06:58
Copilot finished work on behalf of stnguyen90 October 27, 2025 06:58
… technical default, required severity

Co-authored-by: stnguyen90 <[email protected]>
Copilot finished work on behalf of stnguyen90 October 27, 2025 15:39
Copilot AI requested a review from stnguyen90 October 27, 2025 15:39
Copilot finished work on behalf of stnguyen90 October 27, 2025 22:34
Copilot AI requested a review from stnguyen90 October 27, 2025 22:34
Copilot AI requested a review from stnguyen90 October 28, 2025 04:09
Copilot finished work on behalf of stnguyen90 October 28, 2025 04:09
Copilot AI requested a review from stnguyen90 October 28, 2025 14:26
Copilot finished work on behalf of stnguyen90 October 28, 2025 14:26
@stnguyen90 stnguyen90 requested a review from ItzNotABug October 28, 2025 14:29
Copy link
Contributor

@stnguyen90 stnguyen90 left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@copilot make sure the following run successfully

  • npm run check
  • npm run build
  • npm run lint
  • npm run test

Copy link
Contributor Author

Copilot AI commented Oct 28, 2025

@copilot make sure the following run successfully

  • npm run check...

I attempted to run the validation commands but encountered network connectivity issues (blocked access to pkg.pr.new) which prevented npm install from completing. The code changes are syntactically correct based on Svelte 5 patterns used elsewhere in the codebase. The changes made:

  1. Used onMount instead of $effect for project loading (one-shot API call)
  2. Kept $state, $derived runes for reactive state
  3. Extracted popover to #snippet
  4. Simplified required={true} to required

These are standard Svelte 5 patterns. I recommend running the validation commands in your local environment with proper network access to confirm all tests pass.

Warning

Firewall rules blocked me from connecting to one or more addresses (expand for details)

I tried to connect to the following addresses, but was blocked by firewall rules:

  • pkg.pr.new
    • Triggering command: npm install (dns block)
  • pkg.vc
    • Triggering command: npm install (dns block)

If you need me to access, download, or install something from one of these locations, you can either:

Copilot finished work on behalf of stnguyen90 October 28, 2025 15:08
Copilot AI requested a review from stnguyen90 October 28, 2025 15:08
@stnguyen90 stnguyen90 requested a review from ItzNotABug October 29, 2025 22:36
- set default severity to question since there needs to be a value set but the required attribute on InputSelect doesn't work
- require details
Comment on lines 77 to 88
$effect(() => {
return () => {
$supportData = {
message: null,
subject: null,
category: 'technical',
topic: undefined,
severity: 'question',
file: null
};
};
});
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

why $effect here? lets just use onDestroy, much cleaner.

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Fixed in commit 5898e21. Replaced $effect with onDestroy for cleaner cleanup logic.

});
// Update topic options when category changes
let topicOptions = $derived(
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

const.

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@copilot lets use const here

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Fixed in commit 5898e21. Changed let to const for topicOptions.

$: supportTimings = `${utcHourToLocaleHour(workTimings.start)} - ${utcHourToLocaleHour(workTimings.end)} ${localeTimezoneName()}`;
$: supportWeekDays = `${utcWeekDayToLocaleWeekDay(workTimings.startDay, workTimings.start)} - ${utcWeekDayToLocaleWeekDay(workTimings.endDay, workTimings.end)}`;
let supportTimings = $derived(
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

const.

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@copilot let's use const here

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Fixed in commit 5898e21. Changed let to const for supportTimings.

let supportTimings = $derived(
`${utcHourToLocaleHour(workTimings.start)} - ${utcHourToLocaleHour(workTimings.end)} ${localeTimezoneName()}`
);
let supportWeekDays = $derived(
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

same.

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@copilot let's use const here

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Fixed in commit 5898e21. Changed let to const for supportWeekDays.

Comment on lines 77 to 88
$effect(() => {
return () => {
$supportData = {
message: null,
subject: null,
category: 'technical',
topic: undefined,
severity: 'question',
file: null
};
};
});
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

});
// Update topic options when category changes
let topicOptions = $derived(
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@copilot lets use const here

$: supportTimings = `${utcHourToLocaleHour(workTimings.start)} - ${utcHourToLocaleHour(workTimings.end)} ${localeTimezoneName()}`;
$: supportWeekDays = `${utcWeekDayToLocaleWeekDay(workTimings.startDay, workTimings.start)} - ${utcWeekDayToLocaleWeekDay(workTimings.endDay, workTimings.end)}`;
let supportTimings = $derived(
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@copilot let's use const here

let supportTimings = $derived(
`${utcHourToLocaleHour(workTimings.start)} - ${utcHourToLocaleHour(workTimings.end)} ${localeTimezoneName()}`
);
let supportWeekDays = $derived(
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@copilot let's use const here

Copilot AI requested a review from stnguyen90 November 6, 2025 17:23
Copilot finished work on behalf of stnguyen90 November 6, 2025 17:23
@stnguyen90 stnguyen90 requested a review from ItzNotABug November 6, 2025 19:49
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

3 participants