Adding Logo

.env

@@ -1,5 +1,6 @@
 ENABLE_NEW_JSX_TRANSFORM="true"
 FAST_REFRESH="true"
+LOGO_MUST_BE_VISIBLE="true"
 
 CLOUD_IDENTIFIER=gcp-us
 APPLICATION_ID=cldoqtyfj009nzk01wfj8r99o

.github/workflows/build.yml

@@ -21,7 +21,7 @@ jobs:
           node-version: ${{ matrix.node-version }}
       - name: Get yarn cache
         id: yarn-cache
-        run: echo "dir=$(yarn cache dir)" >> $GITHUB_OUTPUT
+        run: echo "::set-output name=dir::$(yarn cache dir)"
       - uses: actions/cache@v4
         with:
           path: ${{ steps.yarn-cache.outputs.dir }}
@@ -32,9 +32,5 @@ jobs:
         run: yarn install --pure-lockfile
       - name: Test
         run: yarn run test
-
-      - name: Load custom application config
-        run: node node_modules/@commercetools-frontend/application-config/scripts/load-js-module.js ${{ github.workspace }}/custom-application-config.js
-
       - name: Build
         run: yarn run build

custom-application-config.js

@@ -1,4 +1,5 @@
-import { PERMISSIONS, entryPointUriPath } from './src/constants';
+// eslint-disable-next-line import/extensions
+import { PERMISSIONS, entryPointUriPath } from './src/constants.ts';
 
 /**
  * @type {import('@commercetools-frontend/application-config').ConfigOptions}
@@ -36,6 +37,9 @@ const config = {
     labelAllLocales: [],
     permissions: [PERMISSIONS.View],
   },
+  additionalEnv: {
+    logoMustBeVisible: '${env:LOGO_MUST_BE_VISIBLE}',
+  },
   submenuLinks: [
     // {
     //   defaultLabel: 'Custom Objects Editor List',

src/components/container-list/container-list.tsx

@@ -1,4 +1,5 @@
 import React, { lazy, ReactNode } from 'react';
+import { useApplicationContext } from '@commercetools-frontend/application-shell-connectors';
 import { Link, Switch, useHistory, useRouteMatch } from 'react-router-dom';
 import { SuspendedRoute } from '@commercetools-frontend/application-shell';
 import { FormattedMessage, useIntl } from 'react-intl';
@@ -25,6 +26,7 @@ import LoadingSpinner from '@commercetools-uikit/loading-spinner';
 import { CONTAINER, SORT_OPTIONS } from '../../constants';
 import { getErrorMessage } from '../../helpers';
 import { useCustomObjectsFetcher } from '../../hooks/use-custom-object-connector/use-custom-object-connector';
+import { Logo } from '../../images/logo';
 import { FIELDS } from './constants';
 import messages from './messages';
 
@@ -66,6 +68,12 @@ const ContainerList = () => {
     order: 'asc',
   });
 
+  const { environment } = useApplicationContext<{
+    logoMustBeVisible?: unknown;
+  }>();
+  const logoMustBeVisible =
+    String(environment.logoMustBeVisible).toLowerCase() === 'true';
+
   const { customObjectsPaginatedResult, loading, error, refetch } =
     useCustomObjectsFetcher({
       container: CONTAINER,
@@ -185,6 +193,9 @@ const ContainerList = () => {
           />
         )
       )}
+      <Spacings.Stack scale="m" alignItems="center">
+        {logoMustBeVisible && <Logo />}
+      </Spacings.Stack>
       <Switch>
         <SuspendedRoute path={`${match.path}/new`}>
           <CreateContainer

src/components/custom-objects-list/custom-objects-list.tsx

@@ -20,6 +20,7 @@ import { SuspendedRoute } from '@commercetools-frontend/application-shell';
 import SecondaryButton from '@commercetools-uikit/secondary-button';
 import SelectInput from '@commercetools-uikit/select-input';
 import { Link, Switch, useHistory, useRouteMatch } from 'react-router-dom';
+import { useApplicationContext } from '@commercetools-frontend/application-shell-connectors';
 import DataTable, { TColumn } from '@commercetools-uikit/data-table';
 import {
   usePaginationState,
@@ -34,13 +35,14 @@ import { useContainerContext } from '../../context/container-context';
 import { TCustomObject, TQuery } from '../../types/generated/ctp';
 import { getErrorMessage } from '../../helpers';
 import { AttributeValue } from '../../constants';
-
+import { Logo } from '../../images/logo';
 import { useCustomObjectsFetcher } from '../../hooks/use-custom-object-connector/use-custom-object-connector';
 import { columnDefinitions, COLUMN_KEYS } from './column-definitions';
 import messages from './messages';
 import styles from './custom-objects-list.module.css';
 import TextFilter from './text-filter';
 
+
 const CreateCustomObject = lazy(() => import('../create-custom-object'));
 const CustomObjectDetails = lazy(() => import('../custom-object-details'));
 
@@ -50,6 +52,12 @@ const CustomObjectsList = () => {
   const { push } = useHistory();
   const { hasContainers, containers } = useContainerContext();
 
+  const { environment } = useApplicationContext<{
+    logoMustBeVisible?: unknown;
+  }>();
+  const logoMustBeVisible =
+    String(environment.logoMustBeVisible).toLowerCase() === 'true';
+
   const [key, setKey] = useState('');
   const { page, perPage } = usePaginationState();
 
@@ -340,7 +348,11 @@ const CustomObjectsList = () => {
             />
           )
         )}
+
       </SpacingsStack>
+      <Spacings.Stack scale="m" alignItems="center">
+        {logoMustBeVisible && <Logo />}
+      </Spacings.Stack>
       <Switch>
         <SuspendedRoute path={`${match.path}/new`}>
           <CreateCustomObject

src/images/logo.tsx

@@ -0,0 +1,37 @@
+export const Logo = () => {
+    return (
+      <svg
+        xmlns="http://www.w3.org/2000/svg"
+        viewBox="0 0 2401 1801"
+        width="80"
+        height="80"
+        fillRule="evenodd"
+        clipRule="evenodd"
+        imageRendering="optimizeQuality"
+        shapeRendering="geometricPrecision"
+        textRendering="geometricPrecision"
+      >
+        <path
+          fill="#b42573"
+          d="M1178.5 363.5c169.82-2.716 311.65 58.284 425.5 183 108.52 128.981 150.19 277.315 125 445q-41.085 216.57-217.5 346.5c-123.16 84.9-258.82 115.24-407 91-146.692-28.87-262.858-104.04-348.5-225.5q-136.072-208.44-73-450Q746.277 542.274 936.5 432c75.42-41.645 156.09-64.479 242-68.5"
+          opacity="0.998"
+        ></path>
+        <path
+          fill="#f2f2f3"
+          d="M1383.5 1092.5h-12v-81c54.49-2.48 93.65-28.148 117.5-77 20.43-51.44 12.76-98.107-23-140-36.92-36.52-80.75-48.687-131.5-36.5-43.43 14.433-72.6 43.266-87.5 86.5a767 767 0 0 0-5 24c-.5 60.666-.67 121.332-.5 182-1 37.16-1.33 74.5-1 112h-82c.33-95.5 0-190.835-1-286q-7.275-85.31-87-116.5c-63.13-17.292-113.634.541-151.5 53.5q-38.485 67.605-1 136 38.965 59.616 110.5 62v81h-9c-73.6-5.37-130.1-39.03-169.5-101q-61.42-110.354 1-220 62.957-96.062 178.5-100c70.06 1.367 126.73 29.367 170 84 55.56-68.254 126.89-94.754 214-79.5q118.125 30.119 157.5 145.5c21.53 83.745 1.69 155.912-59.5 216.5-36.38 32.64-79.05 50.8-128 54.5"
+        ></path>
+        <path
+          fill="#c2668f"
+          d="M1028.5 1011.5c1 27.16 1.33 54.49 1 82-3.54.31-6.88-.02-10-1h9z"
+        ></path>
+        <path
+          fill="#dcb6c6"
+          d="M1371.5 1011.5v81h12c-4.13.98-8.47 1.32-13 1-.33-27.51 0-54.84 1-82"
+        ></path>
+        <path
+          fill="#d49fb5"
+          d="M1157.5 876.5c1 95.165 1.33 190.5 1 286h82c-.33-37.5 0-74.84 1-112v113h-84z"
+        ></path>
+      </svg>
+    );
+  };

src/routes.tsx

@@ -6,13 +6,11 @@ import {
 import { FormattedMessage } from 'react-intl';
 import { useIsAuthorized } from '@commercetools-frontend/permissions';
 import LockedDiamondSVG from '@commercetools-frontend/assets/images/locked-diamond.svg';
-import React, { ReactNode } from 'react';
+import  { ReactNode } from 'react';
 import { ContentNotification } from '@commercetools-uikit/notifications';
 import LoadingSpinner from '@commercetools-uikit/loading-spinner';
 import Spacings from '@commercetools-uikit/spacings';
-import Link from '@commercetools-uikit/link';
 import Text from '@commercetools-uikit/text';
-import ariesLabsLogo from './assets/aries-labs-logo.svg';
 import ContainerList from './components/container-list';
 import CustomObjectsList from './components/custom-objects-list';
 import { messages } from './messages';
@@ -98,11 +96,6 @@ const ApplicationRoutes = (_props: ApplicationRoutesProps) => {
         <Route path={`${match.path}/containers`} component={ContainerList} />
         <Route component={CustomObjectsList} />
       </Switch>
-      <Spacings.Stack alignItems="center">
-        <Link to='https://www.ariessolutions.io/' isExternal={true}>
-          <img src={ariesLabsLogo} alt="Aries Labs Logo" width="100"/>
-        </Link>
-      </Spacings.Stack>
     </ContainerProvider>
   );
 };

tsconfig.json

@@ -1,3 +1,9 @@
 {
-  "extends": "@commercetools-frontend/application-config/tsconfig-mc-app.json"
+  "extends": "@commercetools-frontend/application-config/tsconfig-mc-app.json",
+  "compilerOptions": {
+    "typeRoots": ["@types", "@types-extensions", "node_modules/@types"],
+    // Allow tsc to resolve dependencies of `@types` packages in the way pnpm sets up the `node_modules`.
+    "preserveSymlinks": false
+  },
+  "include": ["src"]
 }