@atlaskit/teams-public 0.2.0 → 0.3.0

package/dist/es2019/services/base-client/index.js

@@ -0,0 +1,64 @@
+import _defineProperty from "@babel/runtime/helpers/defineProperty";
+export class BaseClient {
+  constructor(config) {
+    _defineProperty(this, "cache", {});
+    _defineProperty(this, "logException", (ex, name, context) => {
+      this.config.logException(ex, name, context);
+    });
+    this.config = config;
+    this.context = {
+      cloudId: null
+    };
+  }
+  setContext(context) {
+    this.context = {
+      ...context,
+      cloudId: context.cloudId || null
+    };
+  }
+  getContext() {
+    return this.context;
+  }
+
+  /**
+   *
+   * @param localValue is used for backwards compatibility
+   * @returns
+   */
+  getOrgId(localValue) {
+    const orgId = localValue || this.getContext().orgId;
+    if (!orgId) {
+      const err = new Error('No orgId set');
+      this.logException(err, 'No orgId set');
+      throw err;
+    }
+    return orgId;
+  }
+  /**
+   *
+   * @param localValue is used for backwards compatibility
+   * @returns
+   */
+  getCloudId(localValue) {
+    return localValue || this.getContext().cloudId;
+  }
+  keyWithContext(key) {
+    var _this$getContext$orgI, _this$getContext$user;
+    return `${this.getContext().cloudId}-${(_this$getContext$orgI = this.getContext().orgId) !== null && _this$getContext$orgI !== void 0 ? _this$getContext$orgI : 'no-org-id'}-${(_this$getContext$user = this.getContext().userId) !== null && _this$getContext$user !== void 0 ? _this$getContext$user : 'no-user-id'}-${key}`;
+  }
+
+  // Default expiration is 5 minutes
+  cacheValue(key, value, expiryMs = 1000 * 60 * 5) {
+    this.cache[this.keyWithContext(key)] = {
+      data: value,
+      expiration: Date.now() + expiryMs
+    };
+  }
+  getCachedValue(key) {
+    const record = this.cache[this.keyWithContext(key)];
+    if (record && record.expiration > Date.now()) {
+      return record.data;
+    }
+    return undefined;
+  }
+}

package/dist/es2019/services/constants.js

@@ -0,0 +1,3 @@
+export const DEFAULT_CONFIG = {
+  stargateRoot: '/gateway/api'
+};

package/dist/es2019/services/graphql-client/index.js

@@ -0,0 +1 @@
+export { BaseGraphQlClient } from './main';

package/dist/es2019/services/graphql-client/main.js

@@ -0,0 +1,23 @@
+import { DefaultError, GraphQLError } from '../../common/utils/error';
+import { BaseClient } from '../base-client';
+import { handleGraphQLRequest } from './utils';
+export class BaseGraphQlClient extends BaseClient {
+  constructor(serviceUrl, config) {
+    super(config);
+    this.serviceUrl = serviceUrl;
+  }
+  setServiceUrl(serviceUrl) {
+    this.serviceUrl = serviceUrl;
+  }
+  async makeGraphQLRequest(body, options = {}) {
+    try {
+      return handleGraphQLRequest(this.serviceUrl, body, options);
+    } catch (error) {
+      if (error instanceof GraphQLError) {
+        throw error;
+      }
+      this.logException(error, 'UnknownError in GraphQLClient.makeGraphQLRequestWithoutRetries');
+      throw new DefaultError({});
+    }
+  }
+}

package/dist/es2019/services/graphql-client/types.js

@@ -0,0 +1 @@
+export {};

package/dist/es2019/services/graphql-client/utils/index.js

