WIP: Topology plugin

.deepsource.toml

@@ -0,0 +1,13 @@
+version = 1
+
+test_patterns = [
+  "cypress/tests/**",
+  "**/*.test.*"
+]
+
+[[analyzers]]
+name = "javascript"
+enabled = true
+
+  [analyzers.meta]
+  plugins = ["react"]

.eslintignore

@@ -0,0 +1,3 @@
+# Ignore artifacts:
+dist/
+node_modules/

.eslintrc.json

@@ -0,0 +1,70 @@
+{
+  "env": {
+    "browser": true,
+    "es2021": true
+  },
+  "extends": [
+    "plugin:react/recommended",
+    "plugin:react-hooks/recommended",
+    "plugin:@typescript-eslint/recommended",
+    "prettier"
+  ],
+  "parser": "@typescript-eslint/parser",
+  "parserOptions": {
+    "ecmaFeatures": {
+      "jsx": true
+    },
+    "ecmaVersion": 12,
+    "sourceType": "module"
+  },
+  "plugins": ["react", "@typescript-eslint", "react-hooks", "prettier", "simple-import-sort"],
+  "settings": {
+    "react": {
+      "version": "detect"
+    },
+    "import/resolver": {
+      "typescript": {}, // this loads <rootdir>/tsconfig.json to eslint
+      "node": {
+        "extensions": [".js", ".jsx", ".ts", ".tsx"]
+      }
+    }
+  },
+  "rules": {
+    "@typescript-eslint/no-explicit-any": "off",
+    "react/display-name": "off",
+    "react/prop-types": "off",
+    "prettier/prettier": [
+      "error",
+      {
+        "endOfLine": "auto"
+      }
+    ],
+    "no-nested-ternary": "error",
+    "simple-import-sort/exports": "error",
+    "@typescript-eslint/no-shadow": ["error"],
+    "simple-import-sort/imports": [
+      "warn",
+      {
+        "groups": [
+          // Node.js builtins. You could also generate this regex if you use a `.js` config.
+          // For example: `^(${require("module").builtinModules.join("|")})(/|$)`
+          [
+            "^(assert|buffer|child_process|cluster|console|constants|crypto|dgram|dns|domain|events|fs|http|https|module|net|os|path|punycode|querystring|readline|repl|stream|string_decoder|sys|timers|tls|tty|url|util|vm|zlib|freelist|v8|process|async_hooks|http2|perf_hooks)(/.*|$)"
+          ],
+          // Packages
+          ["^react", "^\\w"],
+          // Internal packages.
+          ["^(@|config/)(/*|$)"],
+          // Side effect imports.
+          ["^\\u0000"],
+          // Parent imports. Put `..` last.
+          ["^\\.\\.(?!/?$)", "^\\.\\./?$"],
+          // Other relative imports. Put same-folder imports and `.` last.
+          ["^\\./(?=.*/)(?!/?$)", "^\\.(?!/?$)", "^\\./?$"],
+          // Style imports.
+          ["^.+\\.s?css$"]
+        ]
+      }
+    ]
+  }
+}

.gitignore

