@orsetra/shared-ui 1.1.18 → 1.1.20

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@orsetra/shared-ui",
-  "version": "1.1.18",
+  "version": "1.1.20",
   "description": "Shared UI components for Orsetra platform",
   "main": "./index.ts",
   "types": "./index.ts",
@@ -16,6 +16,12 @@
     "components",
     "hooks",
     "lib",
+    "api",
+    "context",
+    "utils",
+    "types",
+    "locals",
+    "i18n.tsx",
     "README.md"
   ],
   "publishConfig": {
@@ -43,11 +49,6 @@
     "@hookform/resolvers": "^3.9.1",
     "@orsetra/shared-types": "^1.0.4",
     "@radix-ui/react-accordion": "1.2.2",
-    "i18next": "^23.15.0",
-    "lodash": "^4.17.21",
-    "moment": "^2.30.1",
-    "react-cookies": "^0.1.1",
-    "react-i18next": "^14.1.0",
     "@radix-ui/react-alert-dialog": "1.1.4",
     "@radix-ui/react-aspect-ratio": "1.1.1",
     "@radix-ui/react-avatar": "1.1.2",
@@ -79,13 +80,18 @@
     "cmdk": "1.0.4",
     "date-fns": "4.1.0",
     "embla-carousel-react": "8.5.1",
+    "i18next": "^23.15.0",
     "input-otp": "1.4.1",
+    "lodash": "^4.17.21",
     "lucide-react": "^0.454.0",
+    "moment": "^2.30.1",
     "next-themes": "^0.4.4",
     "react-avatar": "^5.0.3",
+    "react-cookies": "^0.1.1",
     "react-day-picker": "8.10.1",
     "react-easy-crop": "^5.0.8",
     "react-hook-form": "^7.54.0",
+    "react-i18next": "^14.1.0",
     "react-resizable-panels": "^2.1.7",
     "recharts": "^2.15.0",
     "sonner": "^1.7.1",
@@ -94,6 +100,7 @@
     "zod": "^3.24.1"
   },
   "devDependencies": {
+    "@types/lodash": "^4.17.24",
     "@types/react": "^19",
     "next": "^16.0.7",
     "typescript": "^5"

package/types/application.ts

@@ -0,0 +1,6 @@
+export enum DeployModes {
+  Deploy = 'deploy',
+  CanaryDeploy = 'canary-deploy',
+}
+
+export type DeployMode = DeployModes.CanaryDeploy | DeployModes.Deploy;

package/types/data.ts

@@ -0,0 +1,9 @@
+export type KeyValue<T = any> = Record<string, T>;
+
+export function unmarshal<T>(kv: KeyValue): T {
+  return kv as T;
+}
+
+export function marshal<T>(obj: T): KeyValue {
+  return obj as KeyValue;
+}

package/types/index.ts

@@ -0,0 +1,5 @@
+export * from './layout';
+export * from './menus';
+export * from './permission';
+export * from './data';
+export * from './application';

package/types/layout.ts

@@ -0,0 +1,7 @@
+export type LayoutMode = LayoutModes.Default | LayoutModes.Neat | LayoutModes.NeatPro;
+
+export enum LayoutModes {
+  Default = 'default',
+  Neat = 'neat',
+  NeatPro = 'neat2',
+}

package/types/menus.ts

@@ -0,0 +1,32 @@
+import { ResourceAction } from './permission';
+
+export interface Workspace {
+  name: string;
+  icon?: string | React.ReactNode;
+  label?: string;
+  rootRoute: string;
+}
+
+type Route = RegExp | string;
+
+export enum MenuTypes {
+  Workspace = 'Workspace',
+  ApplicationEnv = 'ApplicationEnv',
+  Project = 'Project',
+}
+
+export type MenuType = MenuTypes.Workspace | MenuTypes.ApplicationEnv | MenuTypes.Project;
+
+export interface Menu {
+  workspace: string;
+  type: MenuType;
+  catalog?: string;
+  name: string;
+  label: string;
+  to: string;
+  href?: string;
+  relatedRoute: Route[];
+  icon?: string | React.ReactNode;
+  permission?: ResourceAction;
+  active?: boolean;
+}

package/types/permission.ts

@@ -0,0 +1,4 @@
+export interface ResourceAction {
+  resource: string;
+  action: string;
+};

package/utils/_test/permission.test.ts

@@ -0,0 +1,26 @@
+import 'mocha';
+import { assert } from 'chai';
+
+import { equalArray } from '../common';
+import { resourceMatch, ResourceName } from '../permission';
+
+describe('test permission', () => {
+  it('test resourceMatch', () => {
+    assert.equal(resourceMatch(new ResourceName('project:*'), new ResourceName('project:*')), true);
+    assert.equal(
+      resourceMatch(
+        new ResourceName('projects:abc/application:bcd'),
+        new ResourceName('projects:*/application:*'),
+      ),
+      true,
+    );
+  });
+});
+
+describe('test util', () => {
+  it('test equal the array', () => {
+    assert.equal(equalArray(['a', 'b'], ['b', 'a']), true);
+    assert.equal(equalArray(['b'], ['b', 'a']), false);
+    assert.equal(equalArray(undefined, ['b', 'a']), false);
+  });
+});

package/utils/cache.ts

@@ -0,0 +1,9 @@
+import cookie from 'react-cookies';
+
+export function setData(key: string, value: string, expire?: Date) {
+  cookie.save(key, value, { expires: expire });
+}
+
+export function getData(key: string) {
+  return cookie.load(key);
+}

package/utils/common.ts

@@ -0,0 +1,314 @@
+import moment from 'moment';
+
+import type { AddonBaseStatus } from '@/api';
+
+type Navigator = {
+  language: string;
+};
+
+export function getLanguage() {
+  const navigator: Navigator = window.navigator;
+  const lang = navigator.language || 'en';
+  return localStorage.getItem('lang') || lang.split('-')[0];
+}
+
+export function isMock() {
+  return process.env.MOCK ? true : false;
+}
+
+export function getDomain(): { MOCK: string | undefined; APIBASE: string | undefined } {
+  const { MOCK, BASE_DOMAIN } = process.env;
+  return {
+    MOCK: MOCK || '',
+    APIBASE: BASE_DOMAIN || '',
+  };
+}
+
+export function isApplicationPath(pathname: string) {
+  return (pathname || '').startsWith('/applications');
+}
+export function isClustersPath(pathname: string) {
+  return (pathname || '').startsWith('/clusters');
+}
+export function isAddonsPath(pathname: string) {
+  return (pathname || '').startsWith('/addons');
+}
+export function isOperationPath(pathname: string) {
+  return (pathname || '').startsWith('/operation');
+}
+export function isModelPath(pathname: string) {
+  return (pathname || '').startsWith('/model');
+}
+
+export function isAPPStorePath(pathname: string) {
+  return (pathname || '').startsWith('/appstores');
+}
+
+export function isTargetURL(pathname: string) {
+  return (pathname || '').startsWith('/targets');
+}
+
+export function isEnvPath(pathname: string) {
+  return (pathname || '').startsWith('/envs');
+}
+
+export function isPipelinePath(pathname: string) {
+  if ((pathname || '').startsWith('/pipelines')) {
+    return true;
+  }
+  const re = new RegExp('^/projects/.*./pipelines.*');
+  return re.test(pathname);
+}
+
+export function isUsersPath(pathname: string) {
+  return (pathname || '').startsWith('/users');
+}
+export function isProjectPath(pathname: string) {
+  const re = new RegExp('^/projects/.*./pipelines.*');
+  if (re.test(pathname)) {
+    return false;
+  }
+  return (pathname || '').startsWith('/projects');
+}
+
+export function isRolesPath(pathname: string) {
+  return (pathname || '').startsWith('/roles');
+}
+
+export function isConfigPath(pathname: string) {
+  return (pathname || '').startsWith('/config');
+}
+
+export function isDefinitionsPath(pathname: string) {
+  return (pathname || '').startsWith('/definitions');
+}
+
+export const APPLICATION_PATH = 'applications';
+export const CLUSTERS_PATH = 'clusters';
+export const ADDONS_PATH = 'addons';
+export const WORKFLOWS_PATH = 'workflows';
+
+export function momentDate(time: undefined | string): string {
+  if (!time) {
+    return '';
+  }
+  return moment(time).format('YYYY/MM/DD HH:mm:ss');
+}
+
+export function momentShortDate(time: undefined | string): string {
+  if (!time) {
+    return '';
+  }
+  return moment(time).format('YYYY/MM/DD');
+}
+
+export function beautifyTime(time?: string) {
+  if (!time || time === '0001-01-01T00:00:00Z') {
+    return '';
+  }
+  const timestamp = moment(time).unix();
+  const now = new Date();
+  let mistiming = Math.round(now.getTime() / 1000) - timestamp;
+  const postfix = mistiming > 0 ? 'ago' : 'later';
+  mistiming = Math.abs(mistiming);
+  const arrr = ['years', 'months', 'weeks', 'days', 'hours', 'minutes', 'seconds'];
+  const arrn = [31536000, 2592000, 604800, 86400, 3600, 60, 1];
+
+  for (let i = 0; i < 7; i++) {
+    const inm = Math.floor(mistiming / arrn[i]);
+    if (inm != 0) {
+      return inm + ' ' + arrr[i] + ' ' + postfix;
+    }
+  }
+  return '';
+}
+
+export function timeDiff(start?: string, end?: string): string {
+  if (!start || start == '0001-01-01T00:00:00Z') {
+    return '-';
+  }
+  let endTime = moment(moment.now());
+  if (end && end != '0001-01-01T00:00:00Z') {
+    endTime = moment(end);
+  }
+  const seconds = endTime.diff(moment(start), 'seconds');
+  if (seconds > 60) {
+    return `${Math.floor(seconds / 60)}m ${seconds % 60}s`;
+  }
+  return `${seconds}s`;
+}
+
+export function beautifyBinarySize(value?: number) {
+  if (null == value || value == 0) {
+    return '0 Bytes';
+  }
+  const unitArr = ['Bytes', 'KB', 'MB', 'GB', 'TB', 'PB', 'EB', 'ZB', 'YB'];
+  let index = 0;
+  index = Math.floor(Math.log(value) / Math.log(1024));
+  const size = value / Math.pow(1024, index);
+  let sizeStr = '';
+  if (size % 1 === 0) {
+    sizeStr = size.toFixed(0);
+  } else {
+    sizeStr = size.toFixed(2);
+  }
+  return sizeStr + unitArr[index];
+}
+
+export const checkName = /^[a-z]([-a-z0-9]*[a-z0-9])?(\\.[a-z0-9]([-a-z0-9]*[a-z0-9])?)*$/;
+export const urlRegular = /(https|http|ftp|file):\/\/[-A-Za-z0-9+&@#/%?=~_|!:,.;]+[-A-Za-z0-9+&@#/%=~_|]/g;
+export const checkImageName = /^[^\u4e00-\u9fa5 ]{0,512}$/;
+
+export const formItemLayout = {
+  labelCol: {
+    fixedSpan: 6,
+  },
+  wrapperCol: {
+    span: 18,
+  },
+};
+
+export const ACKClusterStatus = [
+  {
+    key: 'initial',
+    value: '集群创建中',
+    color: '#98af88',
+  },
+  {
+    key: 'failed',
+    value: '集群创建失败',
+    color: '#ef1111',
+  },
+  {
+    key: 'running',
+    value: '集群运行中',
+    color: '#10e60e',
+  },
+  {
+    key: 'updating',
+    value: '集群升级中',
+    color: '#10e60e',
+  },
+  {
+    key: 'updating_failed',
+    value: '集群升级失败',
+    color: '#ef1111',
+  },
+  {
+    key: 'scaling',
+    value: '集群伸缩中',
+    color: '#10e60e',
+  },
+  {
+    key: 'stopped',
+    value: '集群已经停止运行',
+    color: '#3a3e3a',
+  },
+  {
+    key: 'deleting',
+    value: '集群删除中',
+    color: '#fd940f',
+  },
+  {
+    key: 'deleted',
+    value: '集群已经被删除',
+    color: '#3a3e3a',
+  },
+  {
+    key: 'delete_failed',
+    value: '集群删除失败',
+    color: '#ef1111',
+  },
+];
+
+export const replaceUrl = function (text: string) {
+  const re = /(http[s]?:\/\/([\w-]+.)+([:\d+])?(\/[\w-\.\/\?%&=]*)?)/gi;
+  const str = text.replace(re, function (a) {
+    return '<a href="' + a + '" target=_blank>' + a + '</a>';
+  });
+  return str;
+};
+
+export const checkUserPassword = /^(?=.*[0-9])(?=.*[a-zA-Z])([a-zA-Z0-9]{8,16})$/;
+
+export function isMatchBusinessCode(businessCode: number) {
+  const tokenExpiredList = [12002, 12010];
+  return tokenExpiredList.includes(businessCode);
+}
+
+export function equalArray(a?: string[], b?: string[]) {
+  if (a === undefined && b === undefined) {
+    return true;
+  }
+  if (b === undefined || a === undefined) {
+    return false;
+  }
+  if (a.length !== b.length) {
+    return false;
+  } else {
+    const sa = a.sort();
+    const sb = b.sort();
+    for (let i = 0; i < sa.length; i++) {
+      if (sa[i] !== sb[i]) {
+        return false;
+      }
+    }
+    return true;
+  }
+}
+
+export function intersectionArray(a?: string[], b?: string[]): string[] | undefined {
+  if (a == undefined || b == undefined) {
+    return undefined;
+  }
+  return a.filter((v) => b.indexOf(v) > -1);
+}
+
+export function checkEnabledAddon(addonName: string, enabledAddons?: AddonBaseStatus[]) {
+  if (!enabledAddons) {
+    return false;
+  }
+  const addonNames = enabledAddons.map((addon) => {
+    return addon.name;
+  });
+  if (addonNames.includes(addonName)) {
+    return true;
+  }
+  return false;
+}
+
+export function convertAny(data?: any): string {
+  if (!data) {
+    return '';
+  }
+  switch (typeof data) {
+    case 'string':
+      return data;
+    case 'boolean':
+      return data === true ? 'true' : 'false';
+    case 'object':
+      return JSON.stringify(data);
+    case 'number':
+      return data.toString();
+    default:
+      return '';
+  }
+}
+
+export function showAlias(name: string, alias?: string): string;
+export function showAlias(item: { name: string; alias?: string }): string;
+export function showAlias(item: { name: string; alias?: string } | string, alias?: string) {
+  if (typeof item === 'string') {
+    if (alias) {
+      return `${item}(${alias})`;
+    }
+    return item;
+  }
+  if (!item) {
+    return '';
+  }
+  if (item.alias) {
+    return `${item.name}(${item.alias})`;
+  }
+  return item.name;
+}

package/utils/errors.ts

@@ -0,0 +1,31 @@
+/*
+Copyright 2021 The KubeVela Authors.
+
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
+
+  http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.
+*/
+
+import { isMatchBusinessCode } from './common';
+
+export interface APIError {
+  BusinessCode: number;
+  Message: string;
+}
+
+export function handleError(err: APIError) {
+  // TODO: Handle errors based on businessCode
+  const isShowErrFlag = isMatchBusinessCode(err.BusinessCode);
+  if (err && !isShowErrFlag) {
+    // TODO: Replace with proper toast notification
+    console.error(err.Message);
+  }
+}

package/utils/i18n.tsx

@@ -0,0 +1,28 @@
+import i18n from 'i18next';
+import { initReactI18next } from 'react-i18next';
+
+import En from './locals/En/en.json';
+import Zh from './locals/Zh/zh.json';
+import { getLanguage } from './utils/common';
+
+const resources = {
+  en: {
+    translation: En,
+  },
+  zh: {
+    translation: Zh,
+  },
+};
+
+const currentLanguage = getLanguage();
+i18n
+  .use(initReactI18next) // passes i18n down to react-i18next
+  .init({
+    resources,
+    lng: currentLanguage,
+    keySeparator: false, // we do not use keys in form messages.welcome
+    interpolation: {
+      escapeValue: false, // react already safes from xss
+    },
+  });
+export default i18n;

package/utils/icon.tsx

@@ -0,0 +1,42 @@
+import React from 'react';
+
+const nameUpper = (name: string) => {
+  return name
+    .split('-')
+    .map((sep) => {
+      if (sep.length > 0) {
+        return sep.toUpperCase()[0];
+      }
+      return sep;
+    })
+    .toString()
+    .replace(',', '');
+};
+
+export const renderIcon = (name: string, icon?: string, size?: string) => {
+  console.log(icon)
+  if (icon!==""  && icon!=="null" && icon!==undefined) {
+    if (!icon.startsWith("/")){
+      icon = "/"+icon
+    }
+    return <img style={{width: size??"60px", height: size??"60px" }} src={icon} />;
+  } else {
+    return (
+      <div
+        style={{
+          display: 'inline-block',
+          verticalAlign: 'middle',
+          padding: `2px 4px`,
+          width: '60px',
+          height: '60px',
+          borderRadius: '50%',
+          backgroundColor: '#fff',
+          textAlign: 'center',
+          lineHeight: '60px',
+        }}
+      >
+        <span style={{ color: '#1b58f4', fontSize: `2em` }}>{nameUpper(name)}</span>
+      </div>
+    );
+  }
+}