@orchestrator-ui/orchestrator-ui-components 2.10.1 → 2.12.0

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@orchestrator-ui/orchestrator-ui-components",
-    "version": "2.10.1",
+    "version": "2.12.0",
     "license": "Apache-2.0",
     "description": "Library of UI Components used to display the workflow orchestrator frontend",
     "author": {
@@ -10,7 +10,11 @@
     },
     "repository": {
         "type": "git",
-        "url": "https://github.com/workfloworchestrator/orchestrator-ui-library.git"
+        "url": "git+https://github.com/workfloworchestrator/orchestrator-ui-library.git"
+    },
+    "publishConfig": {
+        "access": "public",
+        "provenance": true
     },
     "homepage": "https://www.workfloworchestrator.org",
     "bugs": "https://github.com/workfloworchestrator/orchestrator-ui-library/issues",

package/src/components/WfoBadges/WfoFailedTasksBadge/WfoFailedTasksBadge.tsx

@@ -1,18 +1,20 @@
-import React from 'react';
+import React, { ReactNode } from 'react';
 
 import { useTranslations } from 'next-intl';
+import Link from 'next/link';
 
 import { EuiToolTip } from '@elastic/eui';
 
-import { WfoHeaderBadge } from '@/components';
-import { useOrchestratorTheme } from '@/hooks';
-import { WfoCheckmarkCircleFill } from '@/icons';
-import { WfoXCircleFill } from '@/icons';
+import { PATH_TASKS, WfoHeaderBadge } from '@/components';
+import { useOrchestratorTheme, useWithOrchestratorTheme } from '@/hooks';
+import { WfoCheckmarkCircleFill, WfoXCircleFill } from '@/icons';
 import {
     ProcessStatusCounts,
     useProcessStatusCountsQuery,
 } from '@/rtk/endpoints/processStatusCounts';
 
+import { getTasksBadgeStyles } from './styles';
+
 type TaskCountsSummary = {
     failed: number;
     inconsistentData: number;
@@ -36,9 +38,22 @@ const getTaskCountsSummary = (
     };
 };
 
+const WfoTasksLink = ({ children }: { children: ReactNode }) => (
+    <Link
+        href={`${PATH_TASKS}`}
+        onClick={(e) => {
+            e.currentTarget.blur();
+        }}
+    >
+        {children}
+    </Link>
+);
+
 export const WfoFailedTasksBadge = () => {
     const t = useTranslations('common');
     const { theme } = useOrchestratorTheme();
+    const { failedTaskBadgeStyle } =
+        useWithOrchestratorTheme(getTasksBadgeStyles);
     const { data: processStatusCounts } = useProcessStatusCountsQuery();
 
     const taskCountsSummary = getTaskCountsSummary(processStatusCounts);
@@ -60,15 +75,18 @@ export const WfoFailedTasksBadge = () => {
                     </>
                 }
             >
-                <WfoHeaderBadge
-                    color={theme.colors.ghost}
-                    textColor={theme.colors.shadow}
-                    iconType={() => (
-                        <WfoXCircleFill color={theme.colors.danger} />
-                    )}
-                >
-                    {taskCountsSummary.total}
-                </WfoHeaderBadge>
+                <WfoTasksLink>
+                    <WfoHeaderBadge
+                        css={failedTaskBadgeStyle}
+                        color={theme.colors.ghost}
+                        textColor={theme.colors.shadow}
+                        iconType={() => (
+                            <WfoXCircleFill color={theme.colors.danger} />
+                        )}
+                    >
+                        {taskCountsSummary.total}
+                    </WfoHeaderBadge>
+                </WfoTasksLink>
             </EuiToolTip>
         );
     } else {
@@ -81,15 +99,20 @@ export const WfoFailedTasksBadge = () => {
                     </>
                 }
             >
-                <WfoHeaderBadge
-                    color={theme.colors.ghost}
-                    textColor={theme.colors.shadow}
-                    iconType={() => (
-                        <WfoCheckmarkCircleFill color={theme.colors.success} />
-                    )}
-                >
-                    0
-                </WfoHeaderBadge>
+                <WfoTasksLink>
+                    <WfoHeaderBadge
+                        css={failedTaskBadgeStyle}
+                        color={theme.colors.ghost}
+                        textColor={theme.colors.shadow}
+                        iconType={() => (
+                            <WfoCheckmarkCircleFill
+                                color={theme.colors.success}
+                            />
+                        )}
+                    >
+                        0
+                    </WfoHeaderBadge>
+                </WfoTasksLink>
             </EuiToolTip>
         );
     }

