1713: Fixes some layout issues

Author: Ruben van Leeuwen

packages/orchestrator-ui-components/src/components/WfoSubscription/WfoCustomerDescriptionsField.tsx

@@ -1,5 +1,6 @@
 import React, { FC } from 'react';
 
+import { useOrchestratorTheme } from '@/hooks';
 import { useGetCustomerQuery } from '@/rtk';
 import {
     useSetCustomerDescriptionMutation,
@@ -22,6 +23,7 @@ export type WfoCustomerDescriptionsFieldProps = {
 export const WfoCustomerDescriptionsField: FC<
     WfoCustomerDescriptionsFieldProps
 > = ({ customerDescriptions, subscriptionCustomerId, subscriptionId }) => {
+    const { theme } = useOrchestratorTheme();
     const [updateCustomerDescription, {}] =
         useUpdateCustomerDescriptionMutation();
     const [setCustomerDescription, {}] = useSetCustomerDescriptionMutation();
@@ -61,8 +63,15 @@ export const WfoCustomerDescriptionsField: FC<
         subscriptionId,
     }: CustomerDescriptionWithName) => (
         <div key={customerId} css={{ display: 'flex' }}>
-            {fullname ?? customerId}
-            {`${shortcode ?? customerId}`}:
+            <div
+                css={{
+                    whiteSpace: 'nowrap',
+                    alignSelf: 'center',
+                    marginRight: theme.base / 2,
+                }}
+            >
+                {fullname ?? customerId} {`${shortcode ?? customerId}`}:
+            </div>
             <WfoInlineEdit
                 value={description}
                 triggerModify={(value) =>
@@ -80,7 +89,7 @@ export const WfoCustomerDescriptionsField: FC<
     const customerDescriptionCreateForm = () => {
         if (!subscriptionCustomerId) return;
         return (
-            <div key={subscriptionCustomerId} css={{ display: 'flex' }}>
+            <div key={subscriptionCustomerId}>
                 <WfoInlineEdit
                     value={INVISIBLE_CHARACTER}
                     onlyShowOnHover={true}
@@ -102,7 +111,13 @@ export const WfoCustomerDescriptionsField: FC<
         );
 
     return (
-        <>
+        <div
+            css={{
+                display: 'flex',
+                flexDirection: 'column',
+                alignItems: 'flex-start',
+            }}
+        >
             {(currentCustomerSubscriptionDescription &&
                 customerDescriptionEditForm(
                     currentCustomerSubscriptionDescription,
@@ -115,6 +130,6 @@ export const WfoCustomerDescriptionsField: FC<
                 .map((customerDescriptionWithName) =>
                     customerDescriptionEditForm(customerDescriptionWithName),
                 )}
-        </>
+        </div>
     );
 };

packages/orchestrator-ui-components/src/components/WfoSubscription/WfoSubscriptionActions/WfoSubscriptionActionExpandableMenuItem.tsx

@@ -4,7 +4,6 @@ import { useTranslations } from 'next-intl';
 import Link from 'next/link';
 
 import { EuiButtonIcon, EuiText } from '@elastic/eui';
-import { ReactJSXElement } from '@emotion/react/types/jsx-namespace';
 
 import { PATH_SUBSCRIPTIONS } from '@/components';
 import { useWithOrchestratorTheme } from '@/hooks';
@@ -15,7 +14,7 @@ import { getSubscriptionActionStyles } from './styles';
 export type WfoSubscriptionActionExpandableMenuItemProps = {
     subscriptionAction: SubscriptionAction;
     onClickLockedRelation: (relation: string) => void;
-    children: ReactJSXElement;
+    children: React.ReactNode;
 };
 
 export const WfoSubscriptionActionExpandableMenuItem: FC<

packages/orchestrator-ui-components/src/components/WfoSubscription/WfoSubscriptionActions/WfoSubscriptionActions.tsx

@@ -13,7 +13,6 @@ import {
     EuiTitle,
     EuiToolTip,
 } from '@elastic/eui';
-import { ReactJSXElement } from '@emotion/react/types/jsx-namespace';
 
 import { PATH_START_NEW_TASK, PATH_START_NEW_WORKFLOW } from '@/components';
 import { PolicyResource } from '@/configuration/policy-resources';
@@ -94,7 +93,7 @@ export const WfoSubscriptionActions: FC<WfoSubscriptionActionsProps> = ({
     }) => {
         // Change icon to include x if there's a reason
         // Add tooltip with reason
-        const linkIt = (actionItem: ReactJSXElement) => {
+        const linkIt = (actionItem: React.ReactNode) => {
             const path = isTask ? PATH_START_NEW_TASK : PATH_START_NEW_WORKFLOW;
             const url = {
                 pathname: `${path}/${action.name}`,
@@ -116,7 +115,7 @@ export const WfoSubscriptionActions: FC<WfoSubscriptionActionsProps> = ({
             );
         };
 
-        const tooltipIt = (actionItem: ReactJSXElement) => {
+        const tooltipIt = (actionItem: React.ReactNode) => {
             /**
               Whether an action is disabled is indicated by it having a reason property.
               The value of the reason property is as a translation key that should

packages/orchestrator-ui-components/src/components/index.ts

@@ -34,3 +34,4 @@ export * from './WfoTitleWithWebsocketBadge';
 export * from './WfoRadioDropdown';
 export * from './WfoInlineNoteEdit';
 export * from './WfoTableCodeBlock';
+export * from './WfoInlineEdit';