{t('Description')}
+{t('description')}
+ const HeaderContent = () => {
+ return (
+
+
- )}
+
- {catalogList.length > 0 ? (
-
- {orderedCatalogList && orderedCatalogList.length > 0 ? (
- orderedCatalogList.map((infoItem: ComponentInfo) => {
- if (infoItem?.name && infoItem?.displayName) {
- return (
-
- );
- }
- })
- ) : (
-
- ) : (
-
- )}
+ );
+ };
+
+ const handleQuery = (query: string) => {
+ setQuery(query);
+ };
+
+ return (
+ <>
+ }
+ transparent
+ isSideColumn={false}
+ content={
+ <>
+
+
+ {catalogList.length > 0 ? (
+
+ {orderedCatalogList && orderedCatalogList.length > 0 ? (
+ orderedCatalogList.map((infoItem: ComponentInfo) => {
+ if (infoItem?.name && infoItem?.displayName) {
+ return (
+
+ );
+ }
+ })
+ ) : (
+
+ ) : (
+
+ )}
+
+ >
+ }
+ />
+
{notification?.show && (
{
tooltipContent={t('enabled')}
direction="right"
/>
- ) : isNotHealthy ? (
+ ) : isDisabled || needsConfig ? (
}
+ hoverElement={ }
hoverElementHeight={20}
hoverElementWidth={20}
- tooltipContent={t('notHealthy')}
+ tooltipContent={t('disabled')}
direction="right"
/>
) : (
- isDisabled && (
+ isNotHealthy && (
}
+ hoverElement={ }
hoverElementHeight={20}
hoverElementWidth={20}
- tooltipContent={t('disabled')}
+ tooltipContent={t('notHealthy')}
direction="right"
/>
)
diff --git a/frontend/control-center/src/reducers/data/catalog/index.ts b/frontend/control-center/src/reducers/data/catalog/index.ts
index 65d0cd712c..a0005b6c0c 100644
--- a/frontend/control-center/src/reducers/data/catalog/index.ts
+++ b/frontend/control-center/src/reducers/data/catalog/index.ts
@@ -35,6 +35,15 @@ export default function connectorsReducer(state = defaultState, action: Action):
},
};
}
+ case getType(actions.updateComponentInstallationStatusAction): {
+ return {
+ ...state,
+ [action.payload.identifier]: {
+ ...state[action.payload.identifier],
+ installationStatus: action.payload.metadata.installationStatus,
+ },
+ };
+ }
default:
return state;
}
diff --git a/frontend/inbox/src/components/TopBar/index.tsx b/frontend/inbox/src/components/TopBar/index.tsx
index 50d34cfd4e..8d07ff3588 100644
--- a/frontend/inbox/src/components/TopBar/index.tsx
+++ b/frontend/inbox/src/components/TopBar/index.tsx
@@ -16,7 +16,7 @@ import {ReactComponent as FlagSpain} from 'assets/images/icons/flagSpain.svg';
import {ReactComponent as AiryLogo} from 'assets/images/logo/airyLogo.svg';
import styles from './index.module.scss';
import {env} from '../../env';
-import {useAnimation} from 'render';
+import {useAnimation} from 'components';
import {useTranslation} from 'react-i18next';
import {Language} from 'model/Config';
import i18next from 'i18next';
diff --git a/frontend/inbox/src/pages/Contacts/ContactInformation/index.tsx b/frontend/inbox/src/pages/Contacts/ContactInformation/index.tsx
index 47192d2d94..160adbdb48 100644
--- a/frontend/inbox/src/pages/Contacts/ContactInformation/index.tsx
+++ b/frontend/inbox/src/pages/Contacts/ContactInformation/index.tsx
@@ -4,7 +4,7 @@ import {useTranslation} from 'react-i18next';
import {connect, ConnectedProps} from 'react-redux';
import styles from './index.module.scss';
import ContactDetails from '../../../components/ContactDetails';
-import {useAnimation} from 'render';
+import {useAnimation} from 'components';
import {Contact} from 'model';
import {Avatar} from 'components/message/Avatar';
import {Input} from 'components/inputs/Input';
diff --git a/frontend/inbox/src/pages/Inbox/ConversationListHeader/index.tsx b/frontend/inbox/src/pages/Inbox/ConversationListHeader/index.tsx
index b971bb98da..e9924b842c 100644
--- a/frontend/inbox/src/pages/Inbox/ConversationListHeader/index.tsx
+++ b/frontend/inbox/src/pages/Inbox/ConversationListHeader/index.tsx
@@ -16,7 +16,7 @@ import {cySearchButton, cySearchField, cySearchFieldBackButton} from 'handles';
import Popup from '../QuickFilter/Popup';
import {formatConversationCount} from '../../../services/format/numbers';
import {useTranslation} from 'react-i18next';
-import {useAnimation} from 'render';
+import {useAnimation} from 'components';
const mapDispatchToProps = {
setSearch,
diff --git a/frontend/inbox/src/pages/Inbox/MessageInput/index.module.scss b/frontend/inbox/src/pages/Inbox/MessageInput/index.module.scss
index e52ef61059..2d1fdfbbe5 100644
--- a/frontend/inbox/src/pages/Inbox/MessageInput/index.module.scss
+++ b/frontend/inbox/src/pages/Inbox/MessageInput/index.module.scss
@@ -158,7 +158,7 @@
p {
@include font-s;
- color: var(--color-text-contrast);
+ color: var(--color-tooltip-text-gray);
}
}
diff --git a/frontend/inbox/src/pages/Inbox/Messenger/ConversationMetadata/index.tsx b/frontend/inbox/src/pages/Inbox/Messenger/ConversationMetadata/index.tsx
index 9f5da41801..aff4981f09 100644
--- a/frontend/inbox/src/pages/Inbox/Messenger/ConversationMetadata/index.tsx
+++ b/frontend/inbox/src/pages/Inbox/Messenger/ConversationMetadata/index.tsx
@@ -8,7 +8,7 @@ import {Avatar} from 'components';
import ColorSelector from '../../../../components/ColorSelector';
import Dialog from '../../../../components/Dialog';
import {StateModel, isComponentHealthy} from '../../../../reducers';
-import {useAnimation} from 'render';
+import {useAnimation} from 'components';
import ContactDetails from '../../../../components/ContactDetails';
import styles from './index.module.scss';
diff --git a/infrastructure/helm-chart/charts/ingress-controller/templates/letsencrypt.yaml b/infrastructure/helm-chart/charts/ingress-controller/templates/letsencrypt.yaml
index fe5fa64308..3a435b01cc 100644
--- a/infrastructure/helm-chart/charts/ingress-controller/templates/letsencrypt.yaml
+++ b/infrastructure/helm-chart/charts/ingress-controller/templates/letsencrypt.yaml
@@ -34,7 +34,7 @@ metadata:
annotations:
"helm.sh/hook": "post-install,post-upgrade"
"helm.sh/hook-weight": "11"
- "helm.sh/hook-delete-policy": "hook-succeeded"
+ "helm.sh/hook-delete-policy": "hook-succeeded,hook-failed"
labels:
core.airy.co/managed: "true"
spec:
diff --git a/infrastructure/helm-chart/templates/components/api-components-installer/deployment.yaml b/infrastructure/helm-chart/templates/components/api-components-installer/deployment.yaml
index 0550a1f9d7..fd865b890b 100644
--- a/infrastructure/helm-chart/templates/components/api-components-installer/deployment.yaml
+++ b/infrastructure/helm-chart/templates/components/api-components-installer/deployment.yaml
@@ -23,66 +23,83 @@ spec:
app: {{ .Values.components.api.components.installer.name }}
spec:
containers:
- - name: app
- image: "{{ .Values.global.containerRegistry}}/{{ .Values.components.api.components.installer.image }}:{{ default .Chart.Version }}"
- imagePullPolicy: Always
- args:
- - "-Djdk.tls.client.protocols=TLSv1.2"
- - "-jar"
- - "app_springboot.jar"
- - "-XshowSettings:vm"
- - "-XX:MaxRAMPercentage=70"
- - "-XX:-UseCompressedOops"
- - "-Dsun.net.inetaddr.ttl=0"
- envFrom:
- - configMapRef:
- name: security
- - configMapRef:
- name: kafka-config
- env:
- - name: SERVICE_NAME
- value: {{ .Values.components.api.components.installer.name }}
- - name: KUBERNETES_NAMESPACE
- valueFrom:
- fieldRef:
- apiVersion: v1
- fieldPath: metadata.namespace
- - name: CATALOG_URI
- value: "https://github.com/airyhq/catalog.git"
- - name: CATALOG_DIRECTORY
- value: "/repo"
- - name: POD_NAMESPACE
- valueFrom:
- fieldRef:
- apiVersion: v1
- fieldPath: metadata.namespace
- - name: REQUESTED_CPU
- valueFrom:
- resourceFieldRef:
- containerName: app
- resource: requests.cpu
- - name: LIMIT_CPU
- valueFrom:
- resourceFieldRef:
- containerName: app
- resource: limits.cpu
- - name: LIMIT_MEMORY
- valueFrom:
- resourceFieldRef:
- containerName: app
- resource: limits.memory
- livenessProbe:
- httpGet:
- path: /actuator/health
- port: 8080
- httpHeaders:
- - name: Health-Check
- value: health-check
- initialDelaySeconds: 60
- periodSeconds: 10
- failureThreshold: 3
+ - name: app
+ image: "{{ .Values.global.containerRegistry}}/{{ .Values.components.api.components.installer.image }}:{{ default .Chart.Version }}"
+ imagePullPolicy: Always
+ args:
+ - "-Djdk.tls.client.protocols=TLSv1.2"
+ - "-jar"
+ - "app_springboot.jar"
+ - "-XshowSettings:vm"
+ - "-XX:MaxRAMPercentage=70"
+ - "-XX:-UseCompressedOops"
+ - "-Dsun.net.inetaddr.ttl=0"
+ envFrom:
+ - configMapRef:
+ name: security
+ - configMapRef:
+ name: kafka-config
+ env:
+ - name: SERVICE_NAME
+ value: {{ .Values.components.api.components.installer.name }}
+ - name: KUBERNETES_NAMESPACE
+ valueFrom:
+ fieldRef:
+ apiVersion: v1
+ fieldPath: metadata.namespace
+ - name: CATALOG_URI
+ value: "https://github.com/airyhq/catalog.git"
+ - name: CATALOG_DIRECTORY
+ value: "/repo"
+ - name: POD_NAMESPACE
+ valueFrom:
+ fieldRef:
+ apiVersion: v1
+ fieldPath: metadata.namespace
+ - name: REQUESTED_CPU
+ valueFrom:
+ resourceFieldRef:
+ containerName: app
+ resource: requests.cpu
+ - name: LIMIT_CPU
+ valueFrom:
+ resourceFieldRef:
+ containerName: app
+ resource: limits.cpu
+ - name: LIMIT_MEMORY
+ valueFrom:
+ resourceFieldRef:
+ containerName: app
+ resource: limits.memory
+ livenessProbe:
+ httpGet:
+ path: /actuator/health
+ port: 8080
+ httpHeaders:
+ - name: Health-Check
+ value: health-check
+ initialDelaySeconds: 60
+ periodSeconds: 10
+ failureThreshold: 3
+ resources:
+{{ toYaml .Values.components.api.components.installer.resources | indent 10 }}
+ initContainers:
+ - name: wait
+ image: "{{ .Values.global.busyboxImage }}"
+ imagePullPolicy: IfNotPresent
+ command: ["/bin/sh", "/opt/provisioning/wait-for-minimum-kafkas.sh"]
+ envFrom:
+ - configMapRef:
+ name: kafka-config
+ volumeMounts:
+ - name: provisioning-scripts
+ mountPath: /opt/provisioning
serviceAccountName: {{ .Values.serviceAccount }}
volumes:
- name: {{ .Values.components.api.components.installer.name }}
configMap:
name: {{ .Values.components.api.components.installer.name }}
+ - name: provisioning-scripts
+ configMap:
+ name: provisioning-scripts
+
diff --git a/infrastructure/terraform/modules/core/main.tf b/infrastructure/terraform/modules/core/main.tf
index d2c9a4e734..a2eaef529b 100644
--- a/infrastructure/terraform/modules/core/main.tf
+++ b/infrastructure/terraform/modules/core/main.tf
@@ -3,7 +3,7 @@ data "http" "core_version" {
}
locals {
- core_version = var.core_version != "" ? var.core_version : trimspace(data.http.core_version.body)
+ core_version = var.core_version != "" ? var.core_version : trimspace(data.http.core_version.response_body)
}
resource "helm_release" "airy_core" {
diff --git a/infrastructure/terraform/modules/gcp-gke/main.tf b/infrastructure/terraform/modules/gcp-gke/main.tf
index fee8392fb3..a9c0e579c4 100644
--- a/infrastructure/terraform/modules/gcp-gke/main.tf
+++ b/infrastructure/terraform/modules/gcp-gke/main.tf
@@ -24,7 +24,7 @@ resource "google_container_node_pool" "gke_core_nodes" {
node_locations = var.gke_node_locations
node_config {
- preemptible = true
+ preemptible = false
machine_type = var.gke_instance_type
oauth_scopes = [
diff --git a/lib/java/sources-parser/BUILD b/lib/java/sources-parser/BUILD
new file mode 100644
index 0000000000..ebe9aab956
--- /dev/null
+++ b/lib/java/sources-parser/BUILD
@@ -0,0 +1,13 @@
+load("@com_github_airyhq_bazel_tools//lint:buildifier.bzl", "check_pkg")
+load("//tools/build:java_library.bzl", "custom_java_library")
+
+custom_java_library(
+ name = "sources-parser",
+ srcs = glob(["src/main/java/co/airy/sources-parser/**/*.java"]),
+ visibility = ["//visibility:public"],
+ deps = [
+ "//:jackson",
+ ],
+)
+
+check_pkg(name = "buildifier")
diff --git a/lib/java/sources-parser/src/main/java/co/airy/sources-parser/SourcesParser.java b/lib/java/sources-parser/src/main/java/co/airy/sources-parser/SourcesParser.java
new file mode 100644
index 0000000000..a9fab20510
--- /dev/null
+++ b/lib/java/sources-parser/src/main/java/co/airy/sources-parser/SourcesParser.java
@@ -0,0 +1,60 @@
+package co.airy.sources_parser;
+
+import com.fasterxml.jackson.databind.ObjectMapper;
+import com.fasterxml.jackson.databind.JsonNode;
+import com.fasterxml.jackson.databind.node.JsonNodeFactory;
+import com.fasterxml.jackson.databind.node.ObjectNode;
+import com.fasterxml.jackson.core.JsonProcessingException;
+
+
+public class SourcesParser {
+ private static final ObjectMapper sourceMapper = new ObjectMapper();
+
+ public static String mapContent(String source, String text, JsonNode data) throws JsonProcessingException {
+
+ final ObjectNode node = getNode();
+ switch (source) {
+ case "google": {
+ final ObjectNode representative = getNode();
+ representative.put("representativeType", "BOT");
+ node.set("representative", representative);
+ node.put("text", text);
+ return sourceMapper.writeValueAsString(node);
+ }
+ case "viber": {
+ node.put("text", text);
+ node.put("type", text);
+ return sourceMapper.writeValueAsString(node);
+ }
+ case "chatplugin":
+ case "instagram":
+ case "facebook": {
+ node.put("text", text);
+ if(data != null && !data.isEmpty()){
+ node.put("message", data);
+ }
+ return sourceMapper.writeValueAsString(node);
+ }
+ case "twilio.sms":
+ case "twilio.whatsapp": {
+ node.put("Body", text);
+ return sourceMapper.writeValueAsString(node);
+ }
+ case "whatsapp": {
+ node.put("Body", text);
+ return sourceMapper.writeValueAsString(node);
+ }
+
+ default: {
+ return null;
+ }
+ }
+ };
+
+
+ private static ObjectNode getNode() {
+ final JsonNodeFactory jsonNodeFactory = JsonNodeFactory.instance;
+ return jsonNodeFactory.objectNode();
+ }
+
+}
diff --git a/lib/typescript/assets/scss/colors.scss b/lib/typescript/assets/scss/colors.scss
index 8489f3dc59..eda4dd37d3 100644
--- a/lib/typescript/assets/scss/colors.scss
+++ b/lib/typescript/assets/scss/colors.scss
@@ -24,6 +24,7 @@
--color-template-border-gray: #ccc;
--color-disable-status-config: #737373;
--color-dark-elements-gray: #98a4ab;
+ --color-tooltip-text-gray: #212428;
--color-icons-gray: #a0abb2;
--color-light-gray: #cad5db;
--color-greyish-white: #e8eaea;
@@ -68,7 +69,7 @@ html[data-theme='dark'] {
--color-background-white: #272822;
--color-channel-icon-circle: #272822;
--color-template-highlight: #272822;
- --color-tooltip-gray: #1f201c;
+ --color-tooltip-gray: #e8eaea;
--color-background-blue: #243037;
--color-template-gray: #484848;
--color-shadow-gray: #4d5153;
diff --git a/lib/typescript/components/general/FilterBar/index.module.scss b/lib/typescript/components/general/FilterBar/index.module.scss
new file mode 100644
index 0000000000..0d15571807
--- /dev/null
+++ b/lib/typescript/components/general/FilterBar/index.module.scss
@@ -0,0 +1,77 @@
+@import 'assets/scss/fonts.scss';
+@import 'assets/scss/colors.scss';
+@import 'assets/scss/animations.scss';
+
+.itemSearchContainer {
+ display: flex;
+ flex-direction: row;
+ width: 100%;
+ height: 60px;
+ align-items: center;
+ justify-content: space-between;
+ background: var(--color-background-white);
+ border-top-left-radius: 10px;
+ border-top-right-radius: 10px;
+}
+
+.itemsContainer {
+ display: flex;
+ flex-direction: row;
+}
+
+.item {
+ white-space: nowrap;
+ display: flex;
+ justify-content: center;
+ align-items: center;
+ height: 30px;
+ width: 200px;
+ color: var(--color-text-contrast);
+ &:hover {
+ cursor: pointer;
+ }
+}
+
+.itemActive {
+ position: relative;
+ top: 9.5px;
+ z-index: 10;
+ background-color: var(--color-airy-blue);
+ height: 5px;
+ width: 200px;
+}
+
+.line {
+ height: 1px;
+ width: 100%;
+ background: var(--color-dark-elements-gray);
+ margin-top: -3.5px;
+}
+
+.searchIcon {
+ margin-right: 24px;
+ &:hover {
+ cursor: pointer;
+ }
+}
+
+.searchField {
+ width: 300px;
+ background: var(--color-background-white);
+ border: 1px solid var(--color-airy-blue);
+ border-radius: 4px;
+ height: 32px;
+ margin-right: 24px;
+
+ svg {
+ color: black;
+ }
+}
+
+.animateIn {
+ animation: searchfieldAnimIn 300ms ease;
+}
+
+.animateOut {
+ animation: searchfieldAnimOut 300ms forwards;
+}
diff --git a/lib/typescript/components/general/FilterBar/index.tsx b/lib/typescript/components/general/FilterBar/index.tsx
new file mode 100644
index 0000000000..020e4e22ed
--- /dev/null
+++ b/lib/typescript/components/general/FilterBar/index.tsx
@@ -0,0 +1,103 @@
+import React, {Dispatch, SetStateAction, useCallback, useState} from 'react';
+import styles from './index.module.scss';
+import {ReactComponent as SearchIcon} from 'assets/images/icons/search.svg';
+import {ListenOutsideClick} from '../ListenOutsideClick';
+import {SearchField} from 'components/inputs';
+import {useTranslation} from 'react-i18next';
+import {Tooltip} from 'components/tooltip';
+import {useAnimation} from 'components/services/useAnimation';
+
+export enum FilterTypes {
+ all = 'all',
+ installed = 'installed',
+ comingSoon = 'comingSoon',
+ notInstalled = 'notInstalled',
+}
+
+type FilterBarProps = {
+ currentFilter: FilterTypes;
+ setQuery?: (query: string) => void;
+ items: {
+ name: string;
+ filter: FilterTypes;
+ setFilter: Dispatch>;
+ }[];
+};
+
+export const FilterBar = (props: FilterBarProps) => {
+ const {items, currentFilter} = props;
+ const {t} = useTranslation();
+ const [showSearchField, setShowingSearchField] = useState(false);
+ const [animationActionSearchfield, setAnimationActionSearchfield] = useState(false);
+ const [query, setQuery] = useState('');
+
+ const showSearchFieldToggle = useCallback(() => {
+ useAnimation(showSearchField, setShowingSearchField, setAnimationActionSearchfield, 300);
+ setQuery('');
+ props.setQuery('');
+ }, [showSearchField, setShowingSearchField]);
+
+ const Items = () => {
+ return (
+
+ );
+ };
+
+ return (
+ {catalogPageTitle}
- {catalogList.length > 0 && ( -{t('catalogDescription')}
-
- )}
- {t('nothingFound')}
- {t('noMatchingCatalogs')} -
+
+ )}
+ {t('nothingFound')}
+ {t('noMatchingCatalogs')} +
+ {items.map(item => (
+ {
+ item.setFilter(item.filter);
+ localStorage.setItem('catalogCurrentTypeFilter', item.filter);
+ }}
+ >
+
+ }
+ hoverElementWidth={200}
+ hoverElementHeight={30}
+ tooltipContent={t(`${item.filter}CatalogFilter`)}
+ direction={item.filter === FilterTypes.all ? 'topRight' : 'top'}
+ />
+ ))}
+ {item.name}
+
+
+
+ );
+};
diff --git a/lib/typescript/components/general/index.ts b/lib/typescript/components/general/index.ts
index c36853899a..a65341283e 100644
--- a/lib/typescript/components/general/index.ts
+++ b/lib/typescript/components/general/index.ts
@@ -5,3 +5,4 @@ export * from './AudioClip';
export * from './ConnectorAvatar';
export * from './Pagination';
export * from './TabsPanel';
+export * from './FilterBar';
diff --git a/lib/typescript/components/index.ts b/lib/typescript/components/index.ts
index 6d029e4ed6..145fbccbe1 100644
--- a/lib/typescript/components/index.ts
+++ b/lib/typescript/components/index.ts
@@ -6,3 +6,4 @@ export * from './loaders';
export * from './message';
export * from './tooltip';
export * from './wrapper/ContentWrapper';
+export * from './services/useAnimation';
diff --git a/lib/typescript/components/inputs/Input/style.module.scss b/lib/typescript/components/inputs/Input/style.module.scss
index 9fcfb2f915..65177e054f 100644
--- a/lib/typescript/components/inputs/Input/style.module.scss
+++ b/lib/typescript/components/inputs/Input/style.module.scss
@@ -228,7 +228,7 @@
border-radius: 4px;
margin-left: 4px;
padding: 4px 6px;
- color: var(--color-text-contrast);
+ color: var(--color-tooltip-text-gray);
border-color: transparent var(--color-tooltip-gray) transparent transparent;
}
diff --git a/lib/typescript/render/services/useAnimation.ts b/lib/typescript/components/services/useAnimation.ts
similarity index 100%
rename from lib/typescript/render/services/useAnimation.ts
rename to lib/typescript/components/services/useAnimation.ts
diff --git a/lib/typescript/components/tooltip/index.module.scss b/lib/typescript/components/tooltip/index.module.scss
index 456d501db3..d390a3f19e 100644
--- a/lib/typescript/components/tooltip/index.module.scss
+++ b/lib/typescript/components/tooltip/index.module.scss
@@ -59,13 +59,15 @@
.tooltipContent {
@include font-s-bold;
- display: none;
+ display: flex;
background: var(--color-tooltip-gray);
border-radius: 4px;
padding: 4px 6px;
- color: var(--color-text-contrast);
+ color: var(--color-tooltip-text-gray);
position: relative;
z-index: 4;
+ opacity: 0;
+ visibility: hidden;
}
.hoverElement:hover ~ .tooltipContent.top {
@@ -74,6 +76,9 @@
line-height: 14px;
white-space: nowrap;
margin-bottom: 12px;
+ opacity: 1;
+ transition: opacity 150ms ease-in 150ms;
+ visibility: visible;
}
.hoverElement:hover ~ .tooltipContent.right {
@@ -81,6 +86,9 @@
line-height: 14px;
white-space: nowrap;
margin-left: 12px;
+ opacity: 1;
+ transition: opacity 150ms ease-in 150ms;
+ visibility: visible;
}
.hoverElement:hover ~ .tooltipContent.bottom {
@@ -88,6 +96,9 @@
line-height: 14px;
white-space: nowrap;
margin-top: 12px;
+ opacity: 1;
+ transition: opacity 150ms ease-in 150ms;
+ visibility: visible;
}
.hoverElement:hover ~ .tooltipContent.left {
@@ -95,34 +106,49 @@
line-height: 14px;
white-space: nowrap;
margin-right: 12px;
+ opacity: 1;
+ transition: opacity 150ms ease-in 150ms;
+ visibility: visible;
}
.hoverElement:hover ~ .tooltipContent.topLeft {
display: flex;
line-height: 14px;
white-space: nowrap;
- bottom: 32px;
+ bottom: 38px;
+ opacity: 1;
+ transition: opacity 150ms ease-in 150ms;
+ visibility: visible;
}
.hoverElement:hover ~ .tooltipContent.topRight {
display: flex;
line-height: 14px;
white-space: nowrap;
- bottom: 32px;
+ bottom: 38px;
+ opacity: 1;
+ transition: opacity 150ms ease-in 150ms;
+ visibility: visible;
}
.hoverElement:hover ~ .tooltipContent.bottomLeft {
display: flex;
line-height: 14px;
white-space: nowrap;
- top: 32px;
+ top: 38px;
+ opacity: 1;
+ transition: opacity 150ms ease-in 150ms;
+ visibility: visible;
}
.hoverElement:hover ~ .tooltipContent.bottomRight {
display: flex;
line-height: 14px;
white-space: nowrap;
- top: 32px;
+ top: 38px;
+ opacity: 1;
+ transition: opacity 150ms ease-in 200ms;
+ visibility: visible;
}
.hoverElement ~ .tooltipContent.top::after {
diff --git a/lib/typescript/components/tooltip/index.tsx b/lib/typescript/components/tooltip/index.tsx
index 66f2d1f98f..351f179a4d 100644
--- a/lib/typescript/components/tooltip/index.tsx
+++ b/lib/typescript/components/tooltip/index.tsx
@@ -14,6 +14,7 @@ type TooltipProps = {
bottom?: number;
left?: number;
navigateTo?: string;
+ delay?: number; //in ms
};
export const Tooltip = (props: TooltipProps) => {
@@ -29,6 +30,7 @@ export const Tooltip = (props: TooltipProps) => {
right,
bottom,
left,
+ delay,
} = props;
const navigate = useNavigate();
const leftDirection = direction === 'bottomLeft' || direction === 'topLeft';
@@ -55,15 +57,67 @@ export const Tooltip = (props: TooltipProps) => {
{tooltipContent}
diff --git a/lib/typescript/components/wrapper/ContentWrapper/index.module.scss b/lib/typescript/components/wrapper/ContentWrapper/index.module.scss
index f87d1f30a3..a42fd7d258 100644
--- a/lib/typescript/components/wrapper/ContentWrapper/index.module.scss
+++ b/lib/typescript/components/wrapper/ContentWrapper/index.module.scss
@@ -2,9 +2,7 @@
display: flex;
flex-direction: column;
margin: 88px 16px 0 191px;
- overflow: hidden;
width: 100%;
- height: 100vh;
}
.transparentHeader {
@@ -12,7 +10,6 @@
color: var(--color-text-contrast);
border-top-left-radius: 10px;
border-top-right-radius: 10px;
- overflow: hidden;
width: 100%;
margin-bottom: 48px;
}
@@ -39,8 +36,7 @@
color: var(--color-text-contrast);
border-top-left-radius: 10px;
border-top-right-radius: 10px;
- height: 100%;
- overflow: scroll;
+ height: calc(100% - 170px);
}
.leftOffset {
@@ -53,8 +49,5 @@
border-top-left-radius: 10px;
border-top-right-radius: 10px;
margin: 88px 16px 0 191px;
- height: calc(100vh - 88px);
- overflow-y: scroll;
- overflow-x: hidden;
width: 100%;
}
diff --git a/lib/typescript/components/wrapper/ContentWrapper/index.tsx b/lib/typescript/components/wrapper/ContentWrapper/index.tsx
index 4905b6a6be..f7b99a1e78 100644
--- a/lib/typescript/components/wrapper/ContentWrapper/index.tsx
+++ b/lib/typescript/components/wrapper/ContentWrapper/index.tsx
@@ -5,13 +5,14 @@ type ContentWrapperProps = {
transparent: boolean;
content: React.ReactNode;
header?: React.ReactNode;
+ bar?: React.ReactNode;
variantHeight?: 'medium' | 'big' | 'large';
isSideColumn?: boolean;
sideColumnContent?: React.ReactNode;
};
export const ContentWrapper = (props: ContentWrapperProps) => {
- const {transparent, content, header, variantHeight, isSideColumn, sideColumnContent} = props;
+ const {transparent, content, header, bar, variantHeight, isSideColumn, sideColumnContent} = props;
return (
<>
@@ -23,11 +24,14 @@ export const ContentWrapper = (props: ContentWrapperProps) => {
? styles.headerMedium
: variantHeight === 'big'
? styles.headerBig
- : styles.headerLarge
+ : variantHeight === 'large'
+ ? styles.headerBig
+ : {}
}`}
>
{header}
+
+ {showSearchField ? (
+
+ {
+ setQuery(value);
+ props.setQuery(value);
+ }}
+ />
+
+ ) : (
+
+ }
+ hoverElementWidth={20}
+ hoverElementHeight={20}
+ tooltipContent={t('searchComponent')}
+ direction={'topLeft'}
+ />
+ )}
+
+
+