MMI adds the Jwt dropdown component (#18117)

* MMI adds the Jwt dropdown

* MMI prettier

* review fixes

* MMI added stories file

ui/components/institutional/jwt-dropdown/__snapshots__/jwt-dropdown.test.js.snap

@@ -0,0 +1,43 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`JwtDropdown should render the Jwt dropdown component 1`] = `
+<div>
+  <div
+    class="box box--flex-direction-row"
+  >
+    <p
+      class="box mm-text custody-search-jwt__select-title mm-text--body-md mm-text--color-text-default box--padding-1 box--flex-direction-row"
+    >
+      [selectJWT]
+    </p>
+    <div
+      class="dropdown custody-search-jwt__select"
+    >
+      <select
+        class="dropdown__select"
+        data-testid="jwt-dropdown"
+      >
+        <option
+          value="someToken"
+        >
+          someToken
+        </option>
+        <option
+          value="jwy1"
+        >
+          ...jwy1
+        </option>
+        <option
+          value="jwt2"
+        >
+          ...jwt2
+        </option>
+      </select>
+      <span
+        class="box dropdown__icon-caret-down mm-icon mm-icon--size-sm box--display-inline-block box--flex-direction-row box--color-inherit"
+        style="mask-image: url('./images/icons/arrow-down.svg');"
+      />
+    </div>
+  </div>
+</div>
+`;

ui/components/institutional/jwt-dropdown/index.js

@@ -0,0 +1 @@
+export { default } from './jwt-dropdown';

ui/components/institutional/jwt-dropdown/jwt-dropdown.js

@@ -0,0 +1,58 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import Dropdown from '../../ui/dropdown';
+import Box from '../../ui/box';
+import { Color } from '../../../helpers/constants/design-system';
+import { Text } from '../../component-library';
+import { useI18nContext } from '../../../hooks/useI18nContext';
+
+const JwtDropdown = (props) => {
+  const t = useI18nContext();
+  const { currentJwt, jwtList } = props;
+
+  return (
+    <Box>
+      <Text
+        padding={1}
+        color={Color.textDefault}
+        className="custody-search-jwt__select-title"
+      >
+        {t('selectJWT')}
+      </Text>
+      <Dropdown
+        data-testid="jwt-dropdown"
+        className="custody-search-jwt__select"
+        name="jwt-select"
+        selectedOption={currentJwt}
+        options={[
+          ...(jwtList.find((item) => item === currentJwt)
+            ? []
+            : [
+                {
+                  value: currentJwt,
+                  name:
+                    currentJwt.length > 9
+                      ? `...${currentJwt.slice(-9)}`
+                      : currentJwt,
+                },
+              ]),
+          ...jwtList.map((text) => {
+            return {
+              value: text,
+              name: `...${text?.slice(-9)}`,
+            };
+          }),
+        ]}
+        onChange={(opt) => props.onChange(opt.value)}
+      />
+    </Box>
+  );
+};
+
+JwtDropdown.propTypes = {
+  jwtList: PropTypes.array,
+  currentJwt: PropTypes.string,
+  onChange: PropTypes.func,
+};
+
+export default JwtDropdown;

ui/components/institutional/jwt-dropdown/jwt-dropdown.scss

@@ -0,0 +1,10 @@
+.custody-search-jwt__select {
+  height: 54px;
+  width: 100%;
+  display: flex;
+  align-items: center;
+
+  &-title {
+    @include Paragraph;
+  }
+}

ui/components/institutional/jwt-dropdown/jwt-dropdown.stories.js

@@ -0,0 +1,19 @@
+import React from 'react';
+import { action } from '@storybook/addon-actions';
+import JwtDropdown from '.';
+
+export default {
+  title: 'Components/Institutional/JwtDropdown',
+  component: JwtDropdown,
+  args: {
+    jwtList: ['jwt1', 'jwt2'],
+    currentJwt: 'jwt1',
+    onChange: () => {
+      action('onChange');
+    },
+  },
+};
+
+export const DefaultStory = (args) => <JwtDropdown {...args} />;
+
+DefaultStory.storyName = 'JwtDropdown';

ui/components/institutional/jwt-dropdown/jwt-dropdown.test.js

@@ -0,0 +1,23 @@
+import { render, fireEvent } from '@testing-library/react';
+import React from 'react';
+import sinon from 'sinon';
+import JwtDropdown from './jwt-dropdown';
+
+describe('JwtDropdown', () => {
+  it('should render the Jwt dropdown component', () => {
+    const props = {
+      jwtList: ['jwy1', 'jwt2'],
+      currentJwt: 'someToken',
+      onChange: sinon.spy(),
+    };
+
+    const { getByTestId, container } = render(<JwtDropdown {...props} />);
+
+    fireEvent.change(getByTestId('jwt-dropdown'), {
+      target: { value: 'jwt2' },
+    });
+
+    expect(getByTestId('jwt-dropdown')).toBeDefined();
+    expect(container).toMatchSnapshot();
+  });
+});