Added Theme builder workflow to detect change in variables

[ruchI9897]

This workflow ensures that CSS variables remain consistent between the Theme Builder and the SDK. Once support is added in the SDK, the variable will become available to users and be reflected in the documentation.
Therefore, we should also add this variable to the Theme Builder to ensure alignment between what is documented and what is actually available in the cluster.

[mnk-blr]

✅ Snyk checks have passed. No issues have been found so far.

Status	Scanner	Critical	High	Medium	Low	Total (0)
✅	Open Source Security	0	0	0	0	0 issues
✅	Licenses	0	0	0	0	0 issues

💻 Catch issues earlier using the plugins for VS Code, JetBrains IDEs, Visual Studio, and Eclipse.

[gemini-code-assist]

Summary of Changes

Hello @ruchI9897, I'm Gemini Code Assist¹! I'm currently reviewing this pull request and will post my feedback shortly. In the meantime, here's a summary to help you and other reviewers quickly get up to speed!

This pull request introduces a new utility script to enforce consistency for CSS variables across different parts of the codebase. By validating the alignment between TypeScript interface definitions and their corresponding implementations, this change aims to prevent discrepancies, improve maintainability, and reduce potential styling-related bugs, ensuring a more robust and predictable styling system.

Highlights

• New CSS Variable Validation Script: Introduces scripts/validate-css-variables.js, a new Node.js script designed to ensure consistency between CSS variables defined in a TypeScript interface and their actual implementation.
• Variable Extraction Logic: The script includes dedicated functions to extract CSS variable names, specifically looking for patterns like '--ts-var-[^']+', from both a TypeScript interface file and a provided implementation content string.
• Consistency Comparison and Reporting: It compares the extracted sets of variables, identifying and reporting any variables that are defined in the interface but missing in the implementation, or vice-versa, to highlight inconsistencies.
• Flexible Input for Implementation Content: The script supports providing the CSS variable implementation content either as a command-line argument or through the CSS_VARS_IMPLEMENTATION environment variable, making it adaptable for various CI/CD setups.

Using Gemini Code Assist

The full guide for Gemini Code Assist can be found on our documentation page, here are some quick tips.

Invoking Gemini

You can request assistance from Gemini at any point in your pull request via creating an issue comment (i.e. comment on the pull request page) using either /gemini <command> or @gemini-code-assist <command>. Below is a summary of the supported commands.

Feature	Command	Description
Code Review	/gemini review	Performs a code review for the current pull request in its current state.
Pull Request Summary	/gemini summary	Provides a summary of the current pull request in its current state.
Comment	@gemini-code-assist	Responds in comments when explicitly tagged, both in issue comments and review comments.
Help	/gemini help	Displays a list of available commands.

Customization

To customize Gemini Code Assist for GitHub experience, repository maintainers can create a configuration file and/or provide a custom code review style guide (such as PEP-8 for Python) by creating and adding files to a .gemini/ folder in the base of the repository. Detailed instructions can be found here.

Limitations & Feedback

Gemini Code Assist may make mistakes. Please leave feedback on any instances where its feedback is incorrect or counter productive. You can react with 👍 and 👎 on @gemini-code-assist comments. If you're interested in giving your feedback about your experience with Gemini Code Assist for Github and other Google products, sign up here.

You can also get AI-powered code generation, chat, as well as code reviews directly in the IDE at no cost with the Gemini Code Assist IDE Extension.

Footnotes

1. Review the Privacy Notices, Generative AI Prohibited Use Policy, Terms of Service, and learn how to configure Gemini Code Assist in GitHub here. Gemini can make mistakes, so double check it and use code with caution. ↩

[pkg-pr-new]

Open in StackBlitz

npm i https://pkg.pr.new/thoughtspot/visual-embed-sdk/@thoughtspot/visual-embed-sdk@312

commit: d830fc2

[gemini-code-assist]

Code Review

