From 783f4de7e0ef32f7e94520369953642f9841d1fc Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Nuno=20G=C3=B3is?= Date: Fri, 20 Sep 2024 14:40:39 +0100 Subject: [PATCH 1/7] chore: event timeline tooltips --- src/lib/addons/feature-event-formatter-md.ts | 1 + 1 file changed, 1 insertion(+) diff --git a/src/lib/addons/feature-event-formatter-md.ts b/src/lib/addons/feature-event-formatter-md.ts index d07beb16ad0a..e42e9e107a17 100644 --- a/src/lib/addons/feature-event-formatter-md.ts +++ b/src/lib/addons/feature-event-formatter-md.ts @@ -356,6 +356,7 @@ export class FeatureEventFormatterMd implements FeatureEventFormatter { Mustache.escape = (text) => text; + const label = EVENT_MAP[type]?.label || type; const text = Mustache.render(action, context); const url = path ? `${this.unleashUrl}${Mustache.render(path, context)}` From 59c8d45db302f28e7c05824e129eedb3f311b54e Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Nuno=20G=C3=B3is?= Date: Fri, 20 Sep 2024 15:03:23 +0100 Subject: [PATCH 2/7] test: fix tests --- src/lib/addons/__snapshots__/datadog.test.ts.snap | 12 ++++++------ src/lib/addons/__snapshots__/slack.test.ts.snap | 10 +++++----- src/lib/addons/__snapshots__/teams.test.ts.snap | 10 +++++----- src/lib/addons/__snapshots__/webhook.test.ts.snap | 2 +- src/lib/addons/slack-app.test.ts | 4 ++-- src/lib/addons/slack.test.ts | 4 ++-- src/lib/addons/teams.test.ts | 3 ++- 7 files changed, 23 insertions(+), 22 deletions(-) diff --git a/src/lib/addons/__snapshots__/datadog.test.ts.snap b/src/lib/addons/__snapshots__/datadog.test.ts.snap index 239587319710..2480612ff011 100644 --- a/src/lib/addons/__snapshots__/datadog.test.ts.snap +++ b/src/lib/addons/__snapshots__/datadog.test.ts.snap @@ -1,16 +1,16 @@ // Jest Snapshot v1, https://goo.gl/fbAQLP -exports[`Datadog integration Should call datadog webhook for archived toggle 1`] = `"{"text":"%%% \\n *some@user.com* archived *some-toggle* in project ** \\n %%% ","title":"Unleash notification update"}"`; +exports[`Datadog integration Should call datadog webhook for archived toggle 1`] = `"{"text":"%%% \\n **some@user.com** archived **some-toggle** in project **** \\n %%% ","title":"Unleash notification update"}"`; -exports[`Datadog integration Should call datadog webhook for archived toggle with project info 1`] = `"{"text":"%%% \\n *some@user.com* archived *some-toggle* in project *[some-project](http://some-url.com/projects/some-project)* \\n %%% ","title":"Unleash notification update"}"`; +exports[`Datadog integration Should call datadog webhook for archived toggle with project info 1`] = `"{"text":"%%% \\n **some@user.com** archived **some-toggle** in project **[some-project](http://some-url.com/projects/some-project)** \\n %%% ","title":"Unleash notification update"}"`; -exports[`Datadog integration Should call datadog webhook 1`] = `"{"text":"%%% \\n *some@user.com* created *[some-toggle](http://some-url.com/projects//features/some-toggle)* in project ** \\n %%% ","title":"Unleash notification update"}"`; +exports[`Datadog integration Should call datadog webhook 1`] = `"{"text":"%%% \\n **some@user.com** created **[some-toggle](http://some-url.com/projects//features/some-toggle)** in project **** \\n %%% ","title":"Unleash notification update"}"`; -exports[`Datadog integration Should call datadog webhook for toggled environment 1`] = `"{"text":"%%% \\n *some@user.com* disabled *[some-toggle](http://some-url.com/projects/default/features/some-toggle)* for the *development* environment in project *[default](http://some-url.com/projects/default)* \\n %%% ","title":"Unleash notification update"}"`; +exports[`Datadog integration Should call datadog webhook for toggled environment 1`] = `"{"text":"%%% \\n **some@user.com** disabled **[some-toggle](http://some-url.com/projects/default/features/some-toggle)** for the **development** environment in project **[default](http://some-url.com/projects/default)** \\n %%% ","title":"Unleash notification update"}"`; exports[`Datadog integration Should call datadog webhook with JSON when template set 1`] = `"{"text":"{\\n \\"event\\": \\"feature-created\\",\\n \\"createdBy\\": \\"some@user.com\\"\\n}","title":"Unleash notification update"}"`; -exports[`Datadog integration Should include customHeaders in headers when calling service 1`] = `"{"text":"%%% \\n *some@user.com* disabled *[some-toggle](http://some-url.com/projects/default/features/some-toggle)* for the *development* environment in project *[default](http://some-url.com/projects/default)* \\n %%% ","title":"Unleash notification update"}"`; +exports[`Datadog integration Should include customHeaders in headers when calling service 1`] = `"{"text":"%%% \\n **some@user.com** disabled **[some-toggle](http://some-url.com/projects/default/features/some-toggle)** for the **development** environment in project **[default](http://some-url.com/projects/default)** \\n %%% ","title":"Unleash notification update"}"`; exports[`Datadog integration Should include customHeaders in headers when calling service 2`] = ` { @@ -20,7 +20,7 @@ exports[`Datadog integration Should include customHeaders in headers when callin } `; -exports[`Datadog integration Should not include source_type_name when included in the config 1`] = `"{"text":"%%% \\n *some@user.com* disabled *[some-toggle](http://some-url.com/projects/default/features/some-toggle)* for the *development* environment in project *[default](http://some-url.com/projects/default)* \\n %%% ","title":"Unleash notification update","source_type_name":"my-custom-source-type"}"`; +exports[`Datadog integration Should not include source_type_name when included in the config 1`] = `"{"text":"%%% \\n **some@user.com** disabled **[some-toggle](http://some-url.com/projects/default/features/some-toggle)** for the **development** environment in project **[default](http://some-url.com/projects/default)** \\n %%% ","title":"Unleash notification update","source_type_name":"my-custom-source-type"}"`; exports[`Datadog integration Should not include source_type_name when included in the config 2`] = ` { diff --git a/src/lib/addons/__snapshots__/slack.test.ts.snap b/src/lib/addons/__snapshots__/slack.test.ts.snap index 5a38efeaa1d9..e30b99792a93 100644 --- a/src/lib/addons/__snapshots__/slack.test.ts.snap +++ b/src/lib/addons/__snapshots__/slack.test.ts.snap @@ -1,14 +1,14 @@ // Jest Snapshot v1, https://goo.gl/fbAQLP -exports[`Slack integration Should call slack webhook 1`] = `"{"username":"Unleash","icon_emoji":":unleash:","text":"*some@user.com* created ** in project **","channel":"#general","attachments":[{"actions":[{"name":"featureToggle","text":"Open in Unleash","type":"button","value":"featureToggle","style":"primary","url":"http://some-url.com/projects/default/features/some-toggle"}]}]}"`; +exports[`Slack integration Should call slack webhook 1`] = `"{"username":"Unleash","icon_emoji":":unleash:","text":"**some@user.com** created **** in project ****","channel":"#general","attachments":[{"actions":[{"name":"featureToggle","text":"Open in Unleash","type":"button","value":"featureToggle","style":"primary","url":"http://some-url.com/projects/default/features/some-toggle"}]}]}"`; -exports[`Slack integration Should call slack webhook for archived toggle 1`] = `"{"username":"Unleash","icon_emoji":":unleash:","text":"*some@user.com* archived *some-toggle* in project **","channel":"#general","attachments":[{"actions":[{"name":"featureToggle","text":"Open in Unleash","type":"button","value":"featureToggle","style":"primary","url":"http://some-url.com/projects//archive"}]}]}"`; +exports[`Slack integration Should call slack webhook for archived toggle 1`] = `"{"username":"Unleash","icon_emoji":":unleash:","text":"**some@user.com** archived **some-toggle** in project ****","channel":"#general","attachments":[{"actions":[{"name":"featureToggle","text":"Open in Unleash","type":"button","value":"featureToggle","style":"primary","url":"http://some-url.com/projects//archive"}]}]}"`; -exports[`Slack integration Should call slack webhook for archived toggle with project info 1`] = `"{"username":"Unleash","icon_emoji":":unleash:","text":"*some@user.com* archived *some-toggle* in project **","channel":"#general","attachments":[{"actions":[{"name":"featureToggle","text":"Open in Unleash","type":"button","value":"featureToggle","style":"primary","url":"http://some-url.com/projects/some-project/archive"}]}]}"`; +exports[`Slack integration Should call slack webhook for archived toggle with project info 1`] = `"{"username":"Unleash","icon_emoji":":unleash:","text":"**some@user.com** archived **some-toggle** in project ****","channel":"#general","attachments":[{"actions":[{"name":"featureToggle","text":"Open in Unleash","type":"button","value":"featureToggle","style":"primary","url":"http://some-url.com/projects/some-project/archive"}]}]}"`; -exports[`Slack integration Should call webhook for toggled environment 1`] = `"{"username":"Unleash","icon_emoji":":unleash:","text":"*some@user.com* disabled ** for the *development* environment in project **","channel":"#general","attachments":[{"actions":[{"name":"featureToggle","text":"Open in Unleash","type":"button","value":"featureToggle","style":"primary","url":"http://some-url.com/projects/default/features/some-toggle"}]}]}"`; +exports[`Slack integration Should call webhook for toggled environment 1`] = `"{"username":"Unleash","icon_emoji":":unleash:","text":"**some@user.com** disabled **** for the **development** environment in project ****","channel":"#general","attachments":[{"actions":[{"name":"featureToggle","text":"Open in Unleash","type":"button","value":"featureToggle","style":"primary","url":"http://some-url.com/projects/default/features/some-toggle"}]}]}"`; -exports[`Slack integration Should include custom headers from parameters in call to service 1`] = `"{"username":"Unleash","icon_emoji":":unleash:","text":"*some@user.com* disabled ** for the *development* environment in project **","channel":"#general","attachments":[{"actions":[{"name":"featureToggle","text":"Open in Unleash","type":"button","value":"featureToggle","style":"primary","url":"http://some-url.com/projects/default/features/some-toggle"}]}]}"`; +exports[`Slack integration Should include custom headers from parameters in call to service 1`] = `"{"username":"Unleash","icon_emoji":":unleash:","text":"**some@user.com** disabled **** for the **development** environment in project ****","channel":"#general","attachments":[{"actions":[{"name":"featureToggle","text":"Open in Unleash","type":"button","value":"featureToggle","style":"primary","url":"http://some-url.com/projects/default/features/some-toggle"}]}]}"`; exports[`Slack integration Should include custom headers from parameters in call to service 2`] = ` { diff --git a/src/lib/addons/__snapshots__/teams.test.ts.snap b/src/lib/addons/__snapshots__/teams.test.ts.snap index fe2875686a00..042fc10b98d1 100644 --- a/src/lib/addons/__snapshots__/teams.test.ts.snap +++ b/src/lib/addons/__snapshots__/teams.test.ts.snap @@ -1,14 +1,14 @@ // Jest Snapshot v1, https://goo.gl/fbAQLP -exports[`Teams integration Should call teams webhook 1`] = `"{"themeColor":"0076D7","summary":"Message","sections":[{"activityTitle":"*some@user.com* created *[some-toggle](http://some-url.com/projects//features/some-toggle)* in project **","activitySubtitle":"Unleash notification update","facts":[{"name":"User","value":"some@user.com"},{"name":"Action","value":"feature-created"}]}],"potentialAction":[{"@type":"OpenUri","name":"Go to feature","targets":[{"os":"default","uri":"http://some-url.com/projects//features/some-toggle"}]}]}"`; +exports[`Teams integration Should call teams webhook 1`] = `"{"themeColor":"0076D7","summary":"Message","sections":[{"activityTitle":"**some@user.com** created **[some-toggle](http://some-url.com/projects//features/some-toggle)** in project ****","activitySubtitle":"Unleash notification update","facts":[{"name":"User","value":"some@user.com"},{"name":"Action","value":"feature-created"}]}],"potentialAction":[{"@type":"OpenUri","name":"Go to feature","targets":[{"os":"default","uri":"http://some-url.com/projects//features/some-toggle"}]}]}"`; -exports[`Teams integration Should call teams webhook for archived toggle 1`] = `"{"themeColor":"0076D7","summary":"Message","sections":[{"activityTitle":"*some@user.com* archived *some-toggle* in project **","activitySubtitle":"Unleash notification update","facts":[{"name":"User","value":"some@user.com"},{"name":"Action","value":"feature-archived"}]}],"potentialAction":[{"@type":"OpenUri","name":"Go to feature","targets":[{"os":"default","uri":"http://some-url.com/projects//archive"}]}]}"`; +exports[`Teams integration Should call teams webhook for archived toggle 1`] = `"{"themeColor":"0076D7","summary":"Message","sections":[{"activityTitle":"**some@user.com** archived **some-toggle** in project ****","activitySubtitle":"Unleash notification update","facts":[{"name":"User","value":"some@user.com"},{"name":"Action","value":"feature-archived"}]}],"potentialAction":[{"@type":"OpenUri","name":"Go to feature","targets":[{"os":"default","uri":"http://some-url.com/projects//archive"}]}]}"`; -exports[`Teams integration Should call teams webhook for archived toggle with project info 1`] = `"{"themeColor":"0076D7","summary":"Message","sections":[{"activityTitle":"*some@user.com* archived *some-toggle* in project *[some-project](http://some-url.com/projects/some-project)*","activitySubtitle":"Unleash notification update","facts":[{"name":"User","value":"some@user.com"},{"name":"Action","value":"feature-archived"}]}],"potentialAction":[{"@type":"OpenUri","name":"Go to feature","targets":[{"os":"default","uri":"http://some-url.com/projects/some-project/archive"}]}]}"`; +exports[`Teams integration Should call teams webhook for archived toggle with project info 1`] = `"{"themeColor":"0076D7","summary":"Message","sections":[{"activityTitle":"**some@user.com** archived **some-toggle** in project **[some-project](http://some-url.com/projects/some-project)**","activitySubtitle":"Unleash notification update","facts":[{"name":"User","value":"some@user.com"},{"name":"Action","value":"feature-archived"}]}],"potentialAction":[{"@type":"OpenUri","name":"Go to feature","targets":[{"os":"default","uri":"http://some-url.com/projects/some-project/archive"}]}]}"`; -exports[`Teams integration Should call teams webhook for toggled environment 1`] = `"{"themeColor":"0076D7","summary":"Message","sections":[{"activityTitle":"*some@user.com* disabled *[some-toggle](http://some-url.com/projects/default/features/some-toggle)* for the *development* environment in project *[default](http://some-url.com/projects/default)*","activitySubtitle":"Unleash notification update","facts":[{"name":"User","value":"some@user.com"},{"name":"Action","value":"feature-environment-disabled"}]}],"potentialAction":[{"@type":"OpenUri","name":"Go to feature","targets":[{"os":"default","uri":"http://some-url.com/projects/default/features/some-toggle"}]}]}"`; +exports[`Teams integration Should call teams webhook for toggled environment 1`] = `"{"themeColor":"0076D7","summary":"Message","sections":[{"activityTitle":"**some@user.com** disabled **[some-toggle](http://some-url.com/projects/default/features/some-toggle)** for the **development** environment in project **[default](http://some-url.com/projects/default)**","activitySubtitle":"Unleash notification update","facts":[{"name":"User","value":"some@user.com"},{"name":"Action","value":"feature-environment-disabled"}]}],"potentialAction":[{"@type":"OpenUri","name":"Go to feature","targets":[{"os":"default","uri":"http://some-url.com/projects/default/features/some-toggle"}]}]}"`; -exports[`Teams integration Should include custom headers in call to teams 1`] = `"{"themeColor":"0076D7","summary":"Message","sections":[{"activityTitle":"*some@user.com* disabled *[some-toggle](http://some-url.com/projects/default/features/some-toggle)* for the *development* environment in project *[default](http://some-url.com/projects/default)*","activitySubtitle":"Unleash notification update","facts":[{"name":"User","value":"some@user.com"},{"name":"Action","value":"feature-environment-disabled"}]}],"potentialAction":[{"@type":"OpenUri","name":"Go to feature","targets":[{"os":"default","uri":"http://some-url.com/projects/default/features/some-toggle"}]}]}"`; +exports[`Teams integration Should include custom headers in call to teams 1`] = `"{"themeColor":"0076D7","summary":"Message","sections":[{"activityTitle":"**some@user.com** disabled **[some-toggle](http://some-url.com/projects/default/features/some-toggle)** for the **development** environment in project **[default](http://some-url.com/projects/default)**","activitySubtitle":"Unleash notification update","facts":[{"name":"User","value":"some@user.com"},{"name":"Action","value":"feature-environment-disabled"}]}],"potentialAction":[{"@type":"OpenUri","name":"Go to feature","targets":[{"os":"default","uri":"http://some-url.com/projects/default/features/some-toggle"}]}]}"`; exports[`Teams integration Should include custom headers in call to teams 2`] = ` { diff --git a/src/lib/addons/__snapshots__/webhook.test.ts.snap b/src/lib/addons/__snapshots__/webhook.test.ts.snap index 59d357fd9358..584ee428f757 100644 --- a/src/lib/addons/__snapshots__/webhook.test.ts.snap +++ b/src/lib/addons/__snapshots__/webhook.test.ts.snap @@ -3,6 +3,6 @@ exports[`Webhook integration should allow for eventJson and eventMarkdown in bodyTemplate 1`] = ` "{ "json": "{\\"id\\":1,\\"createdAt\\":\\"2024-07-24T00:00:00.000Z\\",\\"createdByUserId\\":-1337,\\"type\\":\\"feature-created\\",\\"createdBy\\":\\"some@user.com\\",\\"featureName\\":\\"some-toggle\\",\\"project\\":\\"default\\",\\"data\\":{\\"name\\":\\"some-toggle\\",\\"enabled\\":false,\\"strategies\\":[{\\"name\\":\\"default\\"}]}}", - "markdown": "*some@user.com* created *[some-toggle](http://some-url.com/projects/default/features/some-toggle)* in project *[default](http://some-url.com/projects/default)*" + "markdown": "**some@user.com** created **[some-toggle](http://some-url.com/projects/default/features/some-toggle)** in project **[default](http://some-url.com/projects/default)**" }" `; diff --git a/src/lib/addons/slack-app.test.ts b/src/lib/addons/slack-app.test.ts index cac4d98dd88d..056c3642145d 100644 --- a/src/lib/addons/slack-app.test.ts +++ b/src/lib/addons/slack-app.test.ts @@ -10,6 +10,7 @@ import { } from '../types'; import type { IntegrationEventsService } from '../services'; import type { Logger } from '../logger'; +import { bold } from './feature-event-formatter-md'; const slackApiCalls: ChatPostMessageArguments[] = []; @@ -271,8 +272,7 @@ describe('SlackAppAddon', () => { event: serializeDates(eventWith2Tags), details: { channels: ['general', 'another-channel-1', 'another-channel-2'], - message: - '*some@user.com* enabled ** for the *development* environment in project **', + message: `${bold('some@user.com')} enabled ${bold('')} for the ${bold('development')} environment in project ${bold('')}`, }, }); }); diff --git a/src/lib/addons/slack.test.ts b/src/lib/addons/slack.test.ts index eba87005c73e..2e66ff755c53 100644 --- a/src/lib/addons/slack.test.ts +++ b/src/lib/addons/slack.test.ts @@ -17,6 +17,7 @@ import { SYSTEM_USER_ID, } from '../types'; import type { IntegrationEventsService } from '../services'; +import { bold } from './feature-event-formatter-md'; let fetchRetryCalls: any[] = []; const registerEventMock = jest.fn(); @@ -338,8 +339,7 @@ describe('Slack integration', () => { url: parameters.url, channels: ['general'], username: 'Unleash', - message: - '*some@user.com* disabled ** for the *development* environment in project **', + message: `${bold('some@user.com')} disabled ${bold('')} for the ${bold('development')} environment in project ${bold('')}`, }, }); }); diff --git a/src/lib/addons/teams.test.ts b/src/lib/addons/teams.test.ts index 8c1b14c0bb46..f15bf1a63da6 100644 --- a/src/lib/addons/teams.test.ts +++ b/src/lib/addons/teams.test.ts @@ -18,6 +18,7 @@ import { SYSTEM_USER_ID, } from '../types'; import type { IntegrationEventsService } from '../services'; +import { bold } from './feature-event-formatter-md'; let fetchRetryCalls: any[]; const registerEventMock = jest.fn(); @@ -231,7 +232,7 @@ describe('Teams integration', () => { summary: 'Message', sections: [ { - activityTitle: `*${event.createdBy}* disabled *[${event.featureName}](${ARGS.unleashUrl}/projects/${event.project}/features/${event.featureName})* for the *${event.environment}* environment in project *[${event.project}](${ARGS.unleashUrl}/projects/${event.project})*`, + activityTitle: `${bold(event.createdBy)} disabled ${bold(`[${event.featureName}](${ARGS.unleashUrl}/projects/${event.project}/features/${event.featureName})`)} for the ${bold(event.environment)} environment in project ${bold(`[${event.project}](${ARGS.unleashUrl}/projects/${event.project})`)}`, activitySubtitle: `Unleash notification update`, facts: [ { From 370cb755557ff13f9ecf698628ec8023efe0a4f8 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Nuno=20G=C3=B3is?= Date: Mon, 23 Sep 2024 15:42:56 +0100 Subject: [PATCH 3/7] chore: revert bold implementation --- src/lib/addons/__snapshots__/datadog.test.ts.snap | 12 ++++++------ src/lib/addons/__snapshots__/slack.test.ts.snap | 10 +++++----- src/lib/addons/__snapshots__/teams.test.ts.snap | 10 +++++----- src/lib/addons/__snapshots__/webhook.test.ts.snap | 2 +- src/lib/addons/slack-app.test.ts | 4 ++-- src/lib/addons/slack.test.ts | 4 ++-- src/lib/addons/teams.test.ts | 3 +-- 7 files changed, 22 insertions(+), 23 deletions(-) diff --git a/src/lib/addons/__snapshots__/datadog.test.ts.snap b/src/lib/addons/__snapshots__/datadog.test.ts.snap index 2480612ff011..239587319710 100644 --- a/src/lib/addons/__snapshots__/datadog.test.ts.snap +++ b/src/lib/addons/__snapshots__/datadog.test.ts.snap @@ -1,16 +1,16 @@ // Jest Snapshot v1, https://goo.gl/fbAQLP -exports[`Datadog integration Should call datadog webhook for archived toggle 1`] = `"{"text":"%%% \\n **some@user.com** archived **some-toggle** in project **** \\n %%% ","title":"Unleash notification update"}"`; +exports[`Datadog integration Should call datadog webhook for archived toggle 1`] = `"{"text":"%%% \\n *some@user.com* archived *some-toggle* in project ** \\n %%% ","title":"Unleash notification update"}"`; -exports[`Datadog integration Should call datadog webhook for archived toggle with project info 1`] = `"{"text":"%%% \\n **some@user.com** archived **some-toggle** in project **[some-project](http://some-url.com/projects/some-project)** \\n %%% ","title":"Unleash notification update"}"`; +exports[`Datadog integration Should call datadog webhook for archived toggle with project info 1`] = `"{"text":"%%% \\n *some@user.com* archived *some-toggle* in project *[some-project](http://some-url.com/projects/some-project)* \\n %%% ","title":"Unleash notification update"}"`; -exports[`Datadog integration Should call datadog webhook 1`] = `"{"text":"%%% \\n **some@user.com** created **[some-toggle](http://some-url.com/projects//features/some-toggle)** in project **** \\n %%% ","title":"Unleash notification update"}"`; +exports[`Datadog integration Should call datadog webhook 1`] = `"{"text":"%%% \\n *some@user.com* created *[some-toggle](http://some-url.com/projects//features/some-toggle)* in project ** \\n %%% ","title":"Unleash notification update"}"`; -exports[`Datadog integration Should call datadog webhook for toggled environment 1`] = `"{"text":"%%% \\n **some@user.com** disabled **[some-toggle](http://some-url.com/projects/default/features/some-toggle)** for the **development** environment in project **[default](http://some-url.com/projects/default)** \\n %%% ","title":"Unleash notification update"}"`; +exports[`Datadog integration Should call datadog webhook for toggled environment 1`] = `"{"text":"%%% \\n *some@user.com* disabled *[some-toggle](http://some-url.com/projects/default/features/some-toggle)* for the *development* environment in project *[default](http://some-url.com/projects/default)* \\n %%% ","title":"Unleash notification update"}"`; exports[`Datadog integration Should call datadog webhook with JSON when template set 1`] = `"{"text":"{\\n \\"event\\": \\"feature-created\\",\\n \\"createdBy\\": \\"some@user.com\\"\\n}","title":"Unleash notification update"}"`; -exports[`Datadog integration Should include customHeaders in headers when calling service 1`] = `"{"text":"%%% \\n **some@user.com** disabled **[some-toggle](http://some-url.com/projects/default/features/some-toggle)** for the **development** environment in project **[default](http://some-url.com/projects/default)** \\n %%% ","title":"Unleash notification update"}"`; +exports[`Datadog integration Should include customHeaders in headers when calling service 1`] = `"{"text":"%%% \\n *some@user.com* disabled *[some-toggle](http://some-url.com/projects/default/features/some-toggle)* for the *development* environment in project *[default](http://some-url.com/projects/default)* \\n %%% ","title":"Unleash notification update"}"`; exports[`Datadog integration Should include customHeaders in headers when calling service 2`] = ` { @@ -20,7 +20,7 @@ exports[`Datadog integration Should include customHeaders in headers when callin } `; -exports[`Datadog integration Should not include source_type_name when included in the config 1`] = `"{"text":"%%% \\n **some@user.com** disabled **[some-toggle](http://some-url.com/projects/default/features/some-toggle)** for the **development** environment in project **[default](http://some-url.com/projects/default)** \\n %%% ","title":"Unleash notification update","source_type_name":"my-custom-source-type"}"`; +exports[`Datadog integration Should not include source_type_name when included in the config 1`] = `"{"text":"%%% \\n *some@user.com* disabled *[some-toggle](http://some-url.com/projects/default/features/some-toggle)* for the *development* environment in project *[default](http://some-url.com/projects/default)* \\n %%% ","title":"Unleash notification update","source_type_name":"my-custom-source-type"}"`; exports[`Datadog integration Should not include source_type_name when included in the config 2`] = ` { diff --git a/src/lib/addons/__snapshots__/slack.test.ts.snap b/src/lib/addons/__snapshots__/slack.test.ts.snap index e30b99792a93..5a38efeaa1d9 100644 --- a/src/lib/addons/__snapshots__/slack.test.ts.snap +++ b/src/lib/addons/__snapshots__/slack.test.ts.snap @@ -1,14 +1,14 @@ // Jest Snapshot v1, https://goo.gl/fbAQLP -exports[`Slack integration Should call slack webhook 1`] = `"{"username":"Unleash","icon_emoji":":unleash:","text":"**some@user.com** created **** in project ****","channel":"#general","attachments":[{"actions":[{"name":"featureToggle","text":"Open in Unleash","type":"button","value":"featureToggle","style":"primary","url":"http://some-url.com/projects/default/features/some-toggle"}]}]}"`; +exports[`Slack integration Should call slack webhook 1`] = `"{"username":"Unleash","icon_emoji":":unleash:","text":"*some@user.com* created ** in project **","channel":"#general","attachments":[{"actions":[{"name":"featureToggle","text":"Open in Unleash","type":"button","value":"featureToggle","style":"primary","url":"http://some-url.com/projects/default/features/some-toggle"}]}]}"`; -exports[`Slack integration Should call slack webhook for archived toggle 1`] = `"{"username":"Unleash","icon_emoji":":unleash:","text":"**some@user.com** archived **some-toggle** in project ****","channel":"#general","attachments":[{"actions":[{"name":"featureToggle","text":"Open in Unleash","type":"button","value":"featureToggle","style":"primary","url":"http://some-url.com/projects//archive"}]}]}"`; +exports[`Slack integration Should call slack webhook for archived toggle 1`] = `"{"username":"Unleash","icon_emoji":":unleash:","text":"*some@user.com* archived *some-toggle* in project **","channel":"#general","attachments":[{"actions":[{"name":"featureToggle","text":"Open in Unleash","type":"button","value":"featureToggle","style":"primary","url":"http://some-url.com/projects//archive"}]}]}"`; -exports[`Slack integration Should call slack webhook for archived toggle with project info 1`] = `"{"username":"Unleash","icon_emoji":":unleash:","text":"**some@user.com** archived **some-toggle** in project ****","channel":"#general","attachments":[{"actions":[{"name":"featureToggle","text":"Open in Unleash","type":"button","value":"featureToggle","style":"primary","url":"http://some-url.com/projects/some-project/archive"}]}]}"`; +exports[`Slack integration Should call slack webhook for archived toggle with project info 1`] = `"{"username":"Unleash","icon_emoji":":unleash:","text":"*some@user.com* archived *some-toggle* in project **","channel":"#general","attachments":[{"actions":[{"name":"featureToggle","text":"Open in Unleash","type":"button","value":"featureToggle","style":"primary","url":"http://some-url.com/projects/some-project/archive"}]}]}"`; -exports[`Slack integration Should call webhook for toggled environment 1`] = `"{"username":"Unleash","icon_emoji":":unleash:","text":"**some@user.com** disabled **** for the **development** environment in project ****","channel":"#general","attachments":[{"actions":[{"name":"featureToggle","text":"Open in Unleash","type":"button","value":"featureToggle","style":"primary","url":"http://some-url.com/projects/default/features/some-toggle"}]}]}"`; +exports[`Slack integration Should call webhook for toggled environment 1`] = `"{"username":"Unleash","icon_emoji":":unleash:","text":"*some@user.com* disabled ** for the *development* environment in project **","channel":"#general","attachments":[{"actions":[{"name":"featureToggle","text":"Open in Unleash","type":"button","value":"featureToggle","style":"primary","url":"http://some-url.com/projects/default/features/some-toggle"}]}]}"`; -exports[`Slack integration Should include custom headers from parameters in call to service 1`] = `"{"username":"Unleash","icon_emoji":":unleash:","text":"**some@user.com** disabled **** for the **development** environment in project ****","channel":"#general","attachments":[{"actions":[{"name":"featureToggle","text":"Open in Unleash","type":"button","value":"featureToggle","style":"primary","url":"http://some-url.com/projects/default/features/some-toggle"}]}]}"`; +exports[`Slack integration Should include custom headers from parameters in call to service 1`] = `"{"username":"Unleash","icon_emoji":":unleash:","text":"*some@user.com* disabled ** for the *development* environment in project **","channel":"#general","attachments":[{"actions":[{"name":"featureToggle","text":"Open in Unleash","type":"button","value":"featureToggle","style":"primary","url":"http://some-url.com/projects/default/features/some-toggle"}]}]}"`; exports[`Slack integration Should include custom headers from parameters in call to service 2`] = ` { diff --git a/src/lib/addons/__snapshots__/teams.test.ts.snap b/src/lib/addons/__snapshots__/teams.test.ts.snap index 042fc10b98d1..fe2875686a00 100644 --- a/src/lib/addons/__snapshots__/teams.test.ts.snap +++ b/src/lib/addons/__snapshots__/teams.test.ts.snap @@ -1,14 +1,14 @@ // Jest Snapshot v1, https://goo.gl/fbAQLP -exports[`Teams integration Should call teams webhook 1`] = `"{"themeColor":"0076D7","summary":"Message","sections":[{"activityTitle":"**some@user.com** created **[some-toggle](http://some-url.com/projects//features/some-toggle)** in project ****","activitySubtitle":"Unleash notification update","facts":[{"name":"User","value":"some@user.com"},{"name":"Action","value":"feature-created"}]}],"potentialAction":[{"@type":"OpenUri","name":"Go to feature","targets":[{"os":"default","uri":"http://some-url.com/projects//features/some-toggle"}]}]}"`; +exports[`Teams integration Should call teams webhook 1`] = `"{"themeColor":"0076D7","summary":"Message","sections":[{"activityTitle":"*some@user.com* created *[some-toggle](http://some-url.com/projects//features/some-toggle)* in project **","activitySubtitle":"Unleash notification update","facts":[{"name":"User","value":"some@user.com"},{"name":"Action","value":"feature-created"}]}],"potentialAction":[{"@type":"OpenUri","name":"Go to feature","targets":[{"os":"default","uri":"http://some-url.com/projects//features/some-toggle"}]}]}"`; -exports[`Teams integration Should call teams webhook for archived toggle 1`] = `"{"themeColor":"0076D7","summary":"Message","sections":[{"activityTitle":"**some@user.com** archived **some-toggle** in project ****","activitySubtitle":"Unleash notification update","facts":[{"name":"User","value":"some@user.com"},{"name":"Action","value":"feature-archived"}]}],"potentialAction":[{"@type":"OpenUri","name":"Go to feature","targets":[{"os":"default","uri":"http://some-url.com/projects//archive"}]}]}"`; +exports[`Teams integration Should call teams webhook for archived toggle 1`] = `"{"themeColor":"0076D7","summary":"Message","sections":[{"activityTitle":"*some@user.com* archived *some-toggle* in project **","activitySubtitle":"Unleash notification update","facts":[{"name":"User","value":"some@user.com"},{"name":"Action","value":"feature-archived"}]}],"potentialAction":[{"@type":"OpenUri","name":"Go to feature","targets":[{"os":"default","uri":"http://some-url.com/projects//archive"}]}]}"`; -exports[`Teams integration Should call teams webhook for archived toggle with project info 1`] = `"{"themeColor":"0076D7","summary":"Message","sections":[{"activityTitle":"**some@user.com** archived **some-toggle** in project **[some-project](http://some-url.com/projects/some-project)**","activitySubtitle":"Unleash notification update","facts":[{"name":"User","value":"some@user.com"},{"name":"Action","value":"feature-archived"}]}],"potentialAction":[{"@type":"OpenUri","name":"Go to feature","targets":[{"os":"default","uri":"http://some-url.com/projects/some-project/archive"}]}]}"`; +exports[`Teams integration Should call teams webhook for archived toggle with project info 1`] = `"{"themeColor":"0076D7","summary":"Message","sections":[{"activityTitle":"*some@user.com* archived *some-toggle* in project *[some-project](http://some-url.com/projects/some-project)*","activitySubtitle":"Unleash notification update","facts":[{"name":"User","value":"some@user.com"},{"name":"Action","value":"feature-archived"}]}],"potentialAction":[{"@type":"OpenUri","name":"Go to feature","targets":[{"os":"default","uri":"http://some-url.com/projects/some-project/archive"}]}]}"`; -exports[`Teams integration Should call teams webhook for toggled environment 1`] = `"{"themeColor":"0076D7","summary":"Message","sections":[{"activityTitle":"**some@user.com** disabled **[some-toggle](http://some-url.com/projects/default/features/some-toggle)** for the **development** environment in project **[default](http://some-url.com/projects/default)**","activitySubtitle":"Unleash notification update","facts":[{"name":"User","value":"some@user.com"},{"name":"Action","value":"feature-environment-disabled"}]}],"potentialAction":[{"@type":"OpenUri","name":"Go to feature","targets":[{"os":"default","uri":"http://some-url.com/projects/default/features/some-toggle"}]}]}"`; +exports[`Teams integration Should call teams webhook for toggled environment 1`] = `"{"themeColor":"0076D7","summary":"Message","sections":[{"activityTitle":"*some@user.com* disabled *[some-toggle](http://some-url.com/projects/default/features/some-toggle)* for the *development* environment in project *[default](http://some-url.com/projects/default)*","activitySubtitle":"Unleash notification update","facts":[{"name":"User","value":"some@user.com"},{"name":"Action","value":"feature-environment-disabled"}]}],"potentialAction":[{"@type":"OpenUri","name":"Go to feature","targets":[{"os":"default","uri":"http://some-url.com/projects/default/features/some-toggle"}]}]}"`; -exports[`Teams integration Should include custom headers in call to teams 1`] = `"{"themeColor":"0076D7","summary":"Message","sections":[{"activityTitle":"**some@user.com** disabled **[some-toggle](http://some-url.com/projects/default/features/some-toggle)** for the **development** environment in project **[default](http://some-url.com/projects/default)**","activitySubtitle":"Unleash notification update","facts":[{"name":"User","value":"some@user.com"},{"name":"Action","value":"feature-environment-disabled"}]}],"potentialAction":[{"@type":"OpenUri","name":"Go to feature","targets":[{"os":"default","uri":"http://some-url.com/projects/default/features/some-toggle"}]}]}"`; +exports[`Teams integration Should include custom headers in call to teams 1`] = `"{"themeColor":"0076D7","summary":"Message","sections":[{"activityTitle":"*some@user.com* disabled *[some-toggle](http://some-url.com/projects/default/features/some-toggle)* for the *development* environment in project *[default](http://some-url.com/projects/default)*","activitySubtitle":"Unleash notification update","facts":[{"name":"User","value":"some@user.com"},{"name":"Action","value":"feature-environment-disabled"}]}],"potentialAction":[{"@type":"OpenUri","name":"Go to feature","targets":[{"os":"default","uri":"http://some-url.com/projects/default/features/some-toggle"}]}]}"`; exports[`Teams integration Should include custom headers in call to teams 2`] = ` { diff --git a/src/lib/addons/__snapshots__/webhook.test.ts.snap b/src/lib/addons/__snapshots__/webhook.test.ts.snap index 584ee428f757..59d357fd9358 100644 --- a/src/lib/addons/__snapshots__/webhook.test.ts.snap +++ b/src/lib/addons/__snapshots__/webhook.test.ts.snap @@ -3,6 +3,6 @@ exports[`Webhook integration should allow for eventJson and eventMarkdown in bodyTemplate 1`] = ` "{ "json": "{\\"id\\":1,\\"createdAt\\":\\"2024-07-24T00:00:00.000Z\\",\\"createdByUserId\\":-1337,\\"type\\":\\"feature-created\\",\\"createdBy\\":\\"some@user.com\\",\\"featureName\\":\\"some-toggle\\",\\"project\\":\\"default\\",\\"data\\":{\\"name\\":\\"some-toggle\\",\\"enabled\\":false,\\"strategies\\":[{\\"name\\":\\"default\\"}]}}", - "markdown": "**some@user.com** created **[some-toggle](http://some-url.com/projects/default/features/some-toggle)** in project **[default](http://some-url.com/projects/default)**" + "markdown": "*some@user.com* created *[some-toggle](http://some-url.com/projects/default/features/some-toggle)* in project *[default](http://some-url.com/projects/default)*" }" `; diff --git a/src/lib/addons/slack-app.test.ts b/src/lib/addons/slack-app.test.ts index 056c3642145d..cac4d98dd88d 100644 --- a/src/lib/addons/slack-app.test.ts +++ b/src/lib/addons/slack-app.test.ts @@ -10,7 +10,6 @@ import { } from '../types'; import type { IntegrationEventsService } from '../services'; import type { Logger } from '../logger'; -import { bold } from './feature-event-formatter-md'; const slackApiCalls: ChatPostMessageArguments[] = []; @@ -272,7 +271,8 @@ describe('SlackAppAddon', () => { event: serializeDates(eventWith2Tags), details: { channels: ['general', 'another-channel-1', 'another-channel-2'], - message: `${bold('some@user.com')} enabled ${bold('')} for the ${bold('development')} environment in project ${bold('')}`, + message: + '*some@user.com* enabled ** for the *development* environment in project **', }, }); }); diff --git a/src/lib/addons/slack.test.ts b/src/lib/addons/slack.test.ts index 2e66ff755c53..eba87005c73e 100644 --- a/src/lib/addons/slack.test.ts +++ b/src/lib/addons/slack.test.ts @@ -17,7 +17,6 @@ import { SYSTEM_USER_ID, } from '../types'; import type { IntegrationEventsService } from '../services'; -import { bold } from './feature-event-formatter-md'; let fetchRetryCalls: any[] = []; const registerEventMock = jest.fn(); @@ -339,7 +338,8 @@ describe('Slack integration', () => { url: parameters.url, channels: ['general'], username: 'Unleash', - message: `${bold('some@user.com')} disabled ${bold('')} for the ${bold('development')} environment in project ${bold('')}`, + message: + '*some@user.com* disabled ** for the *development* environment in project **', }, }); }); diff --git a/src/lib/addons/teams.test.ts b/src/lib/addons/teams.test.ts index f15bf1a63da6..8c1b14c0bb46 100644 --- a/src/lib/addons/teams.test.ts +++ b/src/lib/addons/teams.test.ts @@ -18,7 +18,6 @@ import { SYSTEM_USER_ID, } from '../types'; import type { IntegrationEventsService } from '../services'; -import { bold } from './feature-event-formatter-md'; let fetchRetryCalls: any[]; const registerEventMock = jest.fn(); @@ -232,7 +231,7 @@ describe('Teams integration', () => { summary: 'Message', sections: [ { - activityTitle: `${bold(event.createdBy)} disabled ${bold(`[${event.featureName}](${ARGS.unleashUrl}/projects/${event.project}/features/${event.featureName})`)} for the ${bold(event.environment)} environment in project ${bold(`[${event.project}](${ARGS.unleashUrl}/projects/${event.project})`)}`, + activityTitle: `*${event.createdBy}* disabled *[${event.featureName}](${ARGS.unleashUrl}/projects/${event.project}/features/${event.featureName})* for the *${event.environment}* environment in project *[${event.project}](${ARGS.unleashUrl}/projects/${event.project})*`, activitySubtitle: `Unleash notification update`, facts: [ { From 746986c533ed89051120c9035f31c1346c99d8ea Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Nuno=20G=C3=B3is?= Date: Tue, 24 Sep 2024 08:49:32 +0100 Subject: [PATCH 4/7] chore: event timeline header placement --- .../component/events/EventLog/EventLog.tsx | 18 +---- .../layout/MainLayout/MainLayout.tsx | 72 +++++++++++++++---- frontend/src/component/menu/Header/Header.tsx | 33 ++++++++- 3 files changed, 90 insertions(+), 33 deletions(-) diff --git a/frontend/src/component/events/EventLog/EventLog.tsx b/frontend/src/component/events/EventLog/EventLog.tsx index ab7d5c6dd952..a14f3d050672 100644 --- a/frontend/src/component/events/EventLog/EventLog.tsx +++ b/frontend/src/component/events/EventLog/EventLog.tsx @@ -1,4 +1,4 @@ -import { Switch, FormControlLabel, useMediaQuery, Box } from '@mui/material'; +import { Switch, FormControlLabel, useMediaQuery } from '@mui/material'; import EventJson from 'component/events/EventJson/EventJson'; import { PageContent } from 'component/common/PageContent/PageContent'; import { PageHeader } from 'component/common/PageHeader/PageHeader'; @@ -15,7 +15,6 @@ import { useEventLogSearch } from './useEventLogSearch'; import { StickyPaginationBar } from 'component/common/Table/StickyPaginationBar/StickyPaginationBar'; import { EventActions } from './EventActions'; import useLoading from 'hooks/useLoading'; -import { EventTimeline } from '../EventTimeline/EventTimeline'; interface IEventLogProps { title: string; @@ -134,21 +133,6 @@ export const EventLog = ({ title, project, feature }: IEventLogProps) => { return ( <> - ({ - borderRadius: theme.shape.borderRadius, - padding: theme.spacing(2), - marginBottom: theme.spacing(2), - backgroundColor: theme.palette.background.paper, - })} - > - - - } - /> ({ const NewMainLayoutContent = styled(Grid)(({ theme }) => ({ minWidth: 0, // this is a fix for overflowing flex - width: '100%', maxWidth: '1512px', margin: '0 auto', paddingLeft: theme.spacing(2), @@ -106,6 +107,22 @@ const MainLayoutContentContainer = styled('div')(({ theme }) => ({ zIndex: 200, })); +const timelineAnimations = { + start: { + maxHeight: 0, + opacity: 0, + transition: 'max-height 0.5s ease-in-out, opacity 0.5s ease-in-out', + }, + enter: { + maxHeight: '100vh', + opacity: 1, + }, + leave: { + maxHeight: 0, + opacity: 0, + }, +}; + export const MainLayout = forwardRef( ({ children }, ref) => { const { uiConfig } = useUiConfig(); @@ -113,6 +130,7 @@ export const MainLayout = forwardRef( const { isChangeRequestConfiguredInAnyEnv } = useChangeRequestsEnabled( projectId || '', ); + const [showTimeline, setShowTimeline] = useState(false); const sidebarNavigationEnabled = useUiFlag('navigationSidebar'); const StyledMainLayoutContent = sidebarNavigationEnabled @@ -126,7 +144,12 @@ export const MainLayout = forwardRef( } + show={ +
+ } elseShow={} /> @@ -154,18 +177,39 @@ export const MainLayout = forwardRef( show={} /> - - - - - {children} - - + + ({ + padding: theme.spacing(2), + backgroundColor: + theme.palette.background.paper, + })} + > + + + + + + + + + {children} + + + ({ backgroundColor: theme.palette.background.paper, @@ -96,7 +97,12 @@ const StyledIconButton = styled(IconButton)<{ }, })); -const Header: VFC = () => { +interface IHeaderProps { + showTimeline: boolean; + setShowTimeline: (show: boolean) => void; +} + +const Header = ({ showTimeline, setShowTimeline }: IHeaderProps) => { const { onSetThemeMode, themeMode } = useThemeMode(); const theme = useTheme(); @@ -106,6 +112,7 @@ const Header: VFC = () => { const [openDrawer, setOpenDrawer] = useState(false); const toggleDrawer = () => setOpenDrawer((prev) => !prev); const celebatoryUnleash = useUiFlag('celebrateUnleash'); + const eventTimeline = useUiFlag('eventTimeline') && !isOss(); const routes = getRoutes(); const adminRoutes = useAdminRoutes(); @@ -180,6 +187,28 @@ const Header: VFC = () => { + + + setShowTimeline(!showTimeline) + } + size='large' + > + + + + } + /> Date: Tue, 24 Sep 2024 10:49:24 +0100 Subject: [PATCH 5/7] fix: remaining variable after merge --- src/lib/addons/feature-event-formatter-md.ts | 1 - 1 file changed, 1 deletion(-) diff --git a/src/lib/addons/feature-event-formatter-md.ts b/src/lib/addons/feature-event-formatter-md.ts index e42e9e107a17..d07beb16ad0a 100644 --- a/src/lib/addons/feature-event-formatter-md.ts +++ b/src/lib/addons/feature-event-formatter-md.ts @@ -356,7 +356,6 @@ export class FeatureEventFormatterMd implements FeatureEventFormatter { Mustache.escape = (text) => text; - const label = EVENT_MAP[type]?.label || type; const text = Mustache.render(action, context); const url = path ? `${this.unleashUrl}${Mustache.render(path, context)}` From d099656847d3d83de0db5fac418b131bd94435b3 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Nuno=20G=C3=B3is?= Date: Tue, 24 Sep 2024 10:52:52 +0100 Subject: [PATCH 6/7] fix: clean up after merge --- frontend/src/component/events/EventLog/EventLog.tsx | 4 +--- 1 file changed, 1 insertion(+), 3 deletions(-) diff --git a/frontend/src/component/events/EventLog/EventLog.tsx b/frontend/src/component/events/EventLog/EventLog.tsx index a14f3d050672..45b774b10a20 100644 --- a/frontend/src/component/events/EventLog/EventLog.tsx +++ b/frontend/src/component/events/EventLog/EventLog.tsx @@ -9,7 +9,6 @@ import theme from 'themes/theme'; import { ConditionallyRender } from 'component/common/ConditionallyRender/ConditionallyRender'; import { styled } from '@mui/system'; import useUiConfig from 'hooks/api/getters/useUiConfig/useUiConfig'; -import { useUiFlag } from 'hooks/useUiFlag'; import { EventLogFilters } from './EventLogFilters'; import { useEventLogSearch } from './useEventLogSearch'; import { StickyPaginationBar } from 'component/common/Table/StickyPaginationBar/StickyPaginationBar'; @@ -50,8 +49,7 @@ const Placeholder = styled('li')({ }); export const EventLog = ({ title, project, feature }: IEventLogProps) => { - const { isOss, isEnterprise } = useUiConfig(); - const eventTimeline = useUiFlag('eventTimeline') && !isOss(); + const { isEnterprise } = useUiConfig(); const showFilters = isEnterprise(); const { events, From 755cc1269007a4b7117a8edd5f23218d47944d3a Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Nuno=20G=C3=B3is?= Date: Tue, 24 Sep 2024 12:14:37 +0100 Subject: [PATCH 7/7] chore: proper animation, last touches --- .../layout/MainLayout/MainLayout.tsx | 18 ++++++---- .../src/component/menu/Header/OldHeader.tsx | 33 +++++++++++++++++-- 2 files changed, 42 insertions(+), 9 deletions(-) diff --git a/frontend/src/component/layout/MainLayout/MainLayout.tsx b/frontend/src/component/layout/MainLayout/MainLayout.tsx index 99e0bfe42e82..13d4ec961191 100644 --- a/frontend/src/component/layout/MainLayout/MainLayout.tsx +++ b/frontend/src/component/layout/MainLayout/MainLayout.tsx @@ -110,16 +110,14 @@ const MainLayoutContentContainer = styled('div')(({ theme }) => ({ const timelineAnimations = { start: { maxHeight: 0, - opacity: 0, - transition: 'max-height 0.5s ease-in-out, opacity 0.5s ease-in-out', + overflow: 'hidden', + transition: 'max-height 0.3s ease-in-out', }, enter: { - maxHeight: '100vh', - opacity: 1, + maxHeight: '105px', }, leave: { maxHeight: 0, - opacity: 0, }, }; @@ -130,6 +128,7 @@ export const MainLayout = forwardRef( const { isChangeRequestConfiguredInAnyEnv } = useChangeRequestsEnabled( projectId || '', ); + const eventTimeline = useUiFlag('eventTimeline'); const [showTimeline, setShowTimeline] = useState(false); const sidebarNavigationEnabled = useUiFlag('navigationSidebar'); @@ -150,7 +149,12 @@ export const MainLayout = forwardRef( setShowTimeline={setShowTimeline} /> } - elseShow={} + elseShow={ + + } /> @@ -186,7 +190,7 @@ export const MainLayout = forwardRef( }} > ({ backgroundColor: theme.palette.background.paper, @@ -130,7 +131,12 @@ const StyledIconButton = styled(IconButton)<{ }, })); -const OldHeader: VFC = () => { +interface IOldHeaderProps { + showTimeline: boolean; + setShowTimeline: (show: boolean) => void; +} + +const OldHeader = ({ showTimeline, setShowTimeline }: IOldHeaderProps) => { const { onSetThemeMode, themeMode } = useThemeMode(); const theme = useTheme(); const adminId = useId(); @@ -146,6 +152,7 @@ const OldHeader: VFC = () => { const onAdminClose = () => setAdminRef(null); const onConfigureClose = () => setConfigRef(null); const celebatoryUnleash = useUiFlag('celebrateUnleash'); + const eventTimeline = useUiFlag('eventTimeline') && !isOss(); const routes = getRoutes(); const adminRoutes = useAdminRoutes(); @@ -245,6 +252,28 @@ const OldHeader: VFC = () => { /> + + + setShowTimeline(!showTimeline) + } + size='large' + > + + + + } + />