style: convert variable panel tabs to carbon (#4687)

* style: convert variable panel tabs to carbon

* test: add panel header test back

* refactor: add undefined check for first tab

* refactor: use default layer color

client/src/App/Carbon/ProcessInstance/BottomPanel/VariablePanel/index.tsx

@@ -0,0 +1,58 @@
+/*
+ * Copyright Camunda Services GmbH and/or licensed to Camunda Services GmbH
+ * under one or more contributor license agreements. Licensed under a proprietary license.
+ * See the License.txt file for more information. You may not use this file
+ * except in compliance with the proprietary license.
+ */
+
+import {observer} from 'mobx-react';
+import {when} from 'mobx';
+
+import {flowNodeSelectionStore} from 'modules/stores/flowNodeSelection';
+import {useEffect} from 'react';
+import {variablesStore} from 'modules/stores/variables';
+import {TabView} from 'modules/components/Carbon/TabView';
+
+const VariablePanel = observer(function VariablePanel() {
+  useEffect(() => {
+    const variablesLoadedCheckDisposer = when(
+      () => ['fetched', 'error'].includes(variablesStore.state.status),
+      () => {
+        variablesStore.setAreVariablesLoadedOnce(true);
+      }
+    );
+
+    return () => {
+      variablesStore.setAreVariablesLoadedOnce(false);
+      variablesLoadedCheckDisposer();
+    };
+  }, []);
+
+  return (
+    <TabView
+      tabs={[
+        {
+          id: 'variables',
+          label: 'Variables',
+          content: <div>variables</div>,
+        },
+        ...(flowNodeSelectionStore.isRootNodeSelected
+          ? []
+          : [
+              {
+                id: 'input-mappings',
+                label: 'Input Mappings',
+                content: <div>input mappings</div>,
+              },
+              {
+                id: 'output-mappings',
+                label: 'Output Mappings',
+                content: <div>output mappings</div>,
+              },
+            ]),
+      ]}
+    />
+  );
+});
+
+export {VariablePanel};

client/src/App/Carbon/ProcessInstance/index.tsx

@@ -41,6 +41,7 @@ import {ModalStateManager} from 'modules/components/Carbon/ModalStateManager';
 import {ModificationSummaryModal} from './ModificationSummaryModal';
 import {useCallbackPrompt} from 'modules/hooks/useCallbackPrompt';
 import {LastModification} from './LastModification';
+import {VariablePanel} from './BottomPanel/VariablePanel';
 
 const ProcessInstance: React.FC = observer(() => {
   const {processInstanceId = ''} = useProcessInstancePageParams();
@@ -172,7 +173,7 @@ const ProcessInstance: React.FC = observer(() => {
         bottomPanel={
           <BottomPanel>
             <FlowNodeInstanceLog />
-            <div>variables panel</div>
+            <VariablePanel />
           </BottomPanel>
         }
         frameHeader={

client/src/modules/components/Carbon/TabView/index.test.tsx

@@ -0,0 +1,90 @@
+/*
+ * Copyright Camunda Services GmbH and/or licensed to Camunda Services GmbH
+ * under one or more contributor license agreements. Licensed under a proprietary license.
+ * See the License.txt file for more information. You may not use this file
+ * except in compliance with the proprietary license.
+ */
+
+import {render, screen} from 'modules/testing-library';
+import {ThemeProvider} from 'modules/theme/ThemeProvider';
+import {TabView} from './index';
+
+describe('TabView', () => {
+  it('should render panel header if there is only one tab', () => {
+    render(
+      <TabView
+        tabs={[
+          {
+            id: 'tab-1',
+            label: 'First Tab',
+            content: <div>Content of the first tab</div>,
+          },
+        ]}
+      />,
+      {wrapper: ThemeProvider}
+    );
+
+    expect(
+      screen.getByRole('heading', {name: 'First Tab'})
+    ).toBeInTheDocument();
+    expect(
+      screen.queryByRole('tab', {name: 'First Tab'})
+    ).not.toBeInTheDocument();
+    expect(screen.getByText('Content of the first tab')).toBeInTheDocument();
+  });
+
+  it('should render first tab by default', () => {
+    render(
+      <TabView
+        tabs={[
+          {
+            id: 'tab-1',
+            label: 'First Tab',
+            content: <div>Content of the first tab</div>,
+          },
+          {
+            id: 'tab-2',
+            label: 'Second Tab',
+            content: <div>Content of the second tab</div>,
+          },
+        ]}
+      />,
+      {wrapper: ThemeProvider}
+    );
+
+    expect(screen.getByRole('tab', {name: 'First Tab'})).toBeInTheDocument();
+    expect(screen.getByRole('tab', {name: 'Second Tab'})).toBeInTheDocument();
+
+    expect(screen.getByText('Content of the first tab')).toBeVisible();
+  });
+
+  it('should switch between tabs', async () => {
+    const {user} = render(
+      <TabView
+        tabs={[
+          {
+            id: 'tab-1',
+            label: 'First Tab',
+            content: <div>Content of the first tab</div>,
+          },
+          {
+            id: 'tab-2',
+            label: 'Second Tab',
+            content: <div>Content of the second tab</div>,
+          },
+        ]}
+      />,
+      {wrapper: ThemeProvider}
+    );
+
+    expect(screen.getByText('Content of the first tab')).toBeVisible();
+
+    await user.click(screen.getByRole('tab', {name: 'Second Tab'}));
+    expect(screen.queryByText('Content of the first tab')).not.toBeVisible();
+    expect(screen.getByText('Content of the second tab')).toBeVisible();
+
+    await user.click(screen.getByRole('tab', {name: 'First Tab'}));
+    expect(screen.getByText('Content of the first tab')).toBeVisible();
+    expect(screen.queryByText('Content of the second tab')).not.toBeVisible();
+  });
+});

client/src/modules/components/Carbon/TabView/index.tsx

@@ -0,0 +1,63 @@
+/*
+ * Copyright Camunda Services GmbH and/or licensed to Camunda Services GmbH
+ * under one or more contributor license agreements. Licensed under a proprietary license.
+ * See the License.txt file for more information. You may not use this file
+ * except in compliance with the proprietary license.
+ */
+
+import {PanelHeader} from 'modules/components/Carbon/PanelHeader';
+import {Container, Tab, Content} from './styled';
+import {tracking} from 'modules/tracking';
+import {Tabs, TabList, TabPanels, TabPanel} from '@carbon/react';
+
+type TabType = {
+  id: string;
+  label: string;
+  content: React.ReactNode;
+};
+
+type Props = {
+  tabs: TabType[];
+  eventName?: 'variables-panel-used';
+  dataTestId?: string;
+};
+
+const TabView: React.FC<Props> = ({tabs = [], eventName, dataTestId}) => {
+  return (
+    <Container data-testid={dataTestId}>
+      {tabs.length === 1 && tabs[0] !== undefined ? (
+        <>
+          <PanelHeader title={tabs[0].label} size="sm"></PanelHeader>
+          <Content>{tabs[0].content}</Content>
+        </>
+      ) : (
+        <Tabs>
+          <TabList aria-label="Variable Panel Tabs">
+            {tabs.map(({id, label}) => (
+              <Tab
+                key={id}
+                onClick={() => {
+                  if (eventName !== undefined) {
+                    tracking.track({
+                      eventName,
+                      toTab: id,
+                    });
+                  }
+                }}
+              >
+                {label}
+              </Tab>
+            ))}
+          </TabList>
+          <TabPanels>
+            {tabs.map(({id, content}) => (
+              <TabPanel key={id}>{content}</TabPanel>
+            ))}
+          </TabPanels>
+        </Tabs>
+      )}
+    </Container>
+  );
+};
+
+export {TabView};

client/src/modules/components/Carbon/TabView/styled.tsx

@@ -0,0 +1,27 @@
+/*
+ * Copyright Camunda Services GmbH and/or licensed to Camunda Services GmbH
+ * under one or more contributor license agreements. Licensed under a proprietary license.
+ * See the License.txt file for more information. You may not use this file
+ * except in compliance with the proprietary license.
+ */
+
+import styled from 'styled-components';
+import {Tab as BaseTab} from '@carbon/react';
+
+const Container = styled.div`
+  width: 100%;
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+  background-color: var(--cds-layer);
+`;
+
+const Content = styled.section`
+  padding: var(--cds-spacing-05);
+`;
+
+const Tab = styled(BaseTab)`
+  padding: 10px var(--cds-spacing-05) 8px !important;
+`;
+
+export {Container, Content, Tab};

client/src/modules/types/carbon.d.ts

@@ -218,6 +218,28 @@ declare module '@carbon/react' {
     tabIndex?: number;
   }>;
 
+  export const TabList: React.FunctionComponent<{
+    activation?: 'automatic' | 'manual';
+    'aria-label': string;
+    children?: React.ReactNode;
+    className?: string;
+    contained?: boolean;
+    iconSize?: 'default' | 'lg';
+    leftOverflowButtonProps?: object;
+    rightOverflowButtonProps?: object;
+    scrollDebounceWait?: number;
+    scrollIntoView?: boolean;
+  }>;
+
+  export const TabPanels: React.FunctionComponent<{
+    children?: React.ReactNode;
+  }>;
+
+  export const TabPanel: React.FunctionComponent<{
+    children?: React.ReactNode;
+    className?: string;
+  }>;
+
   export * from 'carbon-components-react';
 }