package/src/components/WfoBadges/WfoFailedTasksBadge/styles.ts

@@ -0,0 +1,10 @@
+import { css } from '@emotion/react';
+
+export const getTasksBadgeStyles = () => {
+    const failedTaskBadgeStyle = css({
+        cursor: 'pointer',
+        '&:hover': { textDecoration: 'underline' },
+    });
+
+    return { failedTaskBadgeStyle };
+};

package/src/components/WfoForms/formFields/BoolFieldStyling.ts

@@ -12,10 +12,6 @@ export const boolFieldStyling = css`
       z-index: unset;
     }
 
-    input[type="checkbox"] {
-      display: none;
-    }
-
     label {
       display: inline-block;
       margin: 3px 0;

package/src/components/WfoInlineNoteEdit/WfoInlineNoteEdit.tsx

@@ -1,4 +1,4 @@
-import React, { useEffect, useMemo, useState } from 'react';
+import React, { useEffect, useState } from 'react';
 import type { ChangeEvent, FC } from 'react';
 
 import { EuiInlineEditText } from '@elastic/eui';
@@ -20,8 +20,7 @@ export const WfoInlineNoteEdit: FC<WfoInlineNoteEditProps> = ({
     onlyShowOnHover = false,
 }) => {
     const { theme } = useOrchestratorTheme();
-    const initialNote = useMemo(() => value || '', [value]);
-    const [note, setNote] = useState<string>(initialNote);
+    const [note, setNote] = useState<string>(value ?? '');
     const [isTooltipVisible, setIsTooltipVisible] = useState<boolean>(true);
 
     const [startProcess] = useStartProcessMutation();
@@ -42,15 +41,15 @@ export const WfoInlineNoteEdit: FC<WfoInlineNoteEditProps> = ({
     };
 
     const handleCancel = () => {
-        setNote(initialNote);
+        setNote(value ?? '');
         setIsTooltipVisible(true);
     };
 
     // This useEffect makes sure the note is updated when a new value property is passed in
     // for example by a parent component that is update through a websocket event
     useEffect(() => {
-        setNote(initialNote);
-    }, [initialNote]);
+        setNote(value ?? '');
+    }, [value]);
 
     return (
         <div

package/src/components/WfoSubscription/WfoInUseByRelations.tsx

@@ -52,6 +52,7 @@ export const WfoInUseByRelations = ({
                 value: (
                     <WfoFirstPartUUID
                         UUID={inUseByRelationDetails.subscriptionId}
+                        showCopyIcon={false}
                     />
                 ),
                 textToCopy: inUseByRelationDetails.subscriptionId,

package/src/components/WfoSubscription/WfoSubscriptionProductBlock/WfoSubscriptionProductBlock.tsx

@@ -34,7 +34,7 @@ interface WfoSubscriptionProductBlockProps {
     subscriptionId: Subscription['subscriptionId'];
 }
 
-export const HIDDEN_KEYS = ['title', 'name', 'label'];
+export const HIDDEN_KEYS = ['title', 'name', 'label', 'inUseByIds'];
 
 export const WfoSubscriptionProductBlock = ({
     productBlock,

package/src/components/WfoSubscriptionsList/WfoSubscriptionsList.tsx

@@ -10,6 +10,7 @@ import {
     Pagination,
     WfoDateTime,
     WfoInlineJson,
+    WfoInlineNoteEdit,
     WfoInsyncIcon,
     WfoJsonCodeBlock,
     WfoSubscriptionStatusBadge,
@@ -80,6 +81,7 @@ export const WfoSubscriptionsList: FC<WfoSubscriptionsListProps> = ({
             subscriptionId: {
                 columnType: ColumnType.DATA,
                 label: t('id'),
+                width: '100px',
                 renderData: (value) => <WfoFirstPartUUID UUID={value} />,
                 renderDetails: (value) => value,
                 renderTooltip: (value) => value,
@@ -87,7 +89,7 @@ export const WfoSubscriptionsList: FC<WfoSubscriptionsListProps> = ({
             description: {
                 columnType: ColumnType.DATA,
                 label: t('description'),
-                width: '400px',
+                width: '500px',
                 renderData: (value, record) => (
                     <Link href={`/subscriptions/${record.subscriptionId}`}>
                         {value}
@@ -98,6 +100,7 @@ export const WfoSubscriptionsList: FC<WfoSubscriptionsListProps> = ({
             status: {
                 columnType: ColumnType.DATA,
                 label: t('status'),
+                width: '120px',
                 renderData: (value) => (
                     <WfoSubscriptionStatusBadge status={value} />
                 ),
@@ -105,6 +108,7 @@ export const WfoSubscriptionsList: FC<WfoSubscriptionsListProps> = ({
             insync: {
                 columnType: ColumnType.DATA,
                 label: t('insync'),
+                width: '80px',
                 renderData: (value) => <WfoInsyncIcon inSync={value} />,
             },
             productName: {
@@ -119,7 +123,6 @@ export const WfoSubscriptionsList: FC<WfoSubscriptionsListProps> = ({
             customerFullname: {
                 columnType: ColumnType.DATA,
                 label: t('customerFullname'),
-                width: '150px',
             },
             customerShortcode: {
                 columnType: ColumnType.DATA,
@@ -129,6 +132,7 @@ export const WfoSubscriptionsList: FC<WfoSubscriptionsListProps> = ({
             startDate: {
                 columnType: ColumnType.DATA,
                 label: t('startDate'),
+                width: '120px',
                 renderData: (value) => <WfoDateTime dateOrIsoString={value} />,
                 renderDetails: parseDateToLocaleDateTimeString,
                 clipboardText: parseDateToLocaleDateTimeString,
@@ -137,6 +141,7 @@ export const WfoSubscriptionsList: FC<WfoSubscriptionsListProps> = ({
             endDate: {
                 columnType: ColumnType.DATA,
                 label: t('endDate'),
+                width: '120px',
                 renderData: (value) => <WfoDateTime dateOrIsoString={value} />,
                 renderDetails: parseDateToLocaleDateTimeString,
                 clipboardText: parseDateToLocaleDateTimeString,
@@ -145,7 +150,13 @@ export const WfoSubscriptionsList: FC<WfoSubscriptionsListProps> = ({
             note: {
                 columnType: ColumnType.DATA,
                 label: t('note'),
-                width: '100px',
+                renderData: (cellValue, row) => (
+                    <WfoInlineNoteEdit
+                        subscriptionId={row.subscriptionId}
+                        value={cellValue}
+                        onlyShowOnHover={true}
+                    />
+                ),
             },
             metadata: {
                 columnType: ColumnType.DATA,

package/src/components/WfoTable/WfoFirstPartUUID/WfoFirstPartUUID.tsx

@@ -10,30 +10,36 @@ import { COPY_ICON_CLASS, getStyles } from './styles';
 
 export type WfoFirstUUIDPartProps = {
     UUID: string;
+    showCopyIcon?: boolean;
 };
 
-export const WfoFirstPartUUID: FC<WfoFirstUUIDPartProps> = ({ UUID }) => {
+export const WfoFirstPartUUID: FC<WfoFirstUUIDPartProps> = ({
+    UUID,
+    showCopyIcon = true,
+}) => {
     const { uuidFieldStyle, clickable } = useWithOrchestratorTheme(getStyles);
     const { theme } = useOrchestratorTheme();
 
     return (
         <span css={uuidFieldStyle}>
             {getFirstUuidPart(UUID)}
-            <EuiCopy textToCopy={UUID}>
-                {(copy) => (
-                    <div
-                        className={COPY_ICON_CLASS}
-                        onClick={copy}
-                        css={clickable}
-                    >
-                        <WfoClipboardCopy
-                            width={16}
-                            height={16}
-                            color={theme.colors.mediumShade}
-                        />
-                    </div>
-                )}
-            </EuiCopy>
+            {showCopyIcon && (
+                <EuiCopy textToCopy={UUID}>
+                    {(copy) => (
+                        <div
+                            className={COPY_ICON_CLASS}
+                            onClick={copy}
+                            css={clickable}
+                        >
+                            <WfoClipboardCopy
+                                width={16}
+                                height={16}
+                                color={theme.colors.mediumShade}
+                            />
+                        </div>
+                    )}
+                </EuiCopy>
+            )}
         </span>
     );
 };

package/src/components/WfoTable/WfoTable/WfoTableDataRows.tsx

@@ -29,8 +29,14 @@ export const WfoTableDataRows = <T extends object>({
     onRowClick,
     className,
 }: WfoTableDataRowsProps<T>) => {
-    const { cellStyle, rowStyle, dataRowStyle, clickableStyle, setWidth } =
-        useWithOrchestratorTheme(getWfoTableStyles);
+    const {
+        cellStyle,
+        cellContentStyle,
+        rowStyle,
+        dataRowStyle,
+        clickableStyle,
+        setWidth,
+    } = useWithOrchestratorTheme(getWfoTableStyles);
 
     const sortedVisibleColumns = getSortedVisibleColumns(
         columnConfig,
@@ -70,7 +76,7 @@ export const WfoTableDataRows = <T extends object>({
                                             setWidth(columnConfig.width),
                                         ]}
                                     >
-                                        <div>
+                                        <div css={cellContentStyle}>
                                             {columnConfig.renderControl(row)}
                                         </div>
                                     </td>
@@ -91,7 +97,7 @@ export const WfoTableDataRows = <T extends object>({
                                         setWidth(columnConfig.width),
                                     ]}
                                 >
-                                    <div>
+                                    <div css={cellContentStyle}>
                                         <WfoDataCell
                                             customTooltip={columnConfig.renderTooltip?.(
                                                 result,

package/src/components/WfoTable/WfoTable/WfoTableHeaderCell/WfoSortDirectionIcon.tsx

@@ -1,7 +1,7 @@
 import React, { FC } from 'react';
 
 import { useOrchestratorTheme } from '@/hooks';
-import { WfoArrowNarrowDown, WfoArrowNarrowUp, WfoArrowsUpDown } from '@/icons';
+import { WfoArrowDown, WfoArrowUp, WfoArrowsUpDown } from '@/icons';
 import { SortOrder } from '@/types';
 
 import { SORTABLE_ICON_CLASS } from './styles';
@@ -18,6 +18,8 @@ export const WfoSortDirectionIcon: FC<WfoSortDirectionIconProps> = ({
     if (!sortDirection) {
         return (
             <WfoArrowsUpDown
+                height={16}
+                width={16}
                 className={SORTABLE_ICON_CLASS}
                 css={{ visibility: 'hidden' }}
                 color={theme.colors.subduedText}
@@ -26,16 +28,8 @@ export const WfoSortDirectionIcon: FC<WfoSortDirectionIconProps> = ({
     }
 
     return sortDirection === SortOrder.ASC ? (
-        <WfoArrowNarrowUp
-            color={theme.colors.subduedText}
-            height={24}
-            width={24}
-        />
+        <WfoArrowUp color={theme.colors.subduedText} />
     ) : (
-        <WfoArrowNarrowDown
-            color={theme.colors.subduedText}
-            height={24}
-            width={24}
-        />
+        <WfoArrowDown color={theme.colors.subduedText} />
     );
 };

package/src/components/WfoTable/WfoTable/WfoTableHeaderCell/styles.ts

@@ -116,6 +116,7 @@ export const getWfoBasicTableStyles = ({ theme }: WfoTheme) => {
         });
 
     const sortButtonStyle = css({
+        paddingLeft: theme.size.xxs,
         display: 'flex',
         flex: '0 0 auto',
         alignItems: 'center',

package/src/components/WfoTable/WfoTable/styles.ts

@@ -83,6 +83,7 @@ export const getWfoTableStyles = ({ theme }: WfoTheme) => {
     });
 
     const headerCellStyle = css({
+        paddingRight: 0,
         [`&:hover`]: {
             [`.${SORTABLE_ICON_CLASS}`]: {
                 visibility: 'visible',
@@ -100,6 +101,10 @@ export const getWfoTableStyles = ({ theme }: WfoTheme) => {
         verticalAlign: 'middle',
     });
 
+    const cellContentStyle = css({
+        display: 'inline-block',
+    });
+
     const emptyTableMessageStyle = css({
         textAlign: 'center',
     });
@@ -127,6 +132,7 @@ export const getWfoTableStyles = ({ theme }: WfoTheme) => {
         expandedRowStyle,
         headerCellStyle,
         cellStyle,
+        cellContentStyle,
         emptyTableMessageStyle,
         clickableStyle,
         setWidth,

package/src/configuration/version.ts

@@ -1 +1 @@
-export const ORCHESTRATOR_UI_LIBRARY_VERSION = '2.10.1';
+export const ORCHESTRATOR_UI_LIBRARY_VERSION = '2.12.0';

package/src/icons/heroicons/WfoArrowDown.tsx

@@ -0,0 +1,27 @@
+import React, { FC } from 'react';
+
+import { WfoIconProps } from '@/icons/WfoIconProps';
+
+import { withWfoHeroIconsWrapper } from './WfoHeroIconsWrapper';
+
+export const WfoArrowDownSvg: FC<WfoIconProps> = ({
+    width = 12,
+    height = 14,
+    color = 'currentColor',
+}) => (
+    <svg
+        width={width}
+        height={height}
+        viewBox="4 3 12 14"
+        fill={color}
+        xmlns="http://www.w3.org/2000/svg"
+    >
+        <path
+            fillRule="evenodd"
+            d="M10 3a.75.75 0 0 1 .75.75v10.638l3.96-4.158a.75.75 0 1 1 1.08 1.04l-5.25 5.5a.75.75 0 0 1-1.08 0l-5.25-5.5a.75.75 0 1 1 1.08-1.04l3.96 4.158V3.75A.75.75 0 0 1 10 3Z"
+            clipRule="evenodd"
+        />
+    </svg>
+);
+
+export const WfoArrowDown = withWfoHeroIconsWrapper(WfoArrowDownSvg);

package/src/icons/heroicons/WfoArrowUp.tsx

@@ -0,0 +1,27 @@
+import React, { FC } from 'react';
+
+import { WfoIconProps } from '@/icons/WfoIconProps';
+
+import { withWfoHeroIconsWrapper } from './WfoHeroIconsWrapper';
+
+export const WfoArrowUpSvg: FC<WfoIconProps> = ({
+    width = 12,
+    height = 14,
+    color = 'currentColor',
+}) => (
+    <svg
+        width={width}
+        height={height}
+        viewBox="4 3 12 14"
+        fill={color}
+        xmlns="http://www.w3.org/2000/svg"
+    >
+        <path
+            fillRule="evenodd"
+            d="M10 17a.75.75 0 0 1-.75-.75V5.612L5.29 9.77a.75.75 0 0 1-1.08-1.04l5.25-5.5a.75.75 0 0 1 1.08 0l5.25 5.5a.75.75 0 1 1-1.08 1.04l-3.96-4.158V16.25A.75.75 0 0 1 10 17Z"
+            clipRule="evenodd"
+        />
+    </svg>
+);
+
+export const WfoArrowUp = withWfoHeroIconsWrapper(WfoArrowUpSvg);

package/src/icons/heroicons/WfoArrowsUpDown.tsx

@@ -7,12 +7,12 @@ import { withWfoHeroIconsWrapper } from './WfoHeroIconsWrapper';
 const WfoArrowsUpDownSvg: FC<WfoIconProps> = ({
     width = 20,
     height = 20,
-    color = '#000000',
+    color = 'currentColor',
 }) => (
     <svg
         width={width}
         height={height}
-        viewBox="0 0 24 24"
+        viewBox="2 2 20 20"
         fill={color}
         xmlns="http://www.w3.org/2000/svg"
     >

package/src/icons/heroicons/WfoHeroIconsWrapper.tsx

@@ -1,6 +1,5 @@
 import React, { FC, ReactElement } from 'react';
 
-import { useOrchestratorTheme } from '@/hooks';
 import { WfoIconProps } from '@/icons';
 
 export type WfoHeroIconsWrapperProps = {
@@ -11,24 +10,18 @@ export type WfoHeroIconsWrapperProps = {
 export const WfoHeroIconsWrapper: FC<WfoHeroIconsWrapperProps> = ({
     children,
     className,
-}) => {
-    const { theme } = useOrchestratorTheme();
-
-    return (
-        <div
-            className={className}
-            css={{
-                marginLeft: theme.size.xs,
-                marginRight: theme.size.xs,
-                display: 'flex',
-                alignItems: 'center',
-                height: '100%',
-            }}
-        >
-            {children}
-        </div>
-    );
-};
+}) => (
+    <div
+        className={className}
+        css={{
+            display: 'flex',
+            alignItems: 'center',
+            height: '100%',
+        }}
+    >
+        {children}
+    </div>
+);
 
 export const withWfoHeroIconsWrapper = (Icon: FC<WfoIconProps>) => {
     const wfoHeroIconsWrapperWithIcon = ({

package/src/icons/heroicons/index.ts

@@ -1,4 +1,6 @@
 export * from './WfoHeroIconsWrapper';
 
+export * from './WfoArrowDown';
 export * from './WfoArrowsUpDown';
+export * from './WfoArrowUp';
 export * from './WfoWrench';

package/src/icons/index.ts

@@ -13,9 +13,7 @@ export * from './WfoChevronUp';
 export * from './WfoBoltFill';
 export * from './WfoBoltSlashFill';
 export * from './WfoCubeSolid';
-export * from './WfoArrowNarrowDown';
 export * from './WfoRefresh';
-export * from './WfoArrowNarrowUp';
 export * from './WfoMinusCircleFill';
 export * from './WfoPlayCircle';
 export * from './WfoSearchStrikethrough';

package/src/rtk/endpoints/subscriptionDetail.ts

@@ -1,3 +1,4 @@
+import { NUMBER_OF_ITEMS_REPRESENTING_ALL_ITEMS } from '@/configuration';
 import { orchestratorApi } from '@/rtk';
 import { CacheTagType } from '@/types';
 import {
@@ -50,7 +51,7 @@ fragment SubscriptionDetail on SubscriptionInterface {
         subscriptionInstanceId
         inUseByRelations
     }
-    processes(sortBy: { field: "startedAt", order: ASC }) {
+    processes(first: ${NUMBER_OF_ITEMS_REPRESENTING_ALL_ITEMS}, after: 0, sortBy: { field: "startedAt", order: ASC }) {
         page {
             processId
             lastStatus

package/src/utils/getDefaultTableConfig.ts

@@ -103,6 +103,7 @@ export const getDefaultTableConfig = <T>(storageKey: string) => {
         case SUBSCRIPTIONS_TABLE_LOCAL_STORAGE_KEY:
             const subscriptionColumns: (keyof SubscriptionListItem)[] = [
                 'productName',
+                'customerFullname',
                 'metadata',
             ];
             return getTableConfig<T>(subscriptionColumns as (keyof T)[]);

package/src/icons/WfoArrowNarrowDown.stories.tsx

@@ -1,13 +0,0 @@
-import type { Meta } from '@storybook/react';
-
-import { WfoArrowNarrowDown } from './WfoArrowNarrowDown';
-
-const Story: Meta<typeof WfoArrowNarrowDown> = {
-    component: WfoArrowNarrowDown,
-    title: 'Icons/WfoArrowNarrowDown',
-};
-export default Story;
-
-export const Primary = {
-    args: {},
-};

package/src/icons/WfoArrowNarrowDown.tsx

@@ -1,35 +0,0 @@
-import React, { FC } from 'react';
-
-import { WfoIconProps } from './WfoIconProps';
-
-export const WfoArrowNarrowDown: FC<WfoIconProps> = ({
-    width = 16,
-    height = 20,
-    color = '#000000',
-}) => (
-    <svg
-        width={width}
-        height={height}
-        viewBox="0 0 16 20"
-        version="1.1"
-        xmlns="http://www.w3.org/2000/svg"
-        className="wfoArrowNarrowIcon"
-    >
-        <title>icon/arrow-narrow-down</title>
-        <g
-            id="Symbols"
-            stroke="none"
-            strokeWidth="1"
-            fill="none"
-            fillRule="evenodd"
-        >
-            <g id="icon/arrow-narrow-down" fill={color}>
-                <path
-                    d="M4.29289,9.70711 C3.90237,9.31658 3.90237,8.68342 4.29289,8.29289 L7.29289,5.29289 C7.68342,4.90237 8.3166,4.90237 8.7071,5.29289 L11.7071,8.29289 C12.0976,8.68342 12.0976,9.31658 11.7071,9.70711 C11.3166,10.09763 10.6834,10.09763 10.2929,9.70711 L9,8.41421 L9,14 C9,14.5523 8.5523,15 8,15 C7.44772,15 7,14.5523 7,14 L7,8.41421 L5.70711,9.70711 C5.31658,10.09763 4.68342,10.09763 4.29289,9.70711 Z"
-                    id="Path"
-                    transform="translate(7.999988, 10.000000) rotate(-180.000000) translate(-7.999988, -10.000000) "
-                ></path>
-            </g>
-        </g>
-    </svg>
-);