@orchestrator-ui/orchestrator-ui-components 7.4.0 → 7.5.0

package/src/components/WfoSubscription/WfoRelatedSubscriptions.tsx

@@ -6,204 +6,172 @@ import Link from 'next/link';
 import { EuiFlexGroup, EuiFlexItem, EuiSpacer, EuiSwitch } from '@elastic/eui';
 
 import {
-    DEFAULT_PAGE_SIZES,
-    SubscriptionListItem,
-    WfoDataSorting,
-    WfoFirstPartUUID,
-    WfoInsyncIcon,
-    WfoNoResults,
-    WfoSubscriptionStatusBadge,
-    getDataSortHandler,
-    getPageIndexChangeHandler,
-    getPageSizeChangeHandler,
+  DEFAULT_PAGE_SIZES,
+  SubscriptionListItem,
+  WfoDataSorting,
+  WfoFirstPartUUID,
+  WfoInsyncIcon,
+  WfoNoResults,
+  WfoSubscriptionStatusBadge,
+  getDataSortHandler,
+  getPageIndexChangeHandler,
+  getPageSizeChangeHandler,
 } from '@/components';
 import { PATH_SUBSCRIPTIONS } from '@/components';
 import {
-    graphQlRelatedSubscriptionsSortMapper,
-    graphQlRelatedSubscriptionsTerminatedSubscriptionsFilterMapper,
-    mapRelatedSubscriptionsResponseToRelatedSubscriptionsListItems,
+  graphQlRelatedSubscriptionsSortMapper,
+  graphQlRelatedSubscriptionsTerminatedSubscriptionsFilterMapper,
+  mapRelatedSubscriptionsResponseToRelatedSubscriptionsListItems,
 } from '@/components/WfoSubscription/utils/relatedSubscriptionsListItemsObjectMappers';
-import {
-    ColumnType,
-    Pagination,
-    WfoTable,
-    WfoTableColumnConfig,
-} from '@/components/WfoTable/WfoTable';
+import { ColumnType, Pagination, WfoTable, WfoTableColumnConfig } from '@/components/WfoTable/WfoTable';
 import { mapSortableAndFilterableValuesToTableColumnConfig } from '@/components/WfoTable/WfoTable/utils';
 import { useDataDisplayParams, useOrchestratorTheme } from '@/hooks';
 import { WfoSearchStrikethrough } from '@/icons';
-import {
-    RelatedSubscriptionVariables,
-    useGetRelatedSubscriptionsQuery,
-} from '@/rtk';
+import { RelatedSubscriptionVariables, useGetRelatedSubscriptionsQuery } from '@/rtk';
 import { GraphqlFilter, SortOrder, SubscriptionStatus } from '@/types';
 import { parseDateToLocaleDateString } from '@/utils';
 
 export type RelatedSubscriptionListItem = Pick<
