enhancement(Edit namespace skeleton): Add edit namespace skeleton (#86)

src/main/webapp/i18next-parser.config.js

@@ -0,0 +1,25 @@
+module.exports = {
+  createOldCatalogs: true, // Save the \_old files
+
+  indentation: 4, // Indentation of the catalog files
+
+  keepRemoved: false, // Keep keys from the catalog that are no longer in code
+
+  lexers: {
+    js: ["JsxLexer"],
+    ts: ["JsxLexer"],
+    jsx: ["JsxLexer"],
+    tsx: ["JsxLexer"],
+
+    default: ["JsxLexer"],
+  },
+
+  locales: ["es"],
+
+  output: "public/locales/$LOCALE/$NAMESPACE.json",
+
+  input: ["src/**/*.{js,jsx,ts,tsx}"],
+
+  sort: true,
+  verbose: true,
+};

src/main/webapp/package.json

@@ -17,9 +17,12 @@
     "@types/react-dom": "^17.0.0",
     "axios": "^0.24.0",
     "formik": "^2.2.9",
+    "i18next": "^21.6.3",
+    "i18next-http-backend": "^1.3.1",
     "moment": "^2.29.1",
     "react": "^17.0.2",
     "react-dom": "^17.0.2",
+    "react-i18next": "^11.15.1",
     "react-moment": "^1.1.1",
     "react-query": "^3.33.5",
     "react-redux": "^7.2.6",
@@ -37,6 +40,7 @@
     "analyze": "source-map-explorer 'build/static/js/*.js'",
     "cypress:open": "cypress open",
     "cypress:run": "cypress run",
+    "extract": "i18next --config i18next-parser.config.js",
     "start": "react-scripts -r @cypress/instrument-cra start",
     "build": "react-scripts build",
     "build:instrumentation": "CYPRESS_INSTRUMENT_PRODUCTION=true react-scripts -r @cypress/instrument-cra build",
@@ -78,6 +82,7 @@
     "enzyme": "^3.11.0",
     "http-proxy-middleware": "^2.0.1",
     "husky": "^7.0.4",
+    "i18next-parser": "^5.3.0",
     "jest-enzyme": "^7.1.2",
     "lint-staged": "^11.2.6",
     "node-sass": "^6.0.1",

src/main/webapp/public/locales/es/translation.json

@@ -0,0 +1,12 @@
+{
+    "actions": {
+        "cancel": "Cancelar",
+        "delete": "Eliminar"
+    },
+    "modal": {
+        "confirm-delete": {
+            "body": "¿Estas seguro de querer eliminar este(a) <1>{{type}}</1>? Esta acción eliminará <3>{{name}}</3> permanentemente.",
+            "title": "Eliminar {{what}}"
+        }
+    }
+}

src/main/webapp/src/Paths.ts

@@ -13,5 +13,8 @@ export enum Paths {
   notFound = "/not-found",
 
   namespaces = "/namespaces",
-  namespaces_create = "/namespaces/~new",
+  namespaces_edit = "/namespaces/:namespaceId",
+  namespaces_edit_companies = "/namespaces/:namespaceId/commpanies",
+  namespaces_edit_sunat = "/namespaces/:namespaceId/sunat",
+  namespaces_edit_keys = "/namespaces/:namespaceId/keys",
 }

src/main/webapp/src/i18n.ts

@@ -0,0 +1,20 @@
+import i18n from "i18next";
+import { initReactI18next } from "react-i18next";
+import Backend from "i18next-http-backend";
+
+i18n
+  .use(Backend)
+  .use(initReactI18next)
+  .init({
+    lng: "es",
+    fallbackLng: "es",
+    debug: false,
+
+    interpolation: {
+      escapeValue: false,
+    },
+
+    returnEmptyString: false,
+  });
+
+export default i18n;

src/main/webapp/src/index.tsx

@@ -12,6 +12,9 @@ import configureStore from "./store";
 
 import { PollingContextProvider } from "shared/context";
 
+import i18n from "./i18n";
+i18n.init();
+
 const queryCache = new QueryCache();
 const queryClient = new QueryClient({
   queryCache,

src/main/webapp/src/pages/namespaces/edit-namespace/companies/companies.tsx

@@ -0,0 +1,5 @@
+import React from "react";
+
+export const Companies: React.FC = () => {
+  return <>Companies</>;
+};

src/main/webapp/src/pages/namespaces/edit-namespace/companies/index.ts

@@ -0,0 +1 @@
+export { Companies as default } from "./companies";

src/main/webapp/src/pages/namespaces/edit-namespace/edit-namespace.tsx

@@ -0,0 +1,147 @@
+import React, { lazy, Suspense } from "react";
+import { Route, Switch, useHistory, useParams } from "react-router-dom";
+import { useTranslation, Trans } from "react-i18next";
+import { ButtonVariant, PageSection } from "@patternfly/react-core";
+import {
+  useConfirmationContext,
+  SimplePlaceholder,
+} from "@project-openubl/lib-ui";
+
+import { useDispatch } from "react-redux";
+import { alertActions } from "store/alert";
+
+import { PageHeader } from "shared/components";
+
+import {
+  useDeleteNamespaceMutation,
+  useNamespaceQuery,
+} from "queries/namespaces";
+
+import { formatPath, Paths } from "Paths";
+import { getAxiosErrorMessage } from "utils/modelUtils";
+
+const Overview = lazy(() => import("./overview"));
+const Sunat = lazy(() => import("./sunat"));
+const Keys = lazy(() => import("./keys"));
+const Companies = lazy(() => import("./companies"));
+
+export interface INamespaceParams {
+  namespaceId: string;
+}
+
+export const EditNamespace: React.FC = () => {
+  const { t } = useTranslation();
+
+  const dispatch = useDispatch();
+  const history = useHistory();
+
+  const routeParams = useParams<INamespaceParams>();
+  const confirmationModal = useConfirmationContext();
+
+  const namespace = useNamespaceQuery(routeParams.namespaceId);
+  const deleteNamespace = useDeleteNamespaceMutation();
+
+  const onDeleteNs = () => {
+    if (!namespace.data) {
+      console.log("Can not delete null");
+      return;
+    }
+
+    confirmationModal.open({
+      title: t("modal.confirm-delete.title", {
+        what: "namespace",
+      }),
+      titleIconVariant: "warning",
+      message: (
+        <Trans
+          i18nKey="modal.confirm-delete.body"
+          values={{ type: "namespace", name: namespace.data.name }}
+        >
+          ¿Estas seguro de querer eliminar este(a) <b>type</b>? Esta acción
+          eliminará <b>name</b> permanentemente.
+        </Trans>
+      ),
+      confirmBtnVariant: ButtonVariant.danger,
+      confirmBtnLabel: t("actions.delete"),
+      cancelBtnLabel: t("actions.cancel"),
+      onConfirm: () => {
+        confirmationModal.enableProcessing();
+        deleteNamespace
+          .mutateAsync(namespace.data)
+          .catch((error) => {
+            dispatch(
+              alertActions.addAlert(
+                "danger",
+                "Error",
+                getAxiosErrorMessage(error)
+              )
+            );
+          })
+          .finally(() => {
+            confirmationModal.close();
+            history.push(Paths.namespaces);
+          });
+      },
+    });
+  };
+
+  return (
+    <>
+      <PageSection variant="light" type="breadcrumb">
+        <PageHeader
+          title={namespace.data?.name || ""}
+          breadcrumbs={[
+            {
+              title: "Namespaces",
+              path: Paths.namespaces,
+            },
+            {
+              title: "editar",
+              path: "",
+            },
+          ]}
+          menuActions={[{ label: "Eliminar", callback: onDeleteNs }]}
+          navItems={[
+            {
+              title: "General",
+              path: formatPath(Paths.namespaces_edit, {
+                namespaceId: namespace.data?.id,
+              }),
+            },
+            {
+              title: "SUNAT",
+              path: formatPath(Paths.namespaces_edit_sunat, {
+                namespaceId: namespace.data?.id,
+              }),
+            },
+            {
+              title: "Certificados",
+              path: formatPath(Paths.namespaces_edit_keys, {
+                namespaceId: namespace.data?.id,
+              }),
+            },
+            {
+              title: "Empresas",
+              path: formatPath(Paths.namespaces_edit_companies, {
+                namespaceId: namespace.data?.id,
+              }),
+            },
+          ]}
+        />
+      </PageSection>
+      <PageSection>
+        <Suspense fallback={<SimplePlaceholder />}>
+          <Switch>
+            <Route path={Paths.namespaces_edit} component={Overview} exact />
+            <Route path={Paths.namespaces_edit_sunat} component={Sunat} />
+            <Route path={Paths.namespaces_edit_keys} component={Keys} />
+            <Route
+              path={Paths.namespaces_edit_companies}
+              component={Companies}
+            />
+          </Switch>
+        </Suspense>
+      </PageSection>
+    </>
+  );
+};

src/main/webapp/src/pages/namespaces/edit-namespace/index.ts

@@ -0,0 +1 @@
+export { EditNamespace as default } from "./edit-namespace";

src/main/webapp/src/pages/namespaces/edit-namespace/keys/index.ts

@@ -0,0 +1 @@
+export { Keys as default } from "./keys";

src/main/webapp/src/pages/namespaces/edit-namespace/keys/keys.tsx

@@ -0,0 +1,5 @@
+import React from "react";
+
+export const Keys: React.FC = () => {
+  return <>Keys</>;
+};

src/main/webapp/src/pages/namespaces/edit-namespace/overview/index.ts

@@ -0,0 +1 @@
+export { Overview as default } from "./overview";

src/main/webapp/src/pages/namespaces/edit-namespace/overview/overview.tsx

@@ -0,0 +1,5 @@
+import React from "react";
+
+export const Overview: React.FC = () => {
+  return <>overview</>;
+};

src/main/webapp/src/pages/namespaces/edit-namespace/sunat/index.ts

@@ -0,0 +1 @@
+export { Sunat as default } from "./sunat";

src/main/webapp/src/pages/namespaces/edit-namespace/sunat/sunat.tsx

@@ -0,0 +1,5 @@
+import React from "react";
+
+export const Sunat: React.FC = () => {
+  return <>Sunat</>;
+};

src/main/webapp/src/pages/namespaces/namespaces-list/namespaces-list.tsx

@@ -1,4 +1,5 @@
 import React, { useState } from "react";
+import { useTranslation, Trans } from "react-i18next";
 
 import {
   useTableControls,
@@ -41,6 +42,8 @@ import {
 
 import { Namespace } from "api/models";
 import { getAxiosErrorMessage } from "utils/modelUtils";
+import { Link } from "react-router-dom";
+import { formatPath, Paths } from "Paths";
 
 const ROW_FIELD = "row_field";
 const getRow = (rowData: IRowData): Namespace => {
@@ -52,7 +55,13 @@ const itemsToRow = (items: Namespace[]) => {
     [ROW_FIELD]: item,
     cells: [
       {
-        title: item.name,
+        title: (
+          <Link
+            to={formatPath(Paths.namespaces_edit, { namespaceId: item.id })}
+          >
+            {item.name}
+          </Link>
+        ),
       },
       {
         title: item.description,
@@ -81,6 +90,8 @@ export const filterByText = (filterText: string, item: Namespace) => {
 };
 
 export const NamespacesList: React.FC = () => {
+  const { t } = useTranslation();
+
   const dispatch = useDispatch();
   const confirmationModal = useConfirmationContext();
 
@@ -128,13 +139,18 @@ export const NamespacesList: React.FC = () => {
         const row: Namespace = getRow(rowData);
 
         confirmationModal.open({
-          title: `Eliminar ${row.name}`,
+          title: t("modal.confirm-delete.title", {
+            what: "namespace",
+          }),
           titleIconVariant: "warning",
           message: (
-            <span>
-              ¿Estas seguro de querer eliminar este namespace? Esta acción
-              eliminará el namespace <b>{row.name}</b> permanentemente.`
-            </span>
+            <Trans
+              i18nKey="modal.confirm-delete.body"
+              values={{ type: "namespace", name: row.name }}
+            >
+              ¿Estas seguro de querer eliminar este(a) <b>type</b>? Esta acción
+              eliminará <b>name</b> permanentemente.
+            </Trans>
           ),
           confirmBtnVariant: ButtonVariant.danger,
           confirmBtnLabel: "Eliminar",

src/main/webapp/src/pages/namespaces/namespaces.tsx

@@ -5,13 +5,15 @@ import { SimplePlaceholder } from "@project-openubl/lib-ui";
 import { Paths } from "Paths";
 
 const NamespacesList = lazy(() => import("./namespaces-list"));
+const EditNamespace = lazy(() => import("./edit-namespace"));
 
 export const Namespaces: React.FC = () => {
   return (
     <>
       <Suspense fallback={<SimplePlaceholder />}>
         <Switch>
           <Route path={Paths.namespaces} component={NamespacesList} exact />
+          <Route path={Paths.namespaces_edit} component={EditNamespace} />
         </Switch>
       </Suspense>
     </>

src/main/webapp/src/queries/namespaces.ts

@@ -18,6 +18,22 @@ import { useCallback } from "react";
 
 const resource = new CoreClusterResource(CoreClusterResourceKind.Namespace);
 
+export const useNamespaceQuery = (
+  id: string | null
+): UseQueryResult<Namespace, ApiClientError> => {
+  const client = useUblhubClient();
+  const result = useQuery<Namespace, ApiClientError>({
+    queryKey: ["namespace", id],
+    queryFn: async (): Promise<Namespace> => {
+      return (await client.get<Namespace>(resource, id || "")).data;
+    },
+    enabled: !!id,
+    retry: false,
+    refetchOnMount: true,
+  });
+  return result;
+};
+
 export const useNamespacesQuery = (): UseQueryResult<
   Namespace[],
   ApiClientError