@@ -0,0 +1,76 @@
+import { GraphQLError, HttpError } from '../../../common/utils/error';
+import { EXPONENTIAL_BACKOFF_RETRY_POLICY, is5xx, isFetchResponse, withExponentialBackoff } from '../../../common/utils/http';
+import { handleResponse } from '../../../common/utils/status-code-handlers-provider';
+export async function makeGraphQLRequestWithoutRetries(serviceUrl, body, options = {}) {
+  const operationNameQuery = options.operationName ? `?q=${options.operationName}` : '';
+  const errorPolicy = options.errorPolicy || 'none';
+  const url = serviceUrl + operationNameQuery;
+  const request = fetch(url, {
+    method: 'POST',
+    headers: new Headers({
+      'Content-Type': 'application/json'
+    }),
+    credentials: 'include',
+    body: JSON.stringify(body)
+  }).then(res => {
+    if (res.status < 300 || res.status === 400) {
+      return res.json();
+    } else {
+      throw res;
+    }
+  });
+  try {
+    const response = await request;
+    const errors = response.errors;
+    if (errors) {
+      if (errorPolicy === 'none') {
+        throw GraphQLError.from(errors);
+      } else if (errorPolicy === 'all') {
+        // Set timeout will postpone error throwing and de-touch it to another event loop,
+        // so we can return data along with throwing error
+        return new Promise((resolve, reject) => {
+          setTimeout(() => {
+            reject(GraphQLError.from(errors));
+          }, 0);
+        });
+      }
+    }
+    return response.data;
+  } catch (error) {
+    if (error instanceof Response) {
+      return {
+        response: error
+      };
+    }
+    if (Object(error).hasOwnProperty('response')) {
+      throw error;
+    }
+    return error;
+  }
+}
+export async function handleGraphQLRequest(serviceUrl, body, options = {}) {
+  const makeGraphQLRequestWithRetries = withExponentialBackoff(makeGraphQLRequestWithoutRetries, {
+    initial: EXPONENTIAL_BACKOFF_RETRY_POLICY.INITIAL_DELAY,
+    jitter: EXPONENTIAL_BACKOFF_RETRY_POLICY.JITTER,
+    max: EXPONENTIAL_BACKOFF_RETRY_POLICY.MAX_RETRIES,
+    retryIf: data => {
+      return isFetchResponse(data) && is5xx(data.response.status);
+    }
+  });
+  const result = await makeGraphQLRequestWithRetries(serviceUrl, body, options);
+  const response = result === null || result === void 0 ? void 0 : result.response;
+  if (response) {
+    const status = response.status;
+    const statusText = response.statusText;
+    const traceId = response.headers.get('atl-traceid');
+    handleResponse(response);
+    if (status > 400 && status <= 599) {
+      throw new HttpError({
+        message: statusText,
+        status,
+        traceId: traceId !== null && traceId !== void 0 ? traceId : undefined
+      });
+    }
+  }
+  return result;
+}

package/dist/es2019/services/index.js

@@ -0,0 +1 @@
+export { teamsClient, TeamsClient } from './main';

package/dist/es2019/services/main.js

@@ -0,0 +1,39 @@
+import _defineProperty from "@babel/runtime/helpers/defineProperty";
+import { aggClient } from './agg-client';
+export class TeamsClient {
+  constructor(
+  /**
+   * @param {ClientContextProps} context - Context including CloudId & OrgId to be used for all requests
+   */
+  context) {
+    _defineProperty(this, "_aggClient", aggClient);
+    if (context) {
+      this.setContext(context);
+    }
+  }
+
+  /**
+   * Sets the base URL to be used in the client requests
+   * @param {string} baseUrl - The new base URL
+   */
+  setBaseUrl(baseUrl) {
+    this._aggClient.setBaseUrl(baseUrl);
+  }
+
+  /**
+   * Sets context including CloudId & OrgId to be used for all requests
+   */
+  setContext(context) {
+    this._aggClient.setContext(context);
+  }
+
+  /**
+   * Get the containers for a given team
+   * @param {string} teamId
+   * @returns {Promise<TeamContainers>}
+   */
+  async getTeamContainers(teamId) {
+    return this._aggClient.getTeamContainers(teamId);
+  }
+}
+export const teamsClient = new TeamsClient();

package/dist/es2019/services/types.js

@@ -0,0 +1 @@
+export {};

package/dist/es2019/ui/team-containers/add-container-card/index.compiled.css

@@ -3,11 +3,9 @@
 ._12y3e4h9{outline-width:var(--ds-border-width,1px)}
 ._19bvutpp{padding-left:var(--ds-space-150,9pt)}
 ._1qu2gq9o{outline-style:dashed}