@@ -0,0 +1,23 @@
+**/node_modules
+npm-debug.log
+yarn-debug.log
+yarn-error.log
+dist
+**/.env
+/coverage
+/gui-test-screenshots
+cypress/gui-test-screenshots
+cypress/cypress-a11y-report.json
+.DS_Store
+.devcontainer/dev.env
+console-extensions.md
+.pnp.*
+.yarn/*
+!.yarn/patches
+!.yarn/plugins
+!.yarn/releases
+!.yarn/sdks
+!.yarn/versions
+.idea/
+scripts/ca.crt
+scripts/console-client-secret

.prettierrc

@@ -0,0 +1,8 @@
+{
+  "arrowParens": "always",
+  "printWidth": 100,
+  "singleQuote": true,
+  "trailingComma": "all",
+  "tabWidth": 2,
+  "semi": true
+}

Dockerfile

@@ -0,0 +1,13 @@
+FROM registry.access.redhat.com/ubi8/nodejs-16 AS builder
+USER root
+RUN command -v yarn || npm i -g yarn
+
+COPY . /opt/app-root/src
+WORKDIR /opt/app-root/src
+RUN yarn install --frozen-lockfile --ignore-engines && yarn build
+
+FROM registry.access.redhat.com/ubi8/nginx-120
+
+COPY --from=builder /opt/app-root/src/dist /usr/share/nginx/html
+USER 1001
+CMD /usr/libexec/s2i/run

INTERNATIONALIZATION.md

@@ -0,0 +1,98 @@
+# OpenShift Internationalization
+
+#### i18next and react-i18next
+
+Internationalization is implemented with [i18next](https://www.i18next.com/) and [react-i18next](https://react.i18next.com/).
+
+The react-i18next library offers a [hook](https://react.i18next.com/latest/usetranslation-hook), [higher order component](https://react.i18next.com/latest/withtranslation-hoc), and [function](https://react.i18next.com/latest/trans-component) that can be used with React components.
+
+With these tools, we can translate text without having to worry about a key naming strategy. The text is used as the key.
+
+Internationalized text and translations are located in JSON files in a locales folder in each package, as well as a locales folder in the public folder.
+
+In general, these files shouldn't be manually updated, though sometimes plurals will need to be adjusted manually
+after files are generated.
+
+To generate and update text files:
+```
+yarn i18n
+```
+
+This command launches the [code parser](https://github.com/i18next/i18next-parser), generates JSON files containing English key:value pairs for all internationalized strings, and consolidates any English JSON files with identical names to avoid namespace conflicts in i18next.
+
+#### Scope
+We are not able to translate all text in the application. Text located in backend code or non-Red-Hat-controlled development environments may not be accessible for translation.
+
+This may include items such as:
+* Resource statuses (i.e. "Running")
+* Events surfaced from Kubernetes
+* Alerts
+* Error messages displayed to the user or in logs
+* Operators that surface informational messages
+* Logging messages
+* Monitoring dashboard chart titles and dropdowns that come from the config map dashboard definition
+
+Localizaton is not included in the CLI at this time, and bidirectional (right-to-left) text such as Hebrew and Arabic are out of scope.
+
+#### Internationalization guidelines
+
+* Any usage of i18next's `TFunction` (rather than react-i18next's `TFunction`) must be performed inside a function or component.
+* Don't use backticks inside of a `TFunction`. Our code parser will not automatically pick up the keys that contain backticks.
+
+Examples:
+```
+Bad: t(`public~Hello, it is now {{date}}`, { date: new Date() })
+Good: t('public~Hello, it is now {{date}}', { date: new Date() })
+```
+
+* `aria-label`, `aria-placeholder`, `aria-roledescription`, and `aria-valuetext` should be internationalized.
+* Use the query parameter `?pseudolocalization=true&lng=en` to see pseudolocalization on strings you've marked for internationalization.
+    * Pseudolocalization adds brackets around the text and makes it longer so you can test components with different text lengths.
+* Make sure there are no missing key warnings in your browser's developer tools - missing keys will trigger errors in integration tests. The warning will show up as an error in the JavaScript console.
+* When displaying a resource kind, you can hard-code it directly in the internationalized text or use the predefined label on the model for the kind.
+    * `model.labelPluralKey` contains the key for the internationalized kind name and must be wrapped in its own `TFunction`. Not all kinds have this attribute, so it is necessary to check for it first as shown below:
+```
+model.labelPluralKey ? t(model.labelPluralKey) :  model.labelPlural
+```
+* While i18next extracts translation keys in runtime, i18next-parser (the tool we use to generate JSON files) doesn't run the code, so it can't interpolate values in these expressions:
+
+```
+t(key)
+t('key' + id)
+t(`key${id}`)
+```
+
+As a workaround, you should specify possible static values in comments anywhere in your file:
+```
+// t('key_1')
+// t('key_2')
+t(key)
+/*
+t('key1')
+t('key2')
+*/
+t('key' + id)
+```
+
+* The optional i18nKey property on the [react-i18next Trans component](https://react.i18next.com/latest/trans-component) should only be used as a last resort. There is a known (rare) issue with the parser, where it will sometimes incorrectly generate a key that contains HTML tags. If this is the case, you will see a missingKey error in the developer tools of your browser or in our end to end tests. In this instance, the i18nKey prop should be used and made the same as the text being internationalized. HTML tags like `<strong>` can be used directly in the i18nKey prop.
+* Write tests for pseudolocalized code in Cypress
+
+#### Translations
+
+OpenShift is currently translated into three languages: Chinese, Korean, and Japanese.
+
+Translation work is done by the Red Hat Globalization team. We send them updated files from the public and packages folders on a weekly or biweekly basis for the entire console and regularly import new translations.
+
+#### Adding support for a new language
+
+To add support for a new language to OpenShift:
+1. Look up the [ISO 639-1 code](https://www.loc.gov/standards/iso639-2/php/code_list.php) for the new language.
+2. Add the new language code to `./i18n-scripts/languages.sh`
+3. Update the language switcher component (`./public/components/modals/language-preferences-modal.tsx`) to support the new language if translations are available.
+
+#### Utilities
+We have added various scripts to help us automate internationalization-related tasks in OpenShift.
+
+These scripts can all be found in `./i18n-scripts`.
+
+For more information, please review the [README](./i18n-scripts/README.md).

OWNERS

@@ -0,0 +1,21 @@
+# DO NOT EDIT; this file is auto-generated using https://github.com/openshift/ci-tools.
+# See the OWNERS docs: https://git.k8s.io/community/contributors/guide/owners.md
+
+approvers:
+  - tnisan
+  - yaacov
+  - vojtechszocs
+  - pcbailey
+  - metalice
+  - avivtur
+  - hstastna
+  - upalatucci
+reviewers:
+  - tnisan
+  - yaacov
+  - metalice
+  - pcbailey
+  - avivtur
+  - vojtechszocs
+  - hstastna
+  - upalatucci