This pull request introduces a new script for validating CSS variables, which is a great addition for maintaining consistency. The script is well-structured and functional. I've added a few review comments with suggestions to enhance its robustness, performance, and error handling. My main points focus on making the parsing logic more resilient to formatting variations, optimizing the comparison logic, and ensuring the script exits gracefully upon encountering errors.

[gemini-code-assist]

The current logic for extracting variables from the implementation string is a bit brittle. The regular expression on line 46 doesn't account for optional whitespace between the variable name and the colon, which could cause validation to fail on slightly different but valid formatting. The suggestion below adjusts the regex to handle whitespace and updates the mapping function to trim the result, making the extraction more robust.

Suggested change

	function extractVariablesFromImplementation(content) {
	try {
	// Extract variable names from object keys
	const variableRegex = /'--ts-var-[^']+':/g;
	const matches = content.match(variableRegex);
	if (!matches) {
	console.error('No CSS variables found in the implementation');
	return [];
	}
	// Remove quotes and colon, then sort for consistent comparison
	return matches.map(match => match.replace(/[':]/g, '')).sort();
	} catch (error) {
	console.error(`Error parsing implementation: ${error.message}`);
	return [];
	}
	}
	function extractVariablesFromImplementation(content) {
	try {
	// Extract variable names from object keys
	const variableRegex = /'--ts-var-[^']+'\s*:/g;
	const matches = content.match(variableRegex);
	if (!matches) {
	console.error('No CSS variables found in the implementation');
	return [];
	}
	// Remove quotes and colon, then sort for consistent comparison
	return matches.map(match => match.replace(/[':]/g, '').trim()).sort();
	} catch (error) {
	console.error(`Error parsing implementation: ${error.message}`);
	return [];
	}
	}

[gemini-code-assist]

For better performance, especially as the number of CSS variables grows, it's more efficient to use Set for checking inclusion. The current approach using Array.prototype.includes() inside a filter() results in O(n*m) complexity. Using Set.prototype.has() would reduce this to O(n+m).

You could refactor this section to something like this:

const implementationSet = new Set(implementationVars);
const interfaceSet = new Set(interfaceVars);

const missingInImplementation = interfaceVars.filter(varName => !implementationSet.has(varName));
const extraInImplementation = implementationVars.filter(varName => !interfaceSet.has(varName));

[gemini-code-assist]

The script continues execution even if extractVariablesFromInterface fails, which can lead to confusing output (e.g., reporting all variables as 'extra'). It would be more robust to exit immediately on such an error. To do this, you can modify extractVariablesFromInterface to return null on error (in its catch block) instead of an empty array. Then, you can apply the suggestion below to check for this null value and exit.

Suggested change

	const interfaceVars = extractVariablesFromInterface(interfacePath);
	console.log(`📋 Found ${interfaceVars.length} variables in TypeScript interface`);
	const interfaceVars = extractVariablesFromInterface(interfacePath);
	if (interfaceVars === null) {
	process.exit(1);
	}
	console.log(`📋 Found ${interfaceVars.length} variables in TypeScript interface`);

[gemini-code-assist]

Similar to the interface variable extraction, if extractVariablesFromImplementation fails, the script continues with an empty array. This can be misleading as it would report all interface variables as 'missing'. It's better to handle this failure explicitly and exit. To do this, you should modify extractVariablesFromImplementation to return null on error. Then, you can apply the suggestion below to check for null and exit.

Suggested change

	const implementationVars = extractVariablesFromImplementation(implementationContent);
	console.log(`🔧 Found ${implementationVars.length} variables in implementation`);
	const implementationVars = extractVariablesFromImplementation(implementationContent);
	if (implementationVars === null) {
	process.exit(1);
	}
	console.log(`🔧 Found ${implementationVars.length} variables in implementation`);

[sonar-prod-ts]

SonarQube Quality Gate

0 Bugs
0 Vulnerabilities
0 Security Hotspots
0 Code Smells

No Coverage information
0.0% Duplication

[sonar-prod-ts]

SonarQube Quality Gate

0 Bugs
0 Vulnerabilities
0 Security Hotspots
0 Code Smells

No Coverage information
0.0% Duplication