Merge branch 'master' into fix/upload-queue

Author: ramprasadagarwal

.cursor/rules/accessibility.mdc

@@ -0,0 +1,12 @@
+---
+description: Accessibility rules for components, styles, and templates.
+globs: ["**/*.tsx", "**/templates/**", "**/*.scss"]
+alwaysApply: false
+---
+
+# A11y Essentials
+- Use semantic elements; controls must have accessible names.
+- Dialogs: trap focus, restore on close, label/describe properly.
+- Announce async states (loading, error, empty); no color-only meanings.
+- Use ARIA when elements might not fully describe a complex widget's purpose or behavior
+

.cursor/rules/build-and-scripts.mdc

@@ -0,0 +1,15 @@
+---
+description: Build/dev scripts norms; attach to package/build/config files.
+globs: ["package.json", "webpack*.js", "tsconfig.json", "Makefile", "pyproject.toml"]
+alwaysApply: false
+---
+
+# Build/Dev
+- Frontend dev: `npm run dev`, `dev-login`, `dev-workers`.
+- Production bundles: `npm run webpack*`.
+- Python apps: `make apps` / `make desktop`.
+- CI: scripts must be non-interactive and idempotent.
+
+## Checklists
+- Register new React roots in relevant imports/bootstrap as required by Hue.
+- Keep TS strict; no downlevel that breaks antd/cuix typings.

.cursor/rules/code-quality-and-lint.mdc

@@ -0,0 +1,11 @@
+---
+description: ESLint/Prettier/Stylelint/TS strictness; attach broadly to source and configs.
+globs: [".eslintrc.*", ".prettierrc*", ".stylelintrc*", "**/*.ts", "**/*.tsx", "**/*.scss"]
+alwaysApply: false
+---
+
+# Code Quality
+- Run `npm run lint`, `style-lint`, `prettier` before committing.
+- Do not disable rules without justification in-code.
+- Prefer `readonly`, narrow `unknown`, avoid `any`.
+- Keep imports ordered; avoid unused exports.

.cursor/rules/frontend-conventions.mdc

@@ -0,0 +1,32 @@
+---
+description: Conventions for React/TS, imports, naming, structure; auto-attach to UI code.
+globs: ["**/*.ts", "**/*.tsx"]
+alwaysApply: false
+---
+
+# React + TS Conventions
+- Use `interface` for props; no `any`; narrow `unknown`.
+- Import order: externals → internal utils/hooks → types → styles (last).
+- Keep components cohesive; lift state; split large parts into small pure pieces.
+
+## New react components 
+- Component folder: `ComponentName/ComponentName.tsx` + `ComponentName.test.tsx` + `ComponentName.scss`.
+- Do not create an index.ts file 
+- Always the create a unit test and if needed the scss file
+- Always include the Cloudera copyright msg at the beginning of the file
+- Global and reusable components are placed in folder `desktop/core/src/desktop/js/reactComponents`
+- Put app specific components under that app, e.g. `desktop/core/src/desktop/js/apps/editor/components/`
+
+## Example Skeleton
+```ts
+export interface FooProps { title: string; onAction?: () => void }
+export const Foo = ({ title, onAction }: FooProps) => (
+  <div className="foo">
+    <h2>{title}</h2>
+    <button onClick={onAction}>{t('Click me')}</button>
+  </div>
+);
+```
+
+## Performance
+Lazy-load heavy chunks; debounce/cancel network work; memoize expensive calcs.

.cursor/rules/i18n-and-copy.mdc

@@ -0,0 +1,21 @@
+---
+description: i18n and microcopy rules for all user-facing text.
+globs: ["**/*.tsx", "**/*.ts", "**/*.vue", "**/*.ko", "**/templates/**"]
+alwaysApply: false
+---
+
+# i18n & Copy
+- All user-facing strings go through i18n (`useTranslation()` in `i18nReact`).
+- Copy should be concise, action-oriented, and consistent.
+- Error messages = clear cause + actionable next step.
+- Default namespace `translation` unless justified otherwise.
+
+
+## Example
+```ts
+import { i18nReact } from '../../../utils/i18nReact';
+
+const { t } = i18nReact.useTranslation();
+
+const buttonLabel = t('click me')
+```t

.cursor/rules/integration-bridges.mdc

@@ -0,0 +1,15 @@
+---
+description: Guidance for React mounting in templates and KO/Vue boundaries.
+globs: ["**/templates/**", "**/*.ko", "**/*.vue", "**/*.tsx"]
+alwaysApply: false
+---
+
+# Integration Patterns
+- **KO → React**: use `reactWrapper` binding; keep KO observables at boundary.
+- **Templates (Mako/HTML)**: mount via `data-reactcomponent` on stable containers.
+- **Vue legacy**: do not introduce new Vue; prefer React for new work.
+
+## Pitfalls
+- Ensure cuix/antd CSS scope present at React root.
+- Avoid dual ownership of DOM by different frameworks.
+

.cursor/rules/legacy-migration.mdc

@@ -0,0 +1,11 @@
+---
+description: Strategy for migrating jQuery/KO/Less pieces toward React/SCSS.
+globs: ["**/jquery/**", "**/*.less", "**/*.ko.js", "**/*.vue", "**/*.tsx"]
+alwaysApply: false
+---
+
+# Migration Strategy
+- When touching legacy code, always ask before adding typed adapters and moving logic to React/TS.
+- Replace jQuery DOM ops with state/effects; keep remaining jQuery isolated.
+- Only convert Less→SCSS for code that is migrated to react.js, don't mix less and scss for the same component.
+- Add regression tests before refactors.

.cursor/rules/pr-review-checklist.mdc

