Skip to content

Commit

Permalink
JNG-4647 customizable elements (#32)
Browse files Browse the repository at this point in the history 
* JNG-4647: customizable elements

* JNG-4647: fix docs

* JNG-4647: fix template
  • Loading branch information
@noherczeg
noherczeg authored Mar 21, 2023
1 parent 2deaa03 commit 7875c83
Show file tree
Hide file tree
Showing 39 changed files with 1,185 additions and 7 deletions.
101 changes: 101 additions & 0 deletions docs/pages/01_ui_react.adoc
View file
Original file line number Diff line number Diff line change
Expand Up @@ -208,3 +208,104 @@ As explained in the comments, **the provisioning of service parameters is mandat

The best way to find out what services requires what parameters, you only need to search for the `useErrorHandler` hook's
usage, and you should be able to see how does the corresponding `filter` look like.

=== Implementing a custom visual element

Every Visual element implementation can be replaced by a custom one, given in the model the `customImplementation`
flag has been set for such element.

Types of elements included:

- Boxes / Cards (flex)
- Inputs
- Labels
- etc...

Once the flag has been set, a corresponding interface and `ComponentProxy` will be generated into the Page where the
visual element resides in.

Example: If we toggle the `customImplementation` flag for a TextInput element called `yayy` on the create page of
`CustomStuffz`, The following will be generated:

*PageCreateStuffzForm.tsx:*
[source,typescriptjsx]
----
import { FC } from 'react';
import { OBJECTCLASS } from '@pandino/pandino-api';
import { SomethingTransfer, SomethingTransferStored } from '../../../../../generated/data-api';
import { CUSTOM_VISUAL_ELEMENT_INTERFACE_KEY, CustomFormVisualElementProps } from '../../../../../custom';
export const COMPONENT_ACTOR_CREATE_YAYY = 'ComponentActorCreateYayy';
export interface ComponentActorCreateYayy extends FC<CustomFormVisualElementProps<SomethingTransfer>> {}
export interface PageCreateStuffzFormProps {
successCallback: (result: SomethingTransferStored) => void;
cancel: () => void;
}
export function PageCreateStuffzForm({ successCallback, cancel }: PageCreateStuffzFormProps) {
// ...
return (
<>
{/* ... */}
<ComponentProxy
filter={`(&(${OBJECTCLASS}=${CUSTOM_VISUAL_ELEMENT_INTERFACE_KEY})(component=${COMPONENT_ACTOR_CREATE_YAYY}))`}
data={data}
validation={validation}
editMode={editMode}
storeDiff={storeDiff}
payloadDiff={payloadDiff}
>
<TextField
name="yayy"
{/* ... */}
/>
</ComponentProxy>
{/* ... */}
</>
);
}
----

As we can see the `TextField` component has been wrapped in a `ComponentProxy` component which will search for an
implementation, and if not found, loads the child.

If we would like to re-implement this component, we will need to use the following (as per the filter criteria):

- `CUSTOM_VISUAL_ELEMENT_INTERFACE_KEY`: which is the generic interface for custom components
- `ComponentActorCreateYayy`: which is the non-generic / resolved interface for our component
- `COMPONENT_ACTOR_CREATE_YAYY`: which is a unique string representing the corresponding interface above


*src/custom/application-customizer.tsx:*
[source,typescriptjsx]
----
import { useMemo } from 'react';
import type { BundleContext } from '@pandino/pandino-api';
import { ComponentActorCreateYayy, COMPONENT_ACTOR_CREATE_YAYY } from '../pages/component_actor/stuffz/table/actions/PageCreateStuffzForm';
import { ApplicationCustomizer } from './interfaces';
import { CUSTOM_VISUAL_ELEMENT_INTERFACE_KEY } from './custom-element-types';
export class DefaultApplicationCustomizer implements ApplicationCustomizer {
async customize(context: BundleContext): Promise<void> {
context.registerService(CUSTOM_VISUAL_ELEMENT_INTERFACE_KEY, OptimisticImplementationForYayy, {
component: COMPONENT_ACTOR_CREATE_YAYY,
})
}
}
const OptimisticImplementationForYayy: ComponentActorCreateYayy = ({ data, storeDiff }) => {
const yayy = useMemo<string | undefined | null>(() => data.yayy, [data.yayy]);
return (
<div>
<label htmlFor="custom-yayy">Our own Yayy:</label>
<input type="text" id="custom-yayy" maxLength={12} value={yayy as string} onChange={(event) => storeDiff('yayy', event.target.value)} />
</div>
);
};
----

> Of course our custom components can be placed / imported from anywhere in the source code. We just simplified it in
the use-case above.
205 changes: 205 additions & 0 deletions judo-ui-react-itest/ComponentOverrideTest/component_override_test__component_actor/pom.xml
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,205 @@
<project xmlns="http://maven.apache.org/POM/4.0.0" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
xsi:schemaLocation="http://maven.apache.org/POM/4.0.0 https://maven.apache.org/xsd/maven-4.0.0.xsd">
<modelVersion>4.0.0</modelVersion>

<parent>
<groupId>hu.blackbelt.judo.generator</groupId>
<artifactId>componentoverridetest-frontend-react</artifactId>
<version>${revision}</version>
</parent>
<artifactId>componentoverridetest-frontend-react-component_override_test__component_actor</artifactId>
<name>JUDO UI React Frontend Generator ITest - ComponentOverrideTest - ComponentActor</name>
<description>ComponentOverrideTest - ComponentActor react frontend</description>

<packaging>bundle</packaging>

<properties>
<actor>component_override_test__component_actor</actor>
<actor-shortname>componentactor</actor-shortname>
<actor-name>ComponentActor</actor-name>
<actor-fq-name>ComponentOverrideTest::ComponentActor</actor-fq-name>

<ui-model>${project.parent.basedir}/model/${model-name}-ui.model</ui-model>

<node-install-dir>${project.parent.parent.parent.basedir}/.nodejs</node-install-dir>
<generation-target>${basedir}/target/frontend-react</generation-target>
</properties>

<build>
<plugins>
<plugin>
<groupId>org.apache.felix</groupId>
<artifactId>maven-bundle-plugin</artifactId>
<version>5.1.8</version>
<extensions>true</extensions>
<configuration>
<instructions>
<Web-ContextPath>/${model-name}/${actor}</Web-ContextPath>
<Include-Resource>
/=${generation-target}/dist
</Include-Resource>
</instructions>
</configuration>
</plugin>

<plugin>
<groupId>hu.blackbelt.judo.meta</groupId>
<artifactId>judo-ui-generator-maven-plugin</artifactId>
<version>${judo-meta-ui-version}</version>
<executions>
<execution>
<id>execute-ui-services-generation</id>
<phase>generate-sources</phase>
<goals>
<goal>generate</goal>
</goals>
<configuration>
<uris>
<uri>mvn:hu.blackbelt.judo.generator:judo-ui-typescript-rest-api:${judo-ui-typescript-rest-version}</uri>
<uri>mvn:hu.blackbelt.judo.generator:judo-ui-typescript-rest-service:${judo-ui-typescript-rest-version}</uri>
<uri>mvn:hu.blackbelt.judo.generator:judo-ui-typescript-rest-axios:${judo-ui-typescript-rest-version}</uri>
</uris>
<type>ui-typescript-rest</type>
<applications>
${actor-fq-name}
</applications>
<ui>${ui-model}</ui>
<destination>${generation-target}/src/generated</destination>
</configuration>
</execution>
<execution>
<id>execute-ui-generation</id>
<phase>generate-sources</phase>
<goals>
<goal>generate</goal>
</goals>
<configuration>
<uris>
<uri>mvn:hu.blackbelt.judo.generator:judo-ui-react:${revision}</uri>
</uris>
<type>ui-react</type>
<applications>
${actor-fq-name}
</applications>
<ui>${ui-model}</ui>
<destination>${generation-target}</destination>
<templateParameters>
<appModelName>${model-name}</appModelName>
<appScope>${appScope}</appScope>
<appVersion>${appVersion}</appVersion>

<tablePageLimit>10</tablePageLimit>
</templateParameters>
</configuration>
</execution>
</executions>
<dependencies>
<dependency>
<groupId>hu.blackbelt.judo.generator</groupId>
<artifactId>judo-ui-typescript-rest-commons</artifactId>
<version>${judo-ui-typescript-rest-version}</version>
</dependency>
<dependency>
<groupId>hu.blackbelt.judo.generator</groupId>
<artifactId>judo-ui-typescript-rest-api</artifactId>
<version>${judo-ui-typescript-rest-version}</version>
</dependency>
<dependency>
<groupId>hu.blackbelt.judo.generator</groupId>
<artifactId>judo-ui-typescript-rest-service</artifactId>
<version>${judo-ui-typescript-rest-version}</version>
</dependency>
<dependency>
<groupId>hu.blackbelt.judo.generator</groupId>
<artifactId>judo-ui-typescript-rest-axios</artifactId>
<version>${judo-ui-typescript-rest-version}</version>
</dependency>
<dependency>
<groupId>hu.blackbelt.judo.generator</groupId>
<artifactId>judo-ui-react</artifactId>
<version>${revision}</version>
</dependency>
</dependencies>
</plugin>

<plugin>
<groupId>org.apache.maven.plugins</groupId>
<artifactId>maven-dependency-plugin</artifactId>
<version>3.3.0</version>
<executions>
<execution>
<id>external-packages</id>
<phase>generate-sources</phase>
<goals>
<goal>unpack</goal>
</goals>
<configuration>
<artifactItems>
<artifactItem>
<groupId>hu.blackbelt.judo.generator</groupId>
<artifactId>judo-ui-react-external-packages</artifactId>
<version>${revision}</version>
<type>jar</type>
<overWrite>true</overWrite>
</artifactItem>
</artifactItems>
<includes>externals/**</includes>
<outputDirectory>${generation-target}</outputDirectory>
</configuration>
</execution>
</executions>
<dependencies>
<dependency>
<groupId>hu.blackbelt.judo.generator</groupId>
<artifactId>judo-ui-react-external-packages</artifactId>
<version>${revision}</version>
</dependency>
</dependencies>
</plugin>

<plugin>
<groupId>com.github.eirslett</groupId>
<artifactId>frontend-maven-plugin</artifactId>
<version>${frontend-maven-plugin-version}</version>
<executions>
<execution>
<id>pnpm install</id>
<goals>
<goal>pnpm</goal>
</goals>
<phase>generate-sources</phase>
<configuration>
<arguments>install</arguments>
</configuration>
</execution>

<execution>
<id>format code</id>
<goals>
<goal>pnpm</goal>
</goals>
<phase>generate-sources</phase>
<configuration>
<arguments>run format</arguments>
</configuration>
</execution>

<execution>
<id>build</id>
<goals>
<goal>pnpm</goal>
</goals>
<phase>generate-sources</phase>
<configuration>
<arguments>run build:ci</arguments>
</configuration>
</execution>
</executions>
<configuration>
<installDirectory>${node-install-dir}</installDirectory>
<workingDirectory>${generation-target}</workingDirectory>
</configuration>
</plugin>
</plugins>
</build>
</project>
Loading

0 comments on commit 7875c83

Please sign in to comment.