-._bfhkqbzx{background-color:var(--ds-surface-sunken,#f7f8f9)}
 ._ca0qutpp{padding-top:var(--ds-space-150,9pt)}
 ._n3tdutpp{padding-bottom:var(--ds-space-150,9pt)}
 ._syaz131l{color:var(--ds-text-subtlest,#626f86)}
 ._u5f3utpp{padding-right:var(--ds-space-150,9pt)}
 ._4cvxmuej:hover{border-color:var(--ds-border,#091e4224)}
-._irr3108i:hover{background-color:var(--ds-surface-hovered,#f1f2f4)}
 ._ksodnqa1:hover{outline-style:solid}

package/dist/es2019/ui/team-containers/add-container-card/index.js

@@ -1,25 +1,32 @@
-/* index.tsx generated by @compiled/babel-plugin v0.36.0 */
+/* index.tsx generated by @compiled/babel-plugin v0.36.1 */
 import "./index.compiled.css";
-import * as React from 'react';
 import { ax, ix } from "@compiled/react/runtime";
+import React, { useState } from 'react';
 import { IconButton } from '@atlaskit/button/new';
 import AddIcon from '@atlaskit/icon/utility/add';
 import { CustomItem } from '@atlaskit/menu';
-import { Box, Inline } from '@atlaskit/primitives';
+import { Box, Inline } from '@atlaskit/primitives/compiled';
 import { getContainerProperties } from '../../../common/utils/get-container-properties';
 const styles = {
-  container: "_2rkoiti9 _bfhkqbzx _ca0qutpp _u5f3utpp _n3tdutpp _19bvutpp _irr3108i",
+  container: "_2rkoiti9 _ca0qutpp _u5f3utpp _n3tdutpp _19bvutpp",
   iconWrapper: "_2rkoiti9 _12y3e4h9 _12jimuej _1qu2gq9o _syaz131l _4cvxmuej _ksodnqa1"
 };
 const CustomItemInner = ({
   children
 }) => {
+  const [hovered, setHovered] = useState(false);
+  const handleMouseEnter = () => setHovered(true);
+  const handleMouseLeave = () => setHovered(false);
   return /*#__PURE__*/React.createElement(Box, {
-    xcss: styles.container
+    backgroundColor: hovered ? 'elevation.surface.hovered' : 'elevation.surface.sunken',
+    xcss: styles.container,
+    onMouseEnter: handleMouseEnter,
+    onMouseLeave: handleMouseLeave
   }, children);
 };
 export const AddContainerCard = ({
-  containerType
+  containerType,
+  onAddAContainerClick
 }) => {
   const {
     description,
@@ -34,7 +41,8 @@ export const AddContainerCard = ({
       appearance: "subtle",
       icon: AddIcon,
       spacing: "compact",
-      testId: "add-icon"
+      testId: "add-icon",
+      onClick: e => onAddAContainerClick(e)
     })),
     component: CustomItemInner,
     description: /*#__PURE__*/React.createElement(Inline, {

package/dist/es2019/ui/team-containers/linked-container-card/index.compiled.css

@@ -9,5 +9,4 @@
 ._ca0qutpp{padding-top:var(--ds-space-150,9pt)}
 ._n3tdutpp{padding-bottom:var(--ds-space-150,9pt)}
 ._syaz1fxt{color:var(--ds-text,#172b4d)}
-._u5f3utpp{padding-right:var(--ds-space-150,9pt)}
-._irr31d5g:hover{background-color:var(--ds-background-input-hovered,#f7f8f9)}
+._u5f3utpp{padding-right:var(--ds-space-150,9pt)}

package/dist/es2019/ui/team-containers/linked-container-card/index.js

@@ -1,38 +1,55 @@
-/* index.tsx generated by @compiled/babel-plugin v0.36.0 */
+/* index.tsx generated by @compiled/babel-plugin v0.36.1 */
 import "./index.compiled.css";
-import * as React from 'react';
 import { ax, ix } from "@compiled/react/runtime";
+import React, { useState } from 'react';
 import { IconButton } from '@atlaskit/button/new';
 import CrossIcon from '@atlaskit/icon/utility/cross';
 import Image from '@atlaskit/image';
 import Link from '@atlaskit/link';
 import { CustomItem } from '@atlaskit/menu';
-import { Box, Inline } from '@atlaskit/primitives';
+import { Box, Inline } from '@atlaskit/primitives/compiled';
 import { getContainerProperties } from '../../../common/utils/get-container-properties';
 const styles = {
-  container: "_2rkoiti9 _1h6dz9xs _12y3e4h9 _12jimuej _1qu2nqa1 _ca0qutpp _u5f3utpp _n3tdutpp _19bvutpp _syaz1fxt _irr31d5g",
+  container: "_2rkoiti9 _1h6dz9xs _12y3e4h9 _12jimuej _1qu2nqa1 _ca0qutpp _u5f3utpp _n3tdutpp _19bvutpp _syaz1fxt",
   iconWrapper: "_1bsb1tcg _4t3i1tcg"
 };
 const CustomItemInner = ({
   children,
-  href
+  href,
+  handleMouseEnter,
+  handleMouseLeave
 }) => {
+  const [hovered, setHovered] = useState(false);
+  const onMouseEnter = () => {
+    handleMouseEnter();
+    setHovered(true);
+  };
+  const onMouseLeave = () => {
+    handleMouseLeave();
+    setHovered(false);
+  };
   return /*#__PURE__*/React.createElement(Link, {
     href: href,
     appearance: "subtle"
   }, /*#__PURE__*/React.createElement(Box, {
-    xcss: styles.container
+    backgroundColor: hovered ? 'color.background.input.hovered' : 'color.background.input',
+    xcss: styles.container,
+    onMouseEnter: onMouseEnter,
+    onMouseLeave: onMouseLeave,
+    testId: "linked-container-card-inner"
   }, children));
 };
 export const LinkedContainerCard = ({
   containerType,
   title,
-  containerIcon
+  containerIcon,
+  link
 }) => {
   const {
     description,
     icon
   } = getContainerProperties(containerType);
+  const [showCloseIcon, setShowCloseIcon] = useState(false);
   return /*#__PURE__*/React.createElement(CustomItem, {
     iconBefore: /*#__PURE__*/React.createElement(Box, {
       xcss: styles.iconWrapper
@@ -44,7 +61,7 @@ export const LinkedContainerCard = ({
     description: /*#__PURE__*/React.createElement(Inline, {
       space: "space.050"
     }, icon, description),
-    iconAfter: /*#__PURE__*/React.createElement(Box, null, /*#__PURE__*/React.createElement(IconButton, {
+    iconAfter: showCloseIcon && /*#__PURE__*/React.createElement(Box, null, /*#__PURE__*/React.createElement(IconButton, {
       label: `disconnect the container ${title}`,
       appearance: "subtle",
       icon: CrossIcon,
@@ -53,7 +70,9 @@ export const LinkedContainerCard = ({
         e.preventDefault();
       }
     })),
-    href: "/",
+    href: link,
+    handleMouseEnter: () => setShowCloseIcon(true),
+    handleMouseLeave: () => setShowCloseIcon(false),
     component: CustomItemInner
   }, title);
 };

package/dist/es2019/ui/team-containers/main.js

@@ -1,24 +1,87 @@
-import React from 'react';
-import { Grid } from '@atlaskit/primitives';
+import React, { useEffect, useState } from 'react';
+import { defineMessages, FormattedMessage } from 'react-intl-next';
+import Button from '@atlaskit/button/new';
+import { Grid, Inline, Stack } from '@atlaskit/primitives';
 import { N0, N90 } from '@atlaskit/theme/colors';
+import { useTeamContainers } from '../../controllers/hooks/use-team-containers';
 import { AddContainerCard } from './add-container-card';
 import { LinkedContainerCard } from './linked-container-card';
+import { TeamContainersSkeleton } from './team-containers-skeleton';
 export const ICON_BACKGROUND = `var(--ds-icon-inverse, ${N0})`;
 export const ICON_COLOR = `var(--ds-icon-subtle, ${N90})`;
-export const TeamContainers = () => {
-  return /*#__PURE__*/React.createElement(Grid, {
+export const MAX_NUMBER_OF_CONTAINERS_TO_SHOW = 4;
+export const TeamContainers = ({
+  teamId,
+  onAddAContainerClick
+}) => {
+  const {
+    teamContainers,
+    loading
+  } = useTeamContainers(teamId);
+  const [showAddJiraContainer, setShowAddJiraContainer] = useState(false);
+  const [showAddConfluenceContainer, setShowAddConfluenceContainer] = useState(false);
+  const [showMore, setShowMore] = useState(false);
+  useEffect(() => {
+    if (teamContainers.length > MAX_NUMBER_OF_CONTAINERS_TO_SHOW) {
+      setShowAddJiraContainer(false);
+      setShowAddConfluenceContainer(false);
+    } else {
+      const hasJiraProject = teamContainers.some(container => container.type === 'JiraProject');
+      const hasConfluenceSpace = teamContainers.some(container => container.type === 'ConfluenceSpace');
+      setShowAddJiraContainer(!hasJiraProject);
+      setShowAddConfluenceContainer(!hasConfluenceSpace);
+    }
+  }, [teamContainers]);
+  const handleShowMore = () => {
+    setShowMore(!showMore);
+  };
+  if (loading) {
+    return /*#__PURE__*/React.createElement(TeamContainersSkeleton, {
+      numberOfContainers: MAX_NUMBER_OF_CONTAINERS_TO_SHOW
+    });
+  }
+  return /*#__PURE__*/React.createElement(Stack, {
+    space: "space.200"
+  }, /*#__PURE__*/React.createElement(Grid, {
     templateColumns: "1fr 1fr",
     gap: "space.100",
     autoFlow: "row"
-  }, /*#__PURE__*/React.createElement(LinkedContainerCard, {
-    containerType: "jira",
-    title: "A Project",
-    containerIcon: "https://avatar-management--avatars.us-west-2.staging.public.atl-paas.net/712020:2981defd-17f1-440e-a377-8c7657b72a6f/4b5b0d55-614b-4e75-858f-9da3d0c7e3f8/128"
-  }), /*#__PURE__*/React.createElement(AddContainerCard, {
-    containerType: "jira"
-  }), /*#__PURE__*/React.createElement(AddContainerCard, {
-    containerType: "confluence"
-  }), /*#__PURE__*/React.createElement(AddContainerCard, {
-    containerType: "loom"
-  }));
-};
+  }, teamContainers.slice(0, MAX_NUMBER_OF_CONTAINERS_TO_SHOW).map(container => {
+    return /*#__PURE__*/React.createElement(LinkedContainerCard, {
+      key: container.id,
+      containerType: container.type,
+      title: container.name,
+      containerIcon: container.icon,
+      link: container.link
+    });
+  }), showAddJiraContainer && /*#__PURE__*/React.createElement(AddContainerCard, {
+    onAddAContainerClick: onAddAContainerClick,
+    containerType: "JiraProject"
+  }), showAddConfluenceContainer && /*#__PURE__*/React.createElement(AddContainerCard, {
+    onAddAContainerClick: onAddAContainerClick,
+    containerType: "ConfluenceSpace"
+  }), showMore && teamContainers.slice(MAX_NUMBER_OF_CONTAINERS_TO_SHOW).map(container => {
+    return /*#__PURE__*/React.createElement(LinkedContainerCard, {
+      key: container.id,
+      containerType: container.type,
+      title: container.name,
+      containerIcon: container.icon,
+      link: container.link
+    });
+  })), teamContainers.length > MAX_NUMBER_OF_CONTAINERS_TO_SHOW && /*#__PURE__*/React.createElement(Inline, null, /*#__PURE__*/React.createElement(Button, {
+    appearance: "subtle",
+    onClick: handleShowMore
+  }, showMore ? /*#__PURE__*/React.createElement(FormattedMessage, messages.showLess) : /*#__PURE__*/React.createElement(FormattedMessage, messages.showMore))));
+};
+const messages = defineMessages({
+  showMore: {
+    id: 'ptc-directory.team-profile-page.team-containers.show-more.non-final',
+    defaultMessage: 'Show more',
+    description: 'Button to show more containers'
+  },
+  showLess: {
+    id: 'ptc-directory.team-profile-page.team-containers.show-less.non-final',
+    defaultMessage: 'Show less',
+    description: 'Button to show less containers'
+  }
+});

package/dist/es2019/ui/team-containers/team-containers-skeleton/index.compiled.css

@@ -0,0 +1,4 @@
+
+._2rko1q77{border-radius:var(--ds-border-radius-400,1pc)}
+._1rjc1b66{padding-block:var(--ds-space-050,4px)}._1bsbvbgk{width:4pc}
+._yv0ewxkt{grid-template-columns:1fr 1fr}

package/dist/es2019/ui/team-containers/team-containers-skeleton/index.js

@@ -0,0 +1,27 @@
+/* index.tsx generated by @compiled/babel-plugin v0.36.1 */
+import "./index.compiled.css";
+import { ax, ix } from "@compiled/react/runtime";
+import React from 'react';
+import { Box, Grid, Stack } from '@atlaskit/primitives/compiled';
+import { LinkedContainerCardSkeleton } from './linked-container-card-skeleton';
+const styles = {
+  containers: "_yv0ewxkt",
+  showMoreButtonSkeleton: "_2rko1q77 _1rjc1b66 _1bsbvbgk"
+};
+export const TeamContainersSkeleton = ({
+  numberOfContainers
+}) => {
+  return /*#__PURE__*/React.createElement(Stack, {
+    space: "space.200",
+    testId: "team-containers-skeleton"
+  }, /*#__PURE__*/React.createElement(Grid, {
+    xcss: styles.containers,
+    gap: "space.100",
+    autoFlow: "row"
+  }, [...Array(numberOfContainers)].map((_, index) => /*#__PURE__*/React.createElement(LinkedContainerCardSkeleton, {
+    key: index
+  }))), /*#__PURE__*/React.createElement(Box, {
+    backgroundColor: "color.background.neutral",
+    xcss: styles.showMoreButtonSkeleton
+  }));
+};

package/dist/es2019/ui/team-containers/team-containers-skeleton/linked-container-card-skeleton/index.compiled.css

@@ -0,0 +1,14 @@
+
+._2rko1q77{border-radius:var(--ds-border-radius-400,1pc)}
+._2rkoglpi{border-radius:var(--ds-border-radius,4px)}
+._2rkoiti9{border-radius:var(--ds-border-radius-100,4px)}
+._1h6dz9xs{border-color:var(--ds-border-accent-gray,#758195)}
+._1rjc1b66{padding-block:var(--ds-space-050,4px)}._12jimuej{outline-color:var(--ds-border,#091e4224)}
+._12y3e4h9{outline-width:var(--ds-border-width,1px)}
+._19bvpxbi{padding-left:var(--ds-space-200,1pc)}
+._1bsbqkoa{width:9pc}
+._1qu2nqa1{outline-style:solid}
+._ca0qpxbi{padding-top:var(--ds-space-200,1pc)}
+._n3tdpxbi{padding-bottom:var(--ds-space-200,1pc)}
+._syaz1fxt{color:var(--ds-text,#172b4d)}
+._u5f3pxbi{padding-right:var(--ds-space-200,1pc)}

package/dist/es2019/ui/team-containers/team-containers-skeleton/linked-container-card-skeleton/index.js

@@ -0,0 +1,31 @@
+/* index.tsx generated by @compiled/babel-plugin v0.36.1 */
+import "./index.compiled.css";
+import { ax, ix } from "@compiled/react/runtime";
+import React from 'react';
+import { Box, Inline, Stack } from '@atlaskit/primitives/compiled';
+const styles = {
+  container: "_2rkoiti9 _1h6dz9xs _12y3e4h9 _12jimuej _1qu2nqa1 _syaz1fxt _ca0qpxbi _u5f3pxbi _n3tdpxbi _19bvpxbi",
+  avatarSkeleton: "_2rkoglpi _ca0qpxbi _u5f3pxbi _n3tdpxbi _19bvpxbi",
+  firstLineSkeleton: "_2rko1q77 _1rjc1b66",
+  secondLineSkeleton: "_2rko1q77 _1rjc1b66 _1bsbqkoa"
+};
+export const LinkedContainerCardSkeleton = () => {
+  return /*#__PURE__*/React.createElement(Box, {
+    xcss: styles.container
+  }, /*#__PURE__*/React.createElement(Inline, {
+    space: "space.100",
+    alignBlock: "center"
+  }, /*#__PURE__*/React.createElement(Box, {
+    backgroundColor: "color.background.neutral",
+    xcss: styles.avatarSkeleton
+  }), /*#__PURE__*/React.createElement(Stack, {
+    space: "space.100",
+    grow: "fill"
+  }, /*#__PURE__*/React.createElement(Box, {
+    backgroundColor: "color.background.neutral",
+    xcss: styles.firstLineSkeleton
+  }), /*#__PURE__*/React.createElement(Box, {
+    backgroundColor: "color.background.neutral",
+    xcss: styles.secondLineSkeleton
+  }))));
+};