-    SubscriptionListItem,
-    | 'subscriptionId'
-    | 'description'
-    | 'status'
-    | 'insync'
-    | 'customerFullname'
-    | 'tag'
-    | 'startDate'
+  SubscriptionListItem,
+  'subscriptionId' | 'description' | 'status' | 'insync' | 'customerFullname' | 'tag' | 'startDate'
 >;
 
 interface WfoRelatedSubscriptionsProps {
-    subscriptionId: string;
-    subscriptionPath?: string;
+  subscriptionId: string;
+  subscriptionPath?: string;
 }
 
 export const WfoRelatedSubscriptions = ({
-    subscriptionId,
-    subscriptionPath = PATH_SUBSCRIPTIONS,
+  subscriptionId,
+  subscriptionPath = PATH_SUBSCRIPTIONS,
 }: WfoRelatedSubscriptionsProps) => {
-    const [hideTerminatedSubscriptions, setHideTerminatedSubscriptions] =
-        useState<boolean>(true);
-    const t = useTranslations('subscriptions.detail');
-    const { theme } = useOrchestratorTheme();
+  const [hideTerminatedSubscriptions, setHideTerminatedSubscriptions] = useState<boolean>(true);
+  const t = useTranslations('subscriptions.detail');
+  const { theme } = useOrchestratorTheme();
 
-    const terminatedSubscriptionsFilter: GraphqlFilter<RelatedSubscriptionListItem> =
-        {
-            field: 'status',
-            value: `${SubscriptionStatus.ACTIVE}-${SubscriptionStatus.DISABLED}-${SubscriptionStatus.INITIAL}-${SubscriptionStatus.MIGRATING}-${SubscriptionStatus.PROVISIONING}`,
-        };
+  const terminatedSubscriptionsFilter: GraphqlFilter<RelatedSubscriptionListItem> = {
+    field: 'status',
+    value: `${SubscriptionStatus.ACTIVE}-${SubscriptionStatus.DISABLED}-${SubscriptionStatus.INITIAL}-${SubscriptionStatus.MIGRATING}-${SubscriptionStatus.PROVISIONING}`,
+  };
 
-    const { dataDisplayParams, setDataDisplayParam } =
-        useDataDisplayParams<RelatedSubscriptionListItem>({
-            sortBy: {
-                field: 'startDate',
-                order: SortOrder.DESC,
-            },
-        });
+  const { dataDisplayParams, setDataDisplayParam } = useDataDisplayParams<RelatedSubscriptionListItem>({
+    sortBy: {
+      field: 'startDate',
+      order: SortOrder.DESC,
+    },
+  });
 
-    const graphqlQueryVariables: RelatedSubscriptionVariables = {
-        first: dataDisplayParams.pageSize,
-        after: dataDisplayParams.pageIndex * dataDisplayParams.pageSize,
-        subscriptionId: subscriptionId,
-        sortBy: graphQlRelatedSubscriptionsSortMapper(dataDisplayParams.sortBy),
-        terminatedSubscriptionFilter: hideTerminatedSubscriptions
-            ? graphQlRelatedSubscriptionsTerminatedSubscriptionsFilterMapper(
-                  terminatedSubscriptionsFilter,
-              )
-            : undefined,
-    };
+  const graphqlQueryVariables: RelatedSubscriptionVariables = {
+    first: dataDisplayParams.pageSize,
+    after: dataDisplayParams.pageIndex * dataDisplayParams.pageSize,
+    subscriptionId: subscriptionId,
+    sortBy: graphQlRelatedSubscriptionsSortMapper(dataDisplayParams.sortBy),
+    terminatedSubscriptionFilter:
+      hideTerminatedSubscriptions ?
+        graphQlRelatedSubscriptionsTerminatedSubscriptionsFilterMapper(terminatedSubscriptionsFilter)
+      : undefined,
+  };
 
-    const { data, isFetching, isLoading } = useGetRelatedSubscriptionsQuery(
-        graphqlQueryVariables,
-    );
+  const { data, isFetching, isLoading } = useGetRelatedSubscriptionsQuery(graphqlQueryVariables);
 
-    const relatedSubscriptions =
-        mapRelatedSubscriptionsResponseToRelatedSubscriptionsListItems(data);
-    const relatedSubscriptionsPageInfo = data?.pageInfo;
+  const relatedSubscriptions = mapRelatedSubscriptionsResponseToRelatedSubscriptionsListItems(data);
+  const relatedSubscriptionsPageInfo = data?.pageInfo;
 
-    const tableColumns: WfoTableColumnConfig<RelatedSubscriptionListItem> = {
-        subscriptionId: {
-            columnType: ColumnType.DATA,
-            label: t('id'),
-            renderData: (value) => <WfoFirstPartUUID UUID={value} />,
-            renderTooltip: (value) => value,
-        },
-        description: {
-            columnType: ColumnType.DATA,
-            label: t('description'),
-            renderData: (value, record) => (
-                <Link
-                    target="_blank"
-                    href={`${subscriptionPath}/${record.subscriptionId}`}
-                >
-                    {value}
-                </Link>
-            ),
-        },
-        status: {
-            columnType: ColumnType.DATA,
-            label: t('status'),
-            renderData: (value) => (
-                <WfoSubscriptionStatusBadge status={value} />
-            ),
-        },
-        insync: {
-            columnType: ColumnType.DATA,
-            label: t('insync'),
-            renderData: (value) => <WfoInsyncIcon inSync={value} />,
-        },
-        customerFullname: {
-            columnType: ColumnType.DATA,
-            label: t('customer'),
-            renderTooltip: (value) => value,
-        },
-        tag: {
-            columnType: ColumnType.DATA,
-            label: t('tag'),
-            width: '150px',
-        },
-        startDate: {
-            columnType: ColumnType.DATA,
-            label: t('startDate'),
-            renderData: parseDateToLocaleDateString,
-            renderTooltip: parseDateToLocaleDateString,
-        },
-    };
+  const tableColumns: WfoTableColumnConfig<RelatedSubscriptionListItem> = {
+    subscriptionId: {
+      columnType: ColumnType.DATA,
+      label: t('id'),
+      renderData: (value) => <WfoFirstPartUUID UUID={value} />,
+      renderTooltip: (value) => value,
+    },
+    description: {
+      columnType: ColumnType.DATA,
+      label: t('description'),
+      renderData: (value, record) => (
+        <Link target="_blank" href={`${subscriptionPath}/${record.subscriptionId}`}>
+          {value}
+        </Link>
+      ),
+    },
+    status: {
+      columnType: ColumnType.DATA,
+      label: t('status'),
+      renderData: (value) => <WfoSubscriptionStatusBadge status={value} />,
+    },
+    insync: {
+      columnType: ColumnType.DATA,
+      label: t('insync'),
+      renderData: (value) => <WfoInsyncIcon inSync={value} />,
+    },
+    customerFullname: {
+      columnType: ColumnType.DATA,
+      label: t('customer'),
+      renderTooltip: (value) => value,
+    },
+    tag: {
+      columnType: ColumnType.DATA,
+      label: t('tag'),
+      width: '150px',
+    },
+    startDate: {
+      columnType: ColumnType.DATA,
+      label: t('startDate'),
+      renderData: parseDateToLocaleDateString,
+      renderTooltip: parseDateToLocaleDateString,
+    },
+  };
 
-    const pagination: Pagination = {
-        pageSize: dataDisplayParams.pageSize,
-        pageIndex: dataDisplayParams.pageIndex,
-        totalItemCount: relatedSubscriptionsPageInfo?.totalItems ?? 0,
-        pageSizeOptions: DEFAULT_PAGE_SIZES,
-        onChangeItemsPerPage: getPageSizeChangeHandler(setDataDisplayParam),
-        onChangePage: getPageIndexChangeHandler(setDataDisplayParam),
-    };
+  const pagination: Pagination = {
+    pageSize: dataDisplayParams.pageSize,
+    pageIndex: dataDisplayParams.pageIndex,
+    totalItemCount: relatedSubscriptionsPageInfo?.totalItems ?? 0,
+    pageSizeOptions: DEFAULT_PAGE_SIZES,
+    onChangeItemsPerPage: getPageSizeChangeHandler(setDataDisplayParam),
+    onChangePage: getPageIndexChangeHandler(setDataDisplayParam),
+  };
 
-    const dataSorting: WfoDataSorting<RelatedSubscriptionListItem> = {
-        field: dataDisplayParams.sortBy?.field,
-        sortOrder: dataDisplayParams.sortBy?.order,
-    };
+  const dataSorting: WfoDataSorting<RelatedSubscriptionListItem> = {
+    field: dataDisplayParams.sortBy?.field,
+    sortOrder: dataDisplayParams.sortBy?.order,
+  };
 
-    const toggleTerminatedSubscriptions = () => {
-        setHideTerminatedSubscriptions((currentValue) => !currentValue);
-    };
-    return (
-        <>
-            <EuiSpacer size="xl" />
-            <EuiFlexGroup justifyContent="flexEnd">
-                <EuiFlexItem grow={0}>
-                    <EuiSwitch
-                        showLabel={true}
-                        label={t('hideTerminatedRelatedSubscriptions')}
-                        type="button"
-                        checked={hideTerminatedSubscriptions}
-                        onChange={toggleTerminatedSubscriptions}
-                    />
-                </EuiFlexItem>
-            </EuiFlexGroup>
-            <EuiSpacer size="m" />
-            {(relatedSubscriptions?.length > 0 &&
-                (!isLoading ||
-                    // This situation represents the situation where the hideRelatedsubscriptions is being toggled
-                    // in which case we don't want to show the loadingState because it makes the page flicker
-                    (!hideTerminatedSubscriptions &&
-                        relatedSubscriptions.length > 0)) && (
-                    <WfoTable
-                        data={relatedSubscriptions}
-                        columnConfig={mapSortableAndFilterableValuesToTableColumnConfig<RelatedSubscriptionListItem>(
-                            tableColumns,
-                            data?.pageInfo.sortFields ?? [],
-                        )}
-                        pagination={pagination}
-                        isLoading={isFetching}
-                        onUpdateDataSorting={getDataSortHandler(
-                            setDataDisplayParam,
-                        )}
-                        dataSorting={[dataSorting]}
-                    />
-                )) || (
-                <WfoNoResults
-                    text={t('noRelatedSubscriptions')}
-                    icon={<WfoSearchStrikethrough color={theme.colors.link} />}
-                />
+  const toggleTerminatedSubscriptions = () => {
+    setHideTerminatedSubscriptions((currentValue) => !currentValue);
+  };
+  return (
+    <>
+      <EuiSpacer size="xl" />
+      <EuiFlexGroup justifyContent="flexEnd">
+        <EuiFlexItem grow={0}>
+          <EuiSwitch
+            showLabel={true}
+            label={t('hideTerminatedRelatedSubscriptions')}
+            type="button"
+            checked={hideTerminatedSubscriptions}
+            onChange={toggleTerminatedSubscriptions}
+          />
+        </EuiFlexItem>
+      </EuiFlexGroup>
+      <EuiSpacer size="m" />
+      {(relatedSubscriptions?.length > 0
+        && (!isLoading
+          // This situation represents the situation where the hideRelatedsubscriptions is being toggled
+          // in which case we don't want to show the loadingState because it makes the page flicker
+          || (!hideTerminatedSubscriptions && relatedSubscriptions.length > 0)) && (
+          <WfoTable
+            data={relatedSubscriptions}
+            columnConfig={mapSortableAndFilterableValuesToTableColumnConfig<RelatedSubscriptionListItem>(
+              tableColumns,
+              data?.pageInfo.sortFields ?? [],
             )}
-        </>
-    );
+            pagination={pagination}
+            isLoading={isFetching}
+            onUpdateDataSorting={getDataSortHandler(setDataDisplayParam)}
+            dataSorting={[dataSorting]}
+          />
+        )) || (
+        <WfoNoResults text={t('noRelatedSubscriptions')} icon={<WfoSearchStrikethrough color={theme.colors.link} />} />
+      )}
+    </>
+  );
 };

package/src/components/WfoSubscription/WfoSubscription.tsx

@@ -3,19 +3,15 @@ import React from 'react';
 import { StringParam, useQueryParam, withDefault } from 'use-query-params';
 
 import {
-    WfoFilterTabs,
-    WfoLoading,
-    WfoProcessesTimeline,
-    WfoRelatedSubscriptions,
-    WfoSubscriptionActions,
-    WfoSubscriptionDetailTree,
-    WfoSubscriptionGeneral,
-} from '@/components';
-import {
-    WfoSubscriptionStatusBadge,
-    WfoSubscriptionSyncStatusBadge,
-    WfoTitleWithWebsocketBadge,
+  WfoFilterTabs,
+  WfoLoading,
+  WfoProcessesTimeline,
+  WfoRelatedSubscriptions,
+  WfoSubscriptionActions,
+  WfoSubscriptionDetailTree,
+  WfoSubscriptionGeneral,
 } from '@/components';
+import { WfoSubscriptionStatusBadge, WfoSubscriptionSyncStatusBadge, WfoTitleWithWebsocketBadge } from '@/components';
 import { WfoContentHeader } from '@/components/WfoContentHeader/WfoContentHeader';
 import { useGetSubscriptionDetailQuery } from '@/rtk/endpoints/subscriptionDetail';
 
@@ -24,103 +20,72 @@ import { subscriptionDetailTabs } from './subscriptionDetailTabs';
 import { SubscriptionDetailTab } from './utils';
 
 type WfoSubscriptionProps = {
-    subscriptionId: string;
+  subscriptionId: string;
 };
 
 export const WfoSubscription = ({ subscriptionId }: WfoSubscriptionProps) => {
-    const [activeTab, setActiveTab] = useQueryParam(
-        'activeTab',
-        withDefault(
-            StringParam,
-            SubscriptionDetailTab.SERVICE_CONFIGURATION_TAB,
-        ),
-    );
+  const [activeTab, setActiveTab] = useQueryParam(
+    'activeTab',
+    withDefault(StringParam, SubscriptionDetailTab.SERVICE_CONFIGURATION_TAB),
+  );
 
-    const selectedTab = ((): SubscriptionDetailTab => {
-        return (
-            subscriptionDetailTabs.find(({ id }) => id === activeTab)?.id ||
-            SubscriptionDetailTab.SERVICE_CONFIGURATION_TAB
-        );
-    })();
+  const selectedTab = ((): SubscriptionDetailTab => {
+    return (
+      subscriptionDetailTabs.find(({ id }) => id === activeTab)?.id || SubscriptionDetailTab.SERVICE_CONFIGURATION_TAB
+    );
+  })();
 
-    const { data, isLoading, isError } = useGetSubscriptionDetailQuery({
-        subscriptionId,
-    });
+  const { data, isLoading, isError } = useGetSubscriptionDetailQuery({
+    subscriptionId,
+  });
 
-    const onSelectedTabChanged = (tab: SubscriptionDetailTab) => {
-        setActiveTab(tab);
-    };
-    const subscriptionDetail = data?.subscription;
+  const onSelectedTabChanged = (tab: SubscriptionDetailTab) => {
+    setActiveTab(tab);
+  };
+  const subscriptionDetail = data?.subscription;
 
-    return (
-        <>
-            {(isError && <WfoError />) ||
-                (isLoading && <WfoLoading />) ||
-                (subscriptionDetail && subscriptionDetail.subscriptionId && (
-                    <>
-                        <WfoContentHeader
-                            title={
-                                <WfoTitleWithWebsocketBadge
-                                    title={subscriptionDetail.description}
-                                />
-                            }
-                            subtitle={
-                                <>
-                                    <WfoSubscriptionStatusBadge
-                                        status={subscriptionDetail.status}
-                                    />
-                                    <WfoSubscriptionSyncStatusBadge
-                                        insync={subscriptionDetail.insync}
-                                    />
-                                </>
-                            }
-                        >
-                            <WfoSubscriptionActions
-                                subscriptionId={subscriptionId}
-                            />
-                        </WfoContentHeader>
+  return (
+    <>
+      {(isError && <WfoError />)
+        || (isLoading && <WfoLoading />)
+        || (subscriptionDetail && subscriptionDetail.subscriptionId && (
+          <>
+            <WfoContentHeader
+              title={<WfoTitleWithWebsocketBadge title={subscriptionDetail.description} />}
+              subtitle={
+                <>
+                  <WfoSubscriptionStatusBadge status={subscriptionDetail.status} />
+                  <WfoSubscriptionSyncStatusBadge insync={subscriptionDetail.insync} />
+                </>
+              }
+            >
+              <WfoSubscriptionActions subscriptionId={subscriptionId} />
+            </WfoContentHeader>
 
-                        <WfoFilterTabs
-                            tabs={subscriptionDetailTabs}
-                            selectedTab={selectedTab}
-                            translationNamespace="subscriptions.detail.tabs"
-                            onChangeTab={onSelectedTabChanged}
-                        />
+            <WfoFilterTabs
+              tabs={subscriptionDetailTabs}
+              selectedTab={selectedTab}
+              translationNamespace="subscriptions.detail.tabs"
+              onChangeTab={onSelectedTabChanged}
+            />
 
-                        {selectedTab ===
-                            SubscriptionDetailTab.SERVICE_CONFIGURATION_TAB && (
-                            <WfoSubscriptionDetailTree
-                                productBlockInstances={
-                                    subscriptionDetail.productBlockInstances
-                                }
-                                subscriptionId={subscriptionId}
-                            />
-                        )}
-                        {selectedTab === SubscriptionDetailTab.GENERAL_TAB && (
-                            <WfoSubscriptionGeneral
-                                subscriptionDetail={subscriptionDetail}
-                            />
-                        )}
-                        {selectedTab === SubscriptionDetailTab.PROCESSES_TAB &&
-                            data &&
-                            subscriptionDetail.processes?.page && (
-                                <WfoProcessesTimeline
-                                    subscriptionDetailProcesses={
-                                        subscriptionDetail.processes?.page
-                                    }
-                                />
-                            )}
-                        {selectedTab ===
-                            SubscriptionDetailTab.RELATED_SUBSCRIPTIONS_TAB &&
-                            data && (
-                                <WfoRelatedSubscriptions
-                                    subscriptionId={
-                                        subscriptionDetail.subscriptionId
-                                    }
-                                />
-                            )}
-                    </>
-                )) || <h1>Unknown subscriptionId: {subscriptionId}</h1>}
-        </>
-    );
+            {selectedTab === SubscriptionDetailTab.SERVICE_CONFIGURATION_TAB && (
+              <WfoSubscriptionDetailTree
+                productBlockInstances={subscriptionDetail.productBlockInstances}
+                subscriptionId={subscriptionId}
+              />
+            )}
+            {selectedTab === SubscriptionDetailTab.GENERAL_TAB && (
+              <WfoSubscriptionGeneral subscriptionDetail={subscriptionDetail} />
+            )}
+            {selectedTab === SubscriptionDetailTab.PROCESSES_TAB && data && subscriptionDetail.processes?.page && (
+              <WfoProcessesTimeline subscriptionDetailProcesses={subscriptionDetail.processes?.page} />
+            )}
+            {selectedTab === SubscriptionDetailTab.RELATED_SUBSCRIPTIONS_TAB && data && (
+              <WfoRelatedSubscriptions subscriptionId={subscriptionDetail.subscriptionId} />
+            )}
+          </>
+        )) || <h1>Unknown subscriptionId: {subscriptionId}</h1>}
+    </>
+  );
 };

package/src/components/WfoSubscription/WfoSubscriptionActions/WfoSubscriptionActionExpandableMenuItem.tsx

@@ -12,63 +12,57 @@ import { SubscriptionAction } from '@/types';
 import { getSubscriptionActionStyles } from './styles';
 
 export type WfoSubscriptionActionExpandableMenuItemProps = {
-    subscriptionAction: SubscriptionAction;
-    onClickLockedRelation: (relation: string) => void;
-    children: React.ReactNode;
+  subscriptionAction: SubscriptionAction;
+  onClickLockedRelation: (relation: string) => void;
+  children: React.ReactNode;
 };
 
-export const WfoSubscriptionActionExpandableMenuItem: FC<
-    WfoSubscriptionActionExpandableMenuItemProps
-> = ({ subscriptionAction, onClickLockedRelation, children }) => {
-    const t = useTranslations('subscriptions.detail.actions');
+export const WfoSubscriptionActionExpandableMenuItem: FC<WfoSubscriptionActionExpandableMenuItemProps> = ({
+  subscriptionAction,
+  onClickLockedRelation,
+  children,
+}) => {
+  const t = useTranslations('subscriptions.detail.actions');
 
-    const {
-        clickableStyle,
-        expandableMenuItemStyle,
-        expandButtonStyle,
-        expandedContentStyle,
-        linkStyle,
-    } = useWithOrchestratorTheme(getSubscriptionActionStyles);
-    const [isExpanded, setIsExpanded] = useState(false);
+  const { clickableStyle, expandableMenuItemStyle, expandButtonStyle, expandedContentStyle, linkStyle } =
+    useWithOrchestratorTheme(getSubscriptionActionStyles);
+  const [isExpanded, setIsExpanded] = useState(false);
 
-    const { locked_relations: lockedRelations } = subscriptionAction;
+  const { locked_relations: lockedRelations } = subscriptionAction;
 
-    return (
-        <div>
-            <div
-                css={[
-                    expandableMenuItemStyle,
-                    lockedRelations && clickableStyle,
-                ]}
-                onClick={() => setIsExpanded(!isExpanded)}
-            >
-                <div>{children}</div>
-                {lockedRelations && (
-                    <EuiButtonIcon
-                        css={expandButtonStyle}
-                        iconType={isExpanded ? 'arrowDown' : 'arrowRight'}
-                        onClick={() => setIsExpanded(!isExpanded)}
-                        aria-label={t('expand')}
-                    />
-                )}
-            </div>
-            {lockedRelations && isExpanded && (
-                <div css={expandedContentStyle}>
-                    <EuiText size="xs">{t('lockedBySubscriptions')}</EuiText>
-                    {lockedRelations.map((relation) => (
-                        <EuiText key={relation} size="xs">
-                            <Link
-                                css={linkStyle}
-                                href={`${PATH_SUBSCRIPTIONS}/${relation}`}
-                                target="_blank"
-                                onClick={() => onClickLockedRelation(relation)}
-                            >
-                                {relation}
-                            </Link>
-                        </EuiText>
-                    ))}
-                </div>
-            )}
+  return (
+    <div>
+      <div
+        css={[expandableMenuItemStyle, lockedRelations && clickableStyle]}
+        onClick={() => setIsExpanded(!isExpanded)}
+      >
+        <div>{children}</div>
+        {lockedRelations && (
+          <EuiButtonIcon
+            css={expandButtonStyle}
+            iconType={isExpanded ? 'arrowDown' : 'arrowRight'}
+            onClick={() => setIsExpanded(!isExpanded)}
+            aria-label={t('expand')}
+          />
+        )}
+      </div>
+      {lockedRelations && isExpanded && (
+        <div css={expandedContentStyle}>
+          <EuiText size="xs">{t('lockedBySubscriptions')}</EuiText>
+          {lockedRelations.map((relation) => (
+            <EuiText key={relation} size="xs">
+              <Link
+                css={linkStyle}
+                href={`${PATH_SUBSCRIPTIONS}/${relation}`}
+                target="_blank"
+                onClick={() => onClickLockedRelation(relation)}
+              >
+                {relation}
+              </Link>
+            </EuiText>
+          ))}
         </div>
-    );
+      )}
+    </div>
+  );
 };