@@ -0,0 +1,41 @@
+---
+description: PR review output policy and checklist;
+alwaysApply: false
+---
+# PR Review 
+
+## Instructions
+— Only Output Issues/Improvements, DO NOT list all that is already good.
+- Be concise. 
+- Provide a general feedback section for issues spanning multiple files, e.g. architectural.
+- Provide a section per file with links to the source files.
+
+## Always check for
+- Architecture: lift/split state; keep components cohesive.
+- Naming clarity: components, functions, variables.
+- Edge cases: loading/empty/error; network failures.
+- Accessibility: roles, labels, focus, contrast. Only comment where needed, 
+- Check for aria- attributes ONLY when needed. e.g. 
+  - DO: comment if an icon inly button is missing aria-label. 
+  - DON'T: comment about missing aria-disabled if a native disabled attribute is used.
+- Copy: concise, consistent; i18n everywhere.
+- All files must start with the Cloudera copyright statement
+
+## Make sure that test files
+- test main flows
+- use userEvent and avoid fireEvent unless realy needed.
+- does not test implementation details; assert on behavior and rendered screens.
+- use role/name queries, e.g. getByRole rather than getByText
+- uses toBeVisible() instead of toBeInTheDocument() where possible
+- use the component name in the describe function
+- use "it" function over "test" for better readbility
+
+
+## Make sure the style files
+- use BEM notation (avoid unnecessary nesting for classes but allow .antd.cuix on the root)
+- never use hardcoded colors; use tokens/variables.
+- avoid hardcoded variables for positioning/spacing if possible
+- do not contain unnused classes
+- use classes over HTML elements whenever possible
+
+ 

.cursor/rules/project-overview.mdc

@@ -0,0 +1,68 @@
+---
+description: Terse Hue overview + global constraints; always include in all requests.
+globs:
+alwaysApply: true
+---
+
+# Hue Overview (short)
+- Backend: Python/Django; Frontend: React (primary) + some Vue/KO/jQuery.
+- Styling: SCSS (BEM). Avoid adding new Less; migrate to SCSS when touching.
+- UI libs: Ant Design (antd) + Cloudera UI (cuix).
+- TS strict; avoid `any`. Prefer named type imports.
+- No CSS Modules; use global SCSS conventions.
+
+## Golden Rules
+- Focus on the task given, do not expand your tasks without requesting confirmation first.
+- Do not automatically start coding if you are asked a question. Only code when asked to.
+- Always try to follow best practices and avoid hacks
+- Write Clean Code with Meaningful names, Single responsibility, Expressive code etc
+- Prefer **React + TypeScript** for new UI.
+- Maintain KO↔React via `reactWrapper` where used.
+- No hardcoded color codes; use tokens/variables.
+- All user-facing text must be i18n'd.
+
+
+## Project Structure
+hue/
+├── apps/                          # Backend Django applications
+│   ├── beeswax/                   # Hive query interface
+│   ├── filebrowser/               # File system browser
+│   ├── impala/                    # Impala query interface
+│   ├── jobbrowser/                # Job monitoring
+│   ├── metastore/                 # DB Table Browser
+│   ├── notebook/                  # Interactive sql Editor
+│   ├── oozie/                     # Workflow management
+│   ├── rdbms/                     # RDBMS connectors
+│   └── ...                        # Other backend apps
+├── desktop/                       # Core desktop functionality
+│   ├── core/                      # Core desktop components
+│   │   └── src/desktop/
+│   │       ├── js/                # Frontend JavaScript/TypeScript
+│   │       │   ├── apps/          # Application-specific components
+│   │       │   │   ├── editor/    # SQL Editor app
+│   │       │   │   ├── notebook/  # Notebook app
+│   │       │   │   ├── tableBrowser/
+│   │       │   │   └── jobBrowser/
+│   │       │   ├── reactComponents/ # Shared React components
+│   │       │   ├── vue/           # Vue.js components
+│   │       │   ├── ko/            # Knockout.js components
+│   │       │   ├── components/    # Legacy components
+│   │       │   ├── utils/         # Utility functions
+│   │       │   ├── api/           # API utilities
+│   │       │   └── types/         # TypeScript type definitions
+│   │       ├── static/            # Static assets
+│   │       └── templates/         # Django templates
+│   └── libs/                      # Shared libraries
+├── tools/                         # Build and development tools
+├── docs/                          # Documentation
+├── ext/                           # External dependencies
+├── maven/                         # Maven build configuration
+├── package.json                   # Frontend dependencies
+├── pyproject.toml                 # Python project configuration
+├── webpack.config.js              # Webpack configuration
+├── tsconfig.json                  # TypeScript configuration
+├── jest.config.js                 # Jest testing configuration
+├── .eslintrc.js                   # ESLint configuration
+├── .prettierrc                    # Prettier configuration
+├── .stylelintrc                   # Stylelint configuration
+└── Makefile                       # Build automation

.cursor/rules/styling-and-design-tokens.mdc

@@ -0,0 +1,21 @@
+---
+description: SCSS + BEM rules; forbid hardcoded colors; attach to style files.
+globs: ["**/*.scss", "**/*.less"]
+alwaysApply: false
+---
+
+# Styling Rules
+- **Primary:** SCSS with BEM; avoid adding new Less. Do not automigrate when touching unless you can easily migrate the entire file.
+- **No hardcoded colors**; use SCSS variables/tokens (cuix/antd) from 
+- Co-locate `ComponentName.scss` with the component; keep selectors BEM-scoped.
+- Prefer BEM modifiers over state classes
+- Prefer classes over using HTML element selectors
+
+## Example
+```scss
+@use 'variables' as vars;
+.component-name {
+  &__title {  color: vars.$hue-primary-color-dark;; }
+  &--disabled { opacity: .5; cursor: not-allowed; }